Как сделать календарь событий на сайте

Обновлено: 07.07.2024

В этом посте мы рассмотрим календарь событий от CodeCanyon. Этот скрипт позволяет добавлять календари на ваш сайт PHP. Это готовый инструмент, который вы можете интегрировать в свой существующий сайт PHP и начать использовать уже сегодня!

Если вы создаете веб-сайт, который связан с событиями или хотите представить события вашего сайта в интерактивной и интересной форме, то вы попали по адресу!

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

В этом посте мы собираемся обсудить инструмент Календарь событий , который можно приобрести в CodeCanyon по очень разумной цене. Это позволяет создавать календари со страницы администратора и добавлять события в каждый календарь. Каждый календарь способен отображать неограниченное количество событий.

Давайте быстро пройдемся по важным функциям, которые он предоставляет:

неограниченное количество календарей
неограниченное количество событий с каждым календарем
однодневные и многодневные мероприятия
медиа поддержка событий
импортировать фотографии из Flickr
многоязычная поддержка
настройки календаря
и более

Установка и настройка

Как только вы купите его, вы сможете скачать zip-файл. Извлеките это, и вы найдете каталог с основным кодом сценария: события . Он предоставляет две разные версии календарей событий, которые вы можете выбрать.

Классический встраиваемый календарь событий

В этой версии вы можете встроить календарь на страницу PHP вашего сайта в div или iframe .

Новый SEO-совместимый календарь событий

Это новая версия календаря с социальными кнопками и метатегами для каждой страницы события для улучшения индексации страницы. В этой версии календарь не является полностью встраиваемым; Вы можете вставить его только в iframe .

В этом посте мы обсудим классическую встраиваемую версию. Конечно, вас ничто не остановит, если вы захотите использовать новую SEO-совместимую версию. Если у вас есть какие-либо вопросы при настройке SEO-совместимой версии, не стесняйтесь спрашивать меня в комментариях ниже.

В нашем случае, поскольку мы выбрали классическую встраиваемую версию, мы будем использовать каталог events / embeddable . Скопируйте этот каталог в ваше PHP-приложение. Например, если ваш проект настроен на / web / demo-app / public_html , вы должны скопировать каталог для встраиваемых файлов в / web / demo-app / public_html / embeddable .

Сегодня мы представляем вам подборку плагинов, которые позволяет вам с легкостью создавать календари с возможностью выбора даты, большая часть из которых разработаны на jQuery и jQuery UI (пользовательский интерфейс).

Почти все эти календари представляют собой полноценную платформу с хорошим функционалом, но некоторые придется улучшать и дорабатывать, но иногда это даже в плюс, так как в большинстве случаев вам, так или иначе, надо подгонять внешний вид под дизайн сайта.

Эта статья о том, как можно создать календарь в стиле приложения для iPhone.

DatePicker позволяет пользователям выбирать текущую дату из выпадающего меню. Вам не нужно заботиться о форматах даты, потому что они всегда корректны за счет формы выбора.

Calendar – это класс javascript, с помощью которого можно добавить доступную и ненавязчивую форму выбора даты. Этот класс представляет собой сборку из нескольких элементов, которые зачастую применяются веб-разработчиками и уже были полностью переделаны командой MooTools. В него постарались включить все нужные свойства, но сохранить максимально маленький размер. Для того чтобы ознакомиться с классом, посмотрите ссылки, представленные ниже.

Плагин представляет собой виджет календаря на jQuery с возможность отображения месяца. Вы можете выбрать, какой месяц нужно отображать, а по стандарту он будет отображать текущий месяц. Плагин отлично выполняет свою функцию, несмотря на то, что он состоит всего из 100 строчек кода javascript.

Компонент календаря, который очень просто модифицировать и изменить внешний вид.

* Создание любого количества месяцев на отдельный календарь
* Возможность отображения выходных и праздничных дней
* Начальная и конечная даты
* Изменение внешнего вида посредством CSS
* Возможность устанавливать сразу несколько календарей на странице
* Оптимизация для лучшей производительности

Этот гибкий и простой всплывающий календарь ориентирован на работу во всех браузерах. Вы можете полностью изменять и модифицировать его относительно языков, дат и цветов. Всплывающее окно отображает месяц в течение нескольких лет.

Можно также, опционально, ввести дату и вам отобразится нужный месяц. Год можно отображать как в формате двух чисел, так и четырех, а месяц можно отобразить цифрами или названием. Вы также можете отобразить любую дату или день посредством javascript.

Этот виджет отлично подойдет для комбинирования технологий со стороны сервера для дальнейшей разработки профессионального приложения.

Вы без труда сможете интегрировать компонент DatePicker в свое веб-приложение.

