Как создать динамический календарь событий в WordPress с поддержкой AJAX

Главная > Как создать динамический календарь событий в WordPress с поддержкой AJAX

Если вам нужно на сайте WordPress реализовать удобный и современный календарь событий, который позволяет пользователям просматривать мероприятия по месяцам без перезагрузки страницы, то этот материал для вас. Мы подробно разберем, как создать динамический календарь с поддержкой AJAX, чтобы повысить удобство использования и производительность.

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

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

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

Выбор плагинов для управления событиями и их интеграция

Для хранения событий оптимально использовать кастомный тип записи (custom post type) — hueman_event. Для удобства управления можно использовать плагин Custom Post Type UI или зарегистрировать тип записи через код.

Пример регистрации типа записи через код:

function hueman_register_event_post_type() {
  $labels = array(
    'name' => 'События',
    'singular_name' => 'Событие',
    'add_new' => 'Добавить событие',
    'add_new_item' => 'Добавить новое событие',
    'edit_item' => 'Редактировать событие',
    'new_item' => 'Новое событие',
    'view_item' => 'Просмотреть событие',
    'search_items' => 'Поиск событий',
    'not_found' =>  'События не найдены',
    'not_found_in_trash' => 'В корзине событий не найдено',
  );
  $args = array(
    'labels' => $labels,
    'public' => true,
    'has_archive' => true,
    'supports' => array('title', 'editor', 'custom-fields'),
    'menu_icon' => 'dashicons-calendar-alt',
  );
  register_post_type('hueman_event', $args);
}
add_action('init', 'hueman_register_event_post_type');

Для хранения даты события рекомендуем использовать метаполе, например, с ключом hueman_event_date. Для удобства можно пользоваться плагином Advanced Custom Fields (ACF) или создавать метаполе вручную.

Создание шорткода для вывода календаря с AJAX

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

Сначала регистрируем шорткод и подключаем скрипты:

function hueman_enqueue_event_calendar_scripts() {
  wp_enqueue_script('hueman-event-calendar', get_template_directory_uri() . '/js/hueman-event-calendar.js', array('jquery'), '1.0', true);
  wp_localize_script('hueman-event-calendar', 'huemanEventCalendar', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('hueman_event_calendar_nonce')
  ));
}
add_action('wp_enqueue_scripts', 'hueman_enqueue_event_calendar_scripts');

function hueman_event_calendar_shortcode() {
  ob_start();
  ?>
  <div id="hueman-event-calendar">
    <div class="calendar-navigation">
      <button id="hueman-prev-month">« Предыдущий</button>
      <span id="hueman-current-month"></span>
      <button id="hueman-next-month">Следующий »</button>
    </div>
    <div id="hueman-calendar-content">Загрузка...</div>
  </div>
  <?php
  return ob_get_clean();
}
add_shortcode('hueman_event_calendar', 'hueman_event_calendar_shortcode');

JavaScript для обработки навигации и запроса AJAX

Создаем файл hueman-event-calendar.js в папке темы /js/ с таким содержимым:

jQuery(document).ready(function($) {
  var currentDate = new Date();

  function hueman_load_events(year, month) {
    $('#hueman-calendar-content').html('Загрузка...');
    $('#hueman-current-month').text(year + '-' + (month + 1));
    $.ajax({
      url: huemanEventCalendar.ajax_url,
      method: 'POST',
      data: {
        action: 'hueman_load_events',
        year: year,
        month: month + 1,
        nonce: huemanEventCalendar.nonce
      },
      success: function(response) {
        if(response.success) {
          $('#hueman-calendar-content').html(response.data.html);
        } else {
          $('#hueman-calendar-content').html('Ошибка загрузки событий');
        }
      },
      error: function() {
        $('#hueman-calendar-content').html('Ошибка AJAX запроса');
      }
    });
  }

  $('#hueman-prev-month').on('click', function() {
    currentDate.setMonth(currentDate.getMonth() - 1);
    hueman_load_events(currentDate.getFullYear(), currentDate.getMonth());
  });

  $('#hueman-next-month').on('click', function() {
    currentDate.setMonth(currentDate.getMonth() + 1);
    hueman_load_events(currentDate.getFullYear(), currentDate.getMonth());
  });

  hueman_load_events(currentDate.getFullYear(), currentDate.getMonth());
});

Обработка AJAX-запроса на сервере

Чтобы возвращать события за указанный месяц, регистрируем обработчик AJAX в functions.php:

function hueman_ajax_load_events() {
  check_ajax_referer('hueman_event_calendar_nonce', 'nonce');

  $year = intval($_POST['year']);
  $month = intval($_POST['month']);

  // Получаем первый и последний день месяца
  $start_date = date('Y-m-d', strtotime("$year-$month-01"));
  $end_date = date('Y-m-t', strtotime($start_date));

  $args = array(
    'post_type' => 'hueman_event',
    'posts_per_page' => -1,
    'meta_query' => array(
      array(
        'key' => 'hueman_event_date',
        'value' => array($start_date, $end_date),
        'compare' => 'BETWEEN',
        'type' => 'DATE',
      ),
    ),
    'orderby' => 'meta_value',
    'meta_key' => 'hueman_event_date',
    'order' => 'ASC',
  );
  $query = new WP_Query($args);

  if(!$query->have_posts()) {
    wp_send_json_success(array('html' => '<p>Событий не найдено на этот месяц.</p>'));
  }

  $html = '<ul class="hueman-event-list">';
  while($query->have_posts()) {
    $query->the_post();
    $event_date = get_post_meta(get_the_ID(), 'hueman_event_date', true);
    $html .= '<li><strong>' . esc_html($event_date) . ':</strong> ' . get_the_title() . '</li>';
  }
  wp_reset_postdata();
  $html .= '</ul>';

  wp_send_json_success(array('html' => $html));
}
add_action('wp_ajax_hueman_load_events', 'hueman_ajax_load_events');
add_action('wp_ajax_nopriv_hueman_load_events', 'hueman_ajax_load_events');

Итог

Создание динамического календаря событий с поддержкой AJAX в WordPress — несложная задача, если структурировать данные через кастомный тип записи и метаполя, а также грамотно реализовать обработку AJAX-запросов. Такой подход улучшит UX и позволит масштабировать функционал под любые нужды.