myCalendar - календарь с событиями

• Описание
• Несколько календарей на странице
• Создание событий
• Удаление событий
• Права на операции с событиями
• Системные параметры
• Параметры сниппета
• Примеры
• Ссылки

Описание

Данное дополнение для фронтэнда использует яваскрипт календарь - fullCalendar. Много настроек, красивый вид, поддерживается разработчиками.

Вызывается календарь сниппетом [[!myCalendar]]
У сниппета есть несколько параметров из настроек fullCalendar, которых вполне достаточно для работы. Если нужны дополнительные настройки, то их можно добавить в скрипт самостоятельно.

В режиме разрешённого редактирования события можно перемещать, ресайзить, удалять.

[[!myCalendar? &googleCalendars=`ru.russian#holiday@group.v.calendar.google.com`]]

Несколько календарей на странице

Сниппет myCalendar можно вызывать несколько раз. Каждому такому вызову нужно давайть уникальное название, которое указывается в параметре instance.

[[!myCalendar? &instance=`calendar1`]]
[[!myCalendar? &instance=`calendar2` &right=`` &left=`` &defaultView=`agendaDay`]]

Изменения в одном интерфейсе календаря сразу же отражается в других.

Создание событий

Добавить событие можно двумя способами:

• кликнуть на ячейку календаря;
• выделить диапазон (несколько ячеек).

Откроется диалог создания события. В нём обязательно нужно указать заголовок и дату начала события. Остальные поля по желанию. Время и дата окончания, если они не указаны, определяются автоматически -

• Если время начала события не указано, то оно получит значение 00:00.
• Если дата и время окончания не указаны, то они определяются согласно параметру defaultDuration. Т.е. ко времени начала прибавляется значение, указанное в этом параметре.
• Если выделен диапазон, то начальное и конечное время определяются по границам выделения.

Если событие создаётся, когда календарь в режиме "Месяц", то оно по-умолчанию будет указано как длящееся целый день. Т.е. будет отмечен чекбокс "Целый день". Каждому событию можно определить свой цвет. Иначе событие унаследует цвет календаря, указанный в параметре defaultColor.

Создавать события могут как зарегистрированные так и незарегистрированные пользователи (гости), если это разрешено настройков allowGuestEdit.

Удаление событий

Удалить событие можно или кликнув на крестик в событии, или нажав кнопку "Удалить" в диалоге редактирования. Событие удалится только после подтверждения.

Права на операции с событиями

Чтобы иметь возможность создавать, изменять и удалять события, календарь должен быть в режиме редактирования. Для этого параметр у него (календаря) параметр readOnly должен быть выставлен в false. Также можно запретить незарегистрированным пользователям любые операции с событиями кроме просмотра. Для этого нужно указать параметр allowGuestEdit=`false`.

Системные параметры

Параметры сниппета

Примеры

Пример того, как можно управлять режимом редактирования календаря. Меня часто спрашивают как разрешить редактирование только пользователям определённой группы. Это делается достаточно просто. Нужно создать сниппет-обёртку, в котором и определить соответствующую логику. Например, такой

<?php
// Если пользователь зарегистрирован и входит в группу "Manager", то редактирование календаря разрешено.
if ($modx->user && $modx->user->isMember('Manager')) {
    $scriptProperties['readOnly'] = true; // Редактирование запрещено
} else {
    $scriptProperties['readOnly'] = false; // Редактирование разрешено
}
// А теперь передаём параметры в сниппет myCalendar
return $modx->runSnippet('myCalendar', $scriptProperties);

Ну и вставляете его в нужном месте.

Этот сниппет можно вызывать с теми же параметрами, что и у сниппета myCalendar. После обработки в сниппете-обёртке они передадутся в myCalendar и перекроют стандартные параметры.

Пример вывода списка событий с использованием pdoTools.

[[!pdoResources?
    &tpl=`@INLINE <div>[[+start]]. [[+title]]</div><div>[[+description]]</div><br/>`
    &class=`myCalendarEvents`
    &loadModels=`mycalendar`
    &sortby=`start`
    &sortdir=`ASC`
]] 

Ссылки

• Демо.
• Небольшое видео.
• Проект на Github.