* Возможность отображения вместе с другими элементами на странице
* Несколько календарей в одном компоненте
* Возможность выделения определенных дат
* Возможность изменения внешнего вида посредством CSS
* Возможность локализировать названия дней и месяцев
* Возможность задать собственный день начала недели
* Возможность интеграции в окно браузера

Calendar System представляет собой простой календарь.

Tigra Calendar представляет собой кросс-браузерный javascript-элемент, который предоставляет возможность выбора дат в выпадающих меню посредством форм HTML.

Одно приложение Plans сможет поддерживать несколько календарей. Также есть возможность отображать информацию в разных календарях друг с другом. Каждый календарь управляется отдельно (уникальный пароль, отдельные настройки, разный внешний вид).

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

Приложение поддерживает несколько языков. Вы может вручную выставить день начала недели. Даты можно отображать в формате аббревиатур (mm/dd/yy, dd/mm/yy и так далее). В приложении можно задействовать данные из отдельных файлов или базы данных.

jQuery UI Datepicker представляет собой плагин с широкими возможностями по настройке, с помощью которого вы можете добавлять формы выбора даты на ваши веб-страницы. Вы также можете редактировать внешний вид плагина и используемый язык, указывать конкретные промежутки времени, а также без труда добавлять дополнительные кнопки навигации.

По стандарту, календарь отображается в виде небольшого наложения посредством onfocus и автоматически закрывается с эффектом onblur, или после того, как дата уже выбрана. Вы можете без труда внедрить календарь в свою веб-страницу посредством div или span.

Вы можете управлять календарем с помощью горячих клавиш:

* page up/down – предыдущий/следующий месяц
* ctrl+page up/down – – предыдущий/следующий год
* ctrl+home – текущий месяц или открыть календарь, если он закрыт
* ctrl+left/right – – предыдущий/следующий день
* ctrl+up/down – – предыдущая/следующая неделя
* enter – подтвердить выбранную дату
* ctrl+end – закрыть без сохранения даты
* escape – просто закрыть календарь

Данный элемент позволяет вам выбирать дату посредством простой панели слайдеров. Путем перетаскивания ползунка по временной шкале, вы можете незамедлительно менять дату. Более того, когда пользователь хочет отобразить другие даты, ползунки автоматически возвращаются на места.

FullCalendar представляет собой плагин jQuery, который позволяет вам создать полномасштабные календари с возможностью перетаскивания. В плагине используется AJAX, и вы с легкостью сможете отформатировать его под нужный формат (также есть специальное дополнения для Google Calendar).

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

* полное управление посредством клавиатуры
* поддержка различных форматов отображения и разделителей
* ненавязчивый
* возможность оформления посредством css
* возможность отображения конкретных дней недели
* гибкая возможность локализации
* возможность подсветки определенных дней недели
* бесплатное распространение (по лицензионному соглашению CC)

* работает с одним или более элементом ввода текста input type="text"
* возможность подсветки определенных дат
* автоматически закрывается после выбора даты (а также при нажатии кнопок сегодняшней даты или закрытия)
* возможность быстрых переходов посредством поля "select"
* автоматически скрывает кнопки , если больше некуда перелистывать
А также многое другое…

Данный компонент представляет собой простенькую форму выбора даты и календарь.

* возможность добавления языков
* возможность изменения текущей даты
* возможность прокрутки колесиком мыши
* наличие кнопок

Date / Time Picker представляет собой простой компонент выбора даты или времени. Для того, чтобы открыть календарь, просто кликните по иконке с правой стороны поля ввода.

Еще один пример простого компонента выбора даты. У календаря есть три требуемых положения: объект Yahoo Global , инструмент отображения событий и коллекция DOM .

Плагин превращает форму выбора даты jQuery UI в интерактивный компонент, который разработан специально для выбора ряда дат. Это обновление исходной версии .

jMonthCalendar представляет собой полноценный календарь с поддержкой событий. Вы можете просто выставить опции и события, и он сам сделает за вас все остальное. У плагина есть возможность модификации, которая позволит разработчику взаимодействовать с календарем, когда отображать смену месяцев, а также редактировать событие при клике по окошку оповещения. jMonthCalendar теперь также поддерживает события при наведении курсора мыши, а также триггер-параметр alert(); По стандарту, на каждое событие выставляет URL, который ведет к странице с подробной информацией.

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

Multiday Calendar Datepicker JQuery Plugin представляет собой красиво оформленный анимированный календарь с возможностью выбора даты и возможностью выбора сразу нескольких дней и отображения нескольких месяцев. Компонент позволяет пользователям выбрать сразу несколько последовательных дней. Компонент отлично подойдет для систем заказа билетов, или бронирования жилья.

