PHPackages                             andrey-tech/calendar-js - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. andrey-tech/calendar-js

ActiveLibrary[Utility & Helpers](/categories/utility)

andrey-tech/calendar-js
=======================

Класс Calendar. Формирует календарь на год или на месяц с версткой CSS Grid Layout

3.1.0(5y ago)171MITJavaScript

Since Jun 16Pushed 5y ago1 watchersCompare

[ Source](https://github.com/andrey-tech/calendar-js)[ Packagist](https://packagist.org/packages/andrey-tech/calendar-js)[ Docs](https://github.com/andrey-tech/calendar-js)[ RSS](/packages/andrey-tech-calendar-js/feed)WikiDiscussions master Synced today

READMEChangelog (1)DependenciesVersions (2)Used By (0)

Calendar JS
===========

[](#calendar-js)

[![Calendar JS logo](./assets/calendar-logo.png)](./assets/calendar-logo.png)

Класс Calendar. Формирует НTML-код календаря на год или на месяц с версткой CSS Grid Layout.

Содержание
----------

[](#содержание)

- [Требования](#%D0%A2%D1%80%D0%B5%D0%B1%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F)
- [Класс Calendar](#%D0%9A%D0%BB%D0%B0%D1%81%D1%81-calendar)
    - [Методы класса](#%D0%9C%D0%B5%D1%82%D0%BE%D0%B4%D1%8B-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0)
    - [Дополнительные параметры](#%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B)
    - [HTML-представление дней календаря](#html-%D0%BF%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B4%D0%BD%D0%B5%D0%B9-%D0%BA%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8F)
    - [Примеры](#%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B)
        - [Календарь на текущий год](#%D0%9A%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8C-%D0%BD%D0%B0-%D1%82%D0%B5%D0%BA%D1%83%D1%89%D0%B8%D0%B9-%D0%B3%D0%BE%D0%B4)
        - [Календарь на заданный год](#%D0%9A%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8C-%D0%BD%D0%B0-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B9-%D0%B3%D0%BE%D0%B4)
        - [Календарь на текущий месяц текущего года](#%D0%9A%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8C-%D0%BD%D0%B0-%D1%82%D0%B5%D0%BA%D1%83%D1%89%D0%B8%D0%B9-%D0%BC%D0%B5%D1%81%D1%8F%D1%86-%D1%82%D0%B5%D0%BA%D1%83%D1%89%D0%B5%D0%B3%D0%BE-%D0%B3%D0%BE%D0%B4%D0%B0)
        - [Календарь на заданный месяц заданного года](#%D0%9A%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8C-%D0%BD%D0%B0-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B9-%D0%BC%D0%B5%D1%81%D1%8F%D1%86-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%BD%D0%BE%D0%B3%D0%BE-%D0%B3%D0%BE%D0%B4%D0%B0)
        - [HTML-код страницы календаря](#html-%D0%BA%D0%BE%D0%B4-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B-%D0%BA%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8F)
        - [Формируемый HTML-код календаря на месяц](#%D0%A4%D0%BE%D1%80%D0%BC%D0%B8%D1%80%D1%83%D0%B5%D0%BC%D1%8B%D0%B9-html-%D0%BA%D0%BE%D0%B4-%D0%BA%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8F-%D0%BD%D0%B0-%D0%BC%D0%B5%D1%81%D1%8F%D1%86)
- [Автор](#%D0%90%D0%B2%D1%82%D0%BE%D1%80)
- [Лицензия](#%D0%9B%D0%B8%D1%86%D0%B5%D0%BD%D0%B7%D0%B8%D1%8F)

Требования
----------

[](#требования)

- [jQuery](https://jquery.com/)
- Веб-браузер, [поддерживающий](https://caniuse.com/#feat=css-grid) спецификацию [CSS Grid Layout (level 1)](https://www.w3.org/TR/css-grid-1/):
    - Google Chrome >= 57
    - Mozilla Firefox >= 52
    - Apple Safari >= 10.1
    - Microsoft Edge >= 16
    - Opera >= 68

Класс Calendar
--------------

[](#класс-calendar)

### Методы класса

[](#методы-класса)

- `construct(fullYear)` Конструктор класса.
    - `fullYear` - четырёхзначный номер года (например, 2021).
        Если номер года не передан, то будет использован текущий год.
- `getMonthHTML(month)` Возвращает HTML представление месяца в виде обернутого набора jQuery.
    - `month` - номер месяца (например, 1); **нумерация месяцев начинается с нуля (0 - январь, 11 - декабрь)**.
        Если номер месяца не передан, то будет использован текущий месяц.
- `getYearHTML()` Возвращает HTML представление года в виде обернутого набора jQuery.

### Дополнительные параметры

[](#дополнительные-параметры)

Дополнительные параметры работы устанавливаются через свойства объекта класса `Calendar`.

СвойствоПо умолчаниюОписание`showYearTitle`falseВключает отображение заголовка года`showMonthTitle`trueВключает отображение заголовка месяца`showMonthTitleYear`trueВключает отображение номера года в заголовке месяца`showNextPrevDays`trueВключает отображение дат из последующего и предыдущего месяца в календаре текущего месяца

### HTML-представление дней календаря

[](#html-представление-дней-календаря)

Для каждого дня месяца в HTML-коде календаря устанавливаются следующие HTML-атрибуты `data-*`:

- `data-day` - день месяца (1-31);
- `data-month` - номер месяца (0-11). Нумерация месяцев начинается с нуля (0 - январь, 11 - декабрь);
- `data-year` - четырёхзначный номер года;
- `data-wday` - номер дня недели (0-6). Нумерация дней недели начинается с нуля (0 - понедельник, 6 - воскресенье);
- `data-iso-date` - дата в формате [ISO 8601](https://ru.wikipedia.org/wiki/ISO_8601) (2020-06-28).

Для каждого дня месяца в HTML-коде календаря могут быть установлены CSS-классы со следущими именами, характеризующими данный день месяца:

- `current` - день текущего месяца;
- `previous` - день предыдущего месяца;
- `next` - день следующего месяца;
- `today` - сегодняшний день;
- `holiday` - выходной день (суббота или воскресенье).

Пример:

```

      6

```

### Примеры

[](#примеры)

#### Календарь на текущий год

[](#календарь-на-текущий-год)

```
$(() => {
    let calendar = new Calendar();

    // Включаем отображение заголовка года
    calendar.showYearTitle = true;

    // Выключаем отображение номера года в заголовке месяца
    calendar.showMonthTitleYear = false;

    // Выключаем отображение дат из последующего и предыдущего месяца в текущем месяце
    calendar.showNextPrevDays = false;

    // Получам календарь на текущий год
    let $year = calendar.getYearHTML();

    // Выводим календарь
    $('body').append($year);
});
```

#### Календарь на заданный год

[](#календарь-на-заданный-год)

```
$(() => {
    let calendar = new Calendar(2020);

    // Получам календарь на 2020 год
    let $year = calendar.getYearHTML();

    // Выводим календарь
    $('body').append($year);
});
```

#### Календарь на текущий месяц текущего года

[](#календарь-на-текущий-месяц-текущего-года)

```
$(() => {
    let calendar = new Calendar();

    // Получам календарь на текущий месяц текущего года
    let $month = calendar.getMonthHTML();

    // Выводим календарь
    $('body').append($month);
});
```

#### Календарь на заданный месяц заданного года

[](#календарь-на-заданный-месяц-заданного-года)

```
$(() => {
    let calendar = new Calendar(2020);

    // Получам календарь на июнь месяц 2020-го года
    let $month = calendar.getMonthHTML(5);

    // Выводим календарь
    $('body').append($month);
});
```

#### HTML-код страницы календаря

[](#html-код-страницы-календаря)

```

    Calendar example

      $(() => {
        let calendar = new Calendar(),
            $year = calendar.getYearHTML(),
            $month = calendar.getMonthHTML();
        $('body').append($year, $month);
      });

```

#### Формируемый HTML-код календаря на месяц

[](#формируемый-html-код-календаря-на-месяц)

```

    Июнь 2020

      Пн
      Вт
      Ср
      Чт
      Пт
      Сб
      Вс

        1

        2

        3

        4

        5

        6

        7

        8

        9

        10

        11

        12

        13

        14

        15

        16

        17

        18

        19

        20

        21

        22

        23

        24

        25

        26

        27

        28

        29

        30

        1

        2

        3

        4

        5

```

Автор
-----

[](#автор)

© 2019-2021 andrey-tech

Лицензия
--------

[](#лицензия)

Данный класс распространяется на условиях лицензии [MIT](./LICENSE).

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity55

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

2153d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/de69f7116b4bbba0435826347eeea01c7c6d831ae5ca5325ccf0686e7ddb92b4?d=identicon)[andrey-tech](/maintainers/andrey-tech)

---

Top Contributors

[![andrey-tech](https://avatars.githubusercontent.com/u/51994444?v=4)](https://github.com/andrey-tech "andrey-tech (5 commits)")

---

Tags

calendarcss-grid-layoutcssgridgrid-layoutjavascriptjqueryjsjavascriptjquerycalendarcssgrid

### Embed Badge

![Health badge](/badges/andrey-tech-calendar-js/health.svg)

```
[![Health](https://phpackages.com/badges/andrey-tech-calendar-js/health.svg)](https://phpackages.com/packages/andrey-tech-calendar-js)
```

###  Alternatives

[snapappointments/bootstrap-select

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support.

9.8k480.4k3](/packages/snapappointments-bootstrap-select)[froala/wysiwyg-editor

A beautiful jQuery WYSIWYG HTML rich text editor. High performance and modern design make it easy to use for developers and loved by users.

5.4k306.9k3](/packages/froala-wysiwyg-editor)[fedemotta/yii2-widget-datatables

DataTables widget for Yii2

34179.4k1](/packages/fedemotta-yii2-widget-datatables)[edofre/yii2-fullcalendar

Yii2 widget for fullcalendar

2761.7k1](/packages/edofre-yii2-fullcalendar)[edofre/yii2-fullcalendar-scheduler

Yii2 widget for fullcalendar scheduler module

2437.0k](/packages/edofre-yii2-fullcalendar-scheduler)[edofre/laravel-fullcalendar-scheduler

Laravel component for fullcalendar scheduler module

251.5k](/packages/edofre-laravel-fullcalendar-scheduler)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)