В некоторых проектах возникает необходимость разработать календарь с необычным функционалом или дизайном. Чтобы сделать это, можно использовать готовые компоненты (например, jQuery UI Datepicker), либо писать код календаря с нуля. Для упрощения такой задачи можно использовать утилиту AbstractCalendar.JS.

Эта утилита генерирует базовую JSON-структуру календаря на один месяц, т.е. массив примерно такого вида:

[{
    "days": [
        { "year": 2017, "month": 1, "date": 27, "isToday": false, "isOtherMonth": true },
        { "year": 2017, "month": 1, "date": 28, "isToday": false, "isOtherMonth": true },
        { "year": 2017, "month": 2, "date": 1, "isToday": false, "isOtherMonth": false },
        { "year": 2017, "month": 2, "date": 2, "isToday": false, "isOtherMonth": false },
        { "year": 2017, "month": 2, "date": 3, "isToday": false, "isOtherMonth": false },
        { "year": 2017, "month": 2, "date": 4, "isToday": false, "isOtherMonth": false },
        { "year": 2017, "month": 2, "date": 5, "isToday": false, "isOtherMonth": false }
    ]
},
{
    "days": [
        { "year": 2017, "month": 2, "date": 6, "isToday": false, "isOtherMonth": false },
        { "year": 2017, "month": 2, "date": 7, "isToday": false, "isOtherMonth": false },
        { "year": 2017, "month": 2, "date": 8, "isToday": false, "isOtherMonth": false },
        { "year": 2017, "month": 2, "date": 9, "isToday": false, "isOtherMonth": false },
        { "year": 2017, "month": 2, "date": 10, "isToday": false, "isOtherMonth": false },
        { "year": 2017, "month": 2, "date": 11, "isToday": false, "isOtherMonth": false },
        { "year": 2017, "month": 2, "date": 12, "isToday": false, "isOtherMonth": false }
    ]
},
...

Из такой структуры можно быстро создать календарь любого вида, используя средства JavaScript или любого JavaScript-фреймворка.

Ссылки:

Пример использования

GitHub-репозиторий

Пакет в NPM

Страница в нашем магазине