Easy PHP Calendar представляет собой полноценный скрипт PHP-календаря, который можно с легкостью интегрировать в страницы, а также легко оформить по собственным предпочтениям. Этот привлекательный полноценный календарь отлично подходит для отображения дат и событий на веб-странице.

Date Input представляет собой плагин выбора даты на jQuery. Компонент очень легкий, быстрый и привлекательный.

jQuery DatePicker представляет собой скромный плагин jQuery, который позволяет вам без труда добавлять формы ввода даты на ваши веб-страницы.

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

Плагин jquery-week-calendar дает возможность интеграции недельного календаря в приложение. Он разработан при помощи jQuery и jQuery UI по типу он-лайн недельного календаря на Google.

Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Частная коллекция качественных материалов для тех, кто делает сайты

Бесплатные уроки CSS для начинающих

Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.

Этот календарь основан на той же javascript-библиотеке, что и myCalendar, но имеет более широкие возможности.

Основные возможности

Неограниченное количество календарей. Настройка и управление календарями находится в меню "Приложения".
Настраиваемое уведомление о наступающем событии на почту и на сайте.
Повторяющиеся события.
Личные события, просмотр которых другим пользователям можно отключить.
Пользовательские события.

Управление календарями

Для того, чтобы вывести события на сайте, нужно сначала создать календарь. Делается это в админке в меню Приложения->fullCalendar.
Тут же можно указать ряд настроек: цвет текста, цвет события, класс календаря.

Для Google календаря отмечаем соответствующий чекбокс и вводим название календаря, которое нужно получить в кабинете разработчиков Google. Как это сделать описано тут. Не забываем при этом про системную настройку, в которой указываем ключ Google Calendar API Key.

После того как календарь создан, можно вызывать сниппет. В параметре calendars через запятую указываем id календарей, события которых нужно вывести в календаре на сайте

Термины

Чтобы не было путаницы определимся с названиями. Календарь, который выводится на сайте в виде HTML таблицы, будем называть просто календарём. А календарь, который создается в админке, будет календарь-объект.

В календаре можно показывать события как одного календаря-объекта, так и нескольких. Для этого в параметре calendars через запятую нужно указать id необходимых календарей-объектов, как обычных так и гугл календарей. Соответственно, при создании события в диалоге можно выбрать календарь-объект, для которого создаётся данное событие.

Также возможно вообще не указывать календарь-объект при вызове сниппета, а использовать для подгрузки событий плагин, в котором определять свои события, не привязанные к календарю-объекту. Например, в нём можно формировать события из ресурсов. Правда в этом режиме будет не доступно редактирование событий.

На странице сниппет fullCalendar можно вызывать несколько раз. В этом случае каждому такому вызову нужно давать уникальное название, которое указывается в параметре instance. Для одного календаря instance можно не указывать.

Уведомления

Функционал уведомлений состоит из 2 частей: онлайн уведомления и уведомления по почте. За онлайн уведомления отвечает плагин. Поэтому, на какой бы страничке сайта вы не находились, плагин сообщит о наступлении события всплывающим окошком, а также продублирует уведомление на почту по следующей логике:

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

Для управления уведомлениями есть 2 системные настройки:

Онлайн-уведомления — включает/отключает уведомление на сайте.
Уведомления по почте — включает/отключает уведомление по почте.

Такие события имеют css-класс notified-event для дополнительной настройки. В календаре они помечаются иконкой будильника (см. картинку ниже).

Есть еще скрипт для cron'а, который можно запускать по расписанию. Находится он в папке core/components/fullcalendar/cron/notify.php. Сейчас он работает, чтобы оповещать о событиях, которые произойдут в текущий день. Запускать его можно в полночь. Алгоритм можно прописать любой. Думаю, программисту это не составит труда.

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

Создать событие можно 5-ю способами:

кликнуть на ячейке календаря;
выделить диапазон ячеек;
кликнуть на кнопку + в шапке календаря (если выведена);
кликнуть на кнопку создания события, выведенную сниппетом fcCreateEvent.
перетащить HTML элемент события в календарь (если используются внешние события).

Откроется диалог создания события.

В зависимости от текущего вида календаря определяются некоторые поля в диалоге. Например, если текущий вид календаря "Месяц", то в диалоге устанавливается чекбокс "Целый день", а поля со временем дизейблятся. Такое событие будет отображаться в блоке "Весь день" в верхней части календаря, при условии, что этот блок не отключён. Если кликнуть на ячейку в текущем виде "Неделя" или "День", то автоматически определятся даты и время начала и окончания события. За начало берутся данные из ячейки, а окончание определяется согласно параметру defaultDuration, в котором указывается длительность события по-умолчанию. Минимальная длительность события 30 мин.

Также создать событие можно выделив диапазон ячеек. В этом случае даты определятся по границам выделения.

