Внимание: меню правой кнопки мыши для компонента «Календарь» зависит от компонента jquery.contextMenu.js

Свойства компонента:

• elem: обязательный параметр, используется селектор jq;

• holidayType: тип отпуска по умолчанию:

  • [{
    • id: 0,
    • menuitem:
      • [{
        • key: 'add',
        • name: 'Добавить отпуск',
        • icon: 'add' }] }, {
    • id: 1,
    • name: «Праздничные дни»,
    • caption: 'Отпуск',
    • daycolor: '#000000',
    • color: '#f52e2e',
    • menuitem:
      • [{
        • key: 'modify',
        • name: 'Изменить отпуск',
        • icon: 'edit' }, {
        • key: 'delete',
        • name: 'Удалить отпуск',
        • icon: 'delete' } ] }, {
    • id: 2,
    • name: 'Сверхурочные',
    • caption: 'Рабочие часы',
    • daycolor: '#FF0000',
    • color: '#cbcbcb',
    • menuitem:
      • [{
        • key: 'modify',
        • name: 'Изменить отпуск',
        • icon: 'edit' }, {
        • key: 'delete',
        • name: 'Удалить отпуск',
        • icon: 'delete' } ] }];

id обозначает тип отпуска, name — название типа отпуска, caption — обозначение в календаре, daycolor — цвет даты, color — цвет обозначения caption, menuitem — меню для отображения даты.

key обозначает значение ключа меню, name — наименование меню, icon — значок меню.

• holidayurl: адрес запроса для получения информации о праздничных днях за месяц в режиме GET, параметр — month = yyyy-MM, формат возвращаемых данных — {Success: true, Data: [], Msg: null}, Success обозначает успешность запроса, Data — список информации об отпуске;

• value: текущий отображаемый месяц по умолчанию, формат — yyyy-MM;

• menucallback: метод обратного вызова меню (function (itemKey, obj) {}), itemKey обозначает значение ключа меню, obj — объект даты.

Структура данных объекта:

Date — дата запуска меню, формат — yyyy-MM-dd;

DateType — тип даты, соответствует значению id в holidayType;

HolidayID — внутренний идентификатор отпуска;

BeginDate — время начала отпуска, формат — yyyy-MM-dd HH:mm:ss;

EndDate — время окончания отпуска, формат — yyyy-MM-dd HH:mm:ss.

Формат данных об отпуске:

{ ID: '1', // Идентификатор отпуска DateType: 1, // Тип отпуска соответствует значению id в holidayType BeginDate: '2021-01-01 00:00:00', // Время начала отпуска EndDate: '2021-01-03 23:59:59' // Время окончания отпуска }

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

HTML:

Ссылка на CSS:

Ссылка на JS:

Код:

JS:

layui.use(['jquery', 'layCalendar'], function () { var $ = layui.$; var layCalendar = layui.layCalendar;

Инициализация компонента:

layCalendar.render({ elem: '#calendar1', holidayurl: '/HolidayInfo/GetHolidayByMonth', menucallback: function (itemKey, data) {

}

});

Обновление компонента:

layCalendar.reload('calendar'); });