myCalendar - календарь с событиями
- Описание
- Несколько календарей на странице
- Создание событий
- Удаление событий
- Права на операции с событиями
- Системные параметры
- Параметры сниппета
- Примеры
- Ссылки
Описание
Данное дополнение для фронтэнда использует яваскрипт календарь - fullCalendar. Много настроек, красивый вид, поддерживается разработчиками.
Вызывается календарь сниппетом [[!myCalendar]]
У сниппета есть несколько параметров из настроек fullCalendar, которых вполне достаточно для работы. Если нужны дополнительные настройки, то их можно добавить в скрипт самостоятельно.
В режиме разрешённого редактирования события можно перемещать, ресайзить, удалять.
[[!myCalendar? &googleCalendars=`ru.russian#holiday@group.v.calendar.google.com`]]Как настроить можно прочитать тут. С событиями Google календаря манипуляции ограничены. Их можно только редактировать, да и то только в собственном Google интерфейсе.
Несколько календарей на странице
Сниппет myCalendar можно вызывать несколько раз. Каждому такому вызову нужно давайть уникальное название, которое указывается в параметре instance.
[[!myCalendar? &instance=`calendar1`]] [[!myCalendar? &instance=`calendar2` &right=`` &left=`` &defaultView=`agendaDay`]]

Изменения в одном интерфейсе календаря сразу же отражается в других.
Важно понимать, что myCalendar работает только с одним календарем. Для него можно вызывать несколько разных интерфейсов на странице. Для работы с неколькими календарями предназначен fullCalendar.
Создание событий
Добавить событие можно двумя способами:
- кликнуть на ячейку календаря;
- выделить диапазон (несколько ячеек).
Откроется диалог создания события.
В нём обязательно нужно указать заголовок и дату начала события. Остальные поля по желанию. Время и дата окончания, если они не указаны, определяются автоматически -
- Если время начала события не указано, то оно получит значение
00:00
. - Если дата и время окончания не указаны, то они определяются согласно параметру defaultDuration. Т.е. ко времени начала прибавляется значение, указанное в этом параметре.
- Если выделен диапазон, то начальное и конечное время определяются по границам выделения.
Если событие создаётся, когда календарь в режиме "Месяц", то оно по-умолчанию будет указано как длящееся целый день. Т.е. будет отмечен чекбокс "Целый день". Каждому событию можно определить свой цвет. Иначе событие унаследует цвет календаря, указанный в параметре defaultColor.
Создавать события могут как зарегистрированные так и незарегистрированные пользователи (гости), если это разрешено настройков allowGuestEdit.
Удаление событий
Удалить событие можно или кликнув на крестик в событии, или нажав кнопку "Удалить" в диалоге редактирования. Событие удалится только после подтверждения.
Права на операции с событиями
Чтобы иметь возможность создавать, изменять и удалять события, календарь должен быть в режиме редактирования. Для этого параметр у него (календаря) параметр readOnly должен быть выставлен в false
. Также можно запретить незарегистрированным пользователям любые операции с событиями кроме просмотра. Для этого нужно указать параметр allowGuestEdit=`false`
.
Системные параметры
Ключ | Название | Описание |
---|---|---|
google_calendar_api_key | API ключ Google календаря | API ключ Google календаря. |
default_css | Основной css файл | Файл стилей календаря. По-умолчанию, default.min.css. Чтобы отключить загрузку, оставьте поле пустым. Обычно используется для самостоятельной загрузки стилей. |
default_js | Основной js файл | Файл со скриптами. По-умолчанию, default.js. Если ничего не указать, то ничего и не загрузится. Пригодится для самостоятельной загрузки. |
Параметры сниппета
Ключ | По-умолчанию | Описание |
---|---|---|
allDaySlot | true | Показывает строку "Весь день". |
allowGuestEdit | true | Разрешает неавторизованным пользователям (гостям) редактировать события. |
axisFormat | H:mm | Формат вертикальной оси времени. По-умолчанию, "H:mm". Формат "h(:mm) a" отобразит "7 утра" и т.д. |
businessHours | Выделяет рабочие и нерабочие интервалы в календаре. Например, start:'10:00', end:'18:00', dow:[1,2,3,4,5]. | |
defaultColor | #0070c0 | Цвет события по-умолчанию. Если пусто, то используется цвет календаря. |
defaultDuration | 01:00 | Длительность нового события или события, у которого не указана дата окончания. По-умолчанию, "01:00". |
defaultView | agendaWeek | Задает вид по умолчанию.Возможные значения - month, agendaWeek, agendaDay. |
fixedWeekCount | false | Если "Да", то показывает всегда 6 недель в режиме "Месяц". Если "Нет" - показывает количество недель в месяце (4,5 или 6). |
googleCalendars | Идентификаторы календарей Google через запятую. | |
googleClass | google-calendar | CSS класс календарей Google. |
height | 700 | Высота календаря в px. Чтобы отобразить календарь без ограничений, используйте значение "auto". |
hiddenDays | Номера дней недели через запятую, которые нужно скрыть (Воскресенье - 0, понедельник - 1 и т.д.). | |
instance | mycalendar | Имя уникального идентификатора экземпляра календаря. Необходимо, если вызывается более одного календаря на странице. |
loadjQuery | true | Управляет загрузкой jQuery. False отключает загрузку. |
loadjQueryUI | true | Управляет загрузкой jQueryUI. False отключает загрузку. |
maxTime | Определяет время окончания дня. Если не указано, то значение будет равно "24:00". | |
minTime | Время, с которого начинается день. Если не указано, то значение будет равно "00:00". | |
readOnly | false | Режим календаря. True - редактирование запрещено. |
showDialog | true | Показывать или нет диалог при клике на событие, когда календарь в режиме "Только для чтения". |
showWeekNumber | false | Показывает номера недель. |
showWeekends | true | Показывать выходные дни (субботу, воскресенье). |
tpl | tpl.myCalendar | Шаблон диалога события календаря. |
left | today,prev,next | Левая часть заголовка календаря. Например,'today,prev,next'. Доступные значения: title,prev,next,prevYear,nextYear,today,month,agendaWeek,agendaDay. |
center | title | Центральная часть заголовка календаря.Например,'title'. Доступные значения: title,prev,next,prevYear,nextYear,today,month,agendaWeek,agendaDay. |
right | month,agendaWeek,agendaDay | Правая часть заголовка календаря.Например,'month,agendaWeek,agendaDay'. Доступные значения: title,prev,next,prevYear,nextYear,today,month,agendaWeek,agendaDay. |
Примеры
Пример того, как можно управлять режимом редактирования календаря. Меня часто спрашивают как разрешить редактирование только пользователям определённой группы. Это делается достаточно просто. Нужно создать сниппет-обёртку, в котором и определить соответствующую логику. Например, такой
<?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` ]]