Если у текущего календаря указано несколько календарей-объектов в параметре calendars, то в диалоге можно выбрать, к какому календарю-объекту будет относится создаваемое событие. Если нужно выделить событие другим цветом, то выбрать его можно кликнув на квадрат справа от заголовка. Если цвет не указать, то событие будет окрашено в цвет, указанный у календаря-объекта.

Обязательными полями являются "Заголовок", "Календарь" и дата начала. Остальные поля заполняются по желанию.

Если вы хотите использовать теги HTML в описании события, то нужно создать системную настройку fullcalendar.allowed_tags и в ней указать разрешённые теги в формате функции strip_tags() .

Личные события

Таким событиям добавляется класс private-event.

Уведомление

При необходимости можно включить режим уведомления и указать за сколько нужно это уведомление выполнить. Тут надо отметить, что уведомление сработает, если пользователь находится на сайте вне зависимости от того, на какой странице он находится (при условии, что уведомления включены). Чтобы уведомления работали и для пользователей вне сайта, нужно самостоятельно настроить скрипт для cron, описанный выше.

Повторяющиеся события

Если событие должно повторяться с определённой периодичностью, то нужно отметить соответствующий чекбокс и выбрать нужный период повторения. Доступные варианты — повтор каждый день, каждую неделю, каждый месяц, каждый год. Также можно указать предел, после которого событие повторяться не будет. Отличить повторяющиеся события от обычных можно по значку цикла.

Повторяющиеся события также имеют свой класс repeated-event, который можно менять в своем файле стилей.

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

Удалить событие можно двумя способами. Первый способ - это нажать крестик в верхнем правом углу события. Удаляется оно после подтверждения. Второй способ - нажать кнопку "Удалить" в диалоге редактирования события.

Перетаскиваемые события

Перетаскиваемые (drag-n-drop) события представляют собой HTML блоки, которые можно перетаскивать в календарь. При этом в календаре создаются соответствующие события. Подробное описание можно найти тут.

Список событий

События можно выводить отдельным списком. Выводить события можно или на конкретную дату, или ограничить периодом. За это отвечает отдельный сниппет fcGetEvents. Списков на странице можно выводить сколько угодно. Если редактирование в списке разрешено ( readOnly=`0` ), то события можно изменять и удалять. Сами списки обновляемые. Т.е. если событие добавлено кнопкой "Добавить событие" или в календаре, который находится на этой же странице, то оно появится и в списке. Подробнее можно прочитать в документации.

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

События javascript

fc_event_saved
fc_event_removed
fc_event_click
fc_event_resize
fc_event_receive_error
fc_event_receive_success
fc_event_notify
fc_event_render
fc_event_after_render
fc_calendar_after_render

Событие fc_event_click срабатывает при клике на событие календаря. В обработчике этого яваскрипт события можно переопределить поведение календаря. Например, заменить стандартный диалог редактирования на свой или вообще его отменить.

Событие fc_event_resize срабатывает при ресайзе события. В обработчике можно отменить это действие.

События fc_event_receive_error и fc_event_receive_success относятся к перетаскиваемым событиям. Первое срабатывает в случае ошибки при перетаскивании. Второе — в случае успешного результата. Кстати, добавление можно отменить:

А вот пример, как можно вывести диалог при дропе события на календарь:

Диалог вызывается методом opeDialog() объекта fullCalendar. Причём возвращает он промис (promise). Поэтому у него доступны 2 метода:

done() — регистрирует функцию, которая выполнится в случае успеха. В нём доступен javascript объект события.
fail() — регистрирует функцию, которая будет выполнена в случае ошибки от сервера или при нажатии кнопки "Закрыть" диалога события.

Событие fc_event_notify срабатывает, когда есть уведомление. В обработчике можно изменить полученное уведомление или вообще отменить его вывод.

Событие fc_event_render пригодится, если нужно изменить процесс отображения через jQuery метод css() . В обработчик передаются 3 агрумента - event, element и view. Event — это объект событие календаря. Element — это jQuery объект, который используется для отображения события в календаре. View — это объект текущего вида.

Событие fc_event_after_render срабатывает сразу после того, как событие отображено в календаре. Это событие можно использовать для управления всплывающей подсказкой qTip2. Можно переинициализировать подсказки со своими настройками.

Можно переопределить только определённые свойства подсказки

Событие fc_calendar_after_render срабатывает, когда все события отрендерены. В обработчике доступны агрументы instance и view.

Использовать эти методы не обязательно. Они пригодятся, если нужно выполнить дополнительные действия.

Серверные события MODX

fullCalendar добавляет события для плагинов MODX, благодаря которым открываются большие возможности по управлению событиями календаря:

Читайте также: