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

1. Инициализация и базовая настройка:
   Чтобы начать использовать FullCalendar, вам необходимо включить в свой проект необходимые файлы CSS и JavaScript. Вот пример:

<link rel="stylesheet" href="fullcalendar.min.css">
<script src="fullcalendar.min.js"></script>

Чтобы создать базовый календарь, вы можете инициализировать FullCalendar с минимальной настройкой:

document.addEventListener('DOMContentLoaded', function() {
   var calendarEl = document.getElementById('calendar');
   var calendar = new FullCalendar.Calendar(calendarEl, {
      // Configuration options
   });
   calendar.render();
});

2. Отображение событий.
   FullCalendar предоставляет несколько методов для отображения событий в календаре. Вы можете использовать метод addEventдля динамического добавления событий:

var event = {
   title: 'Meeting',
   start: '2024-02-20T10:00:00',
   end: '2024-02-20T12:00:00'
};
calendar.addEvent(event);

3. Источники событий.
   Вы можете получать события из различных источников, таких как каналы JSON, Календарь Google или собственный API. Вот пример использования канала JSON в качестве источника событий:

var calendar = new FullCalendar.Calendar(calendarEl, {
   events: 'events.json'
});

4. Обработка кликов по событиям.
   FullCalendar позволяет обрабатывать события кликов по событиям с помощью обратного вызова eventClick. Вот пример:

var calendar = new FullCalendar.Calendar(calendarEl, {
   eventClick: function(info) {
      alert('Event clicked: ' + info.event.title);
   }
});

5. Перетаскивание и изменение размера событий.
   FullCalendar поддерживает перетаскивание и изменение размера событий для интерактивного управления событиями. Вы можете включить эти функции с помощью параметра editable:

var calendar = new FullCalendar.Calendar(calendarEl, {
   editable: true
});

6. Навигация по дате.
   FullCalendar предоставляет встроенные элементы управления навигацией для переключения между различными представлениями и датами. Для навигации по календарю можно использовать методы prev, nextи today:

calendar.prev(); // Go to the previous view
calendar.next(); // Go to the next view
calendar.today(); // Go to today's date

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