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

Метод 1: настройка заголовка
Один из способов отображения 12 месяцев без дат — настройка заголовка календаря. Вы можете изменить заголовок, чтобы отображать только месяц и год, скрывая отдельные дни. Вот пример:

document.addEventListener('DOMContentLoaded', function () {
  var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    headerToolbar: {
      left: 'prev',
      center: 'title',
      right: 'next',
    },
    initialView: 'dayGridMonth',
    titleFormat: { year: 'numeric', month: 'long' },
    dayHeaderFormat: { weekday: 'narrow' },
    events: [
      // Your events here...
    ],
  });
  calendar.render();
});

Метод 2: собственный CSS
Другой подход — использовать пользовательские стили CSS, чтобы скрыть номера дней в календаре. Вы можете выбрать элементы дня и сделать их видимыми скрытыми. Вот пример:

.fc-daygrid-day-number {
  visibility: hidden;
}

Обязательно включите файл CSS в свой HTML-документ.

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

document.addEventListener('DOMContentLoaded', function () {
  var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    // Your other calendar options...
    eventContent: function () {
      return '';
    },
    events: [
      // Your events here...
    ],
  });
  calendar.render();
});