Usare FullCalendar in Wordpress

In questo articolo vedremo come creare una pagina custom in Wordpress in cui useremo FullCalendar.

I dati li prenderemo con una query custom.

Tutte le operazioni su files verranno fatte dentro al tema child, senza che ve lo specifico ogni volta.

Per prima cosa ho creato un template page-templates/calendario.php:

<?php
/**
 * Template Name: Calendario
 */
 
defined('ABSPATH') || exit;

get_header();
?>

<div id="calendar" style="max-width: 900px; margin: 40px auto;"></div>

<?php 
get_footer();

Poi create la vostra pagina e assegnategli quel template.

Poi creiamo un file js/calendar-init.js:

document.addEventListener('DOMContentLoaded', function () {
    const calendarEl = document.getElementById('calendar');

    const calendar = new FullCalendar.Calendar(calendarEl, {
		locale: 'it',
        initialView: 'dayGridMonth',
		firstDay: 1,
        events: {
            url: ajaxurl, // WordPress variabile globale
            method: 'POST',
            extraParams: {
                action: 'get_tour_events'
            },
            failure: function () {
                alert('Errore nel caricamento degli eventi!');
            }
        },
        eventClick: function(info) {
            location.href = info.event.url;
            info.jsEvent.preventDefault();
        }
    });

    calendar.render();
});

Questo è l'init del calendario.

La parte più importante è dentro al functions.php:

function enqueue_fullcalendar_assets() {
    if (is_page_template('page-templates/calendario.php')) {
        wp_enqueue_style(
            'fullcalendar-css',
            'https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.css'
        );

        wp_enqueue_script(
            'fullcalendar-js',
            'https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js',
            array(), null, true
        );
		
		wp_enqueue_script(
			'fullcalendar-it',
    		'https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/locales/it.global.min.js',
    		array('fullcalendar-js'),
    		null,
    		true
		);

        wp_enqueue_script(
            'custom-calendar-init',
            get_stylesheet_directory_uri() . '/js/calendar-init.js',
            array('fullcalendar-js'), null, true
        );

		wp_localize_script('custom-calendar-init', 'ajaxurl', admin_url('admin-ajax.php'));
    }
}

add_action('wp_enqueue_scripts', 'enqueue_fullcalendar_assets');

add_action('wp_ajax_get_tour_events', 'get_tour_events');
add_action('wp_ajax_nopriv_get_tour_events', 'get_tour_events');

function get_tour_events() {
    global $wpdb;

    $results = $wpdb->get_results("
        SELECT 
            p.ID,
            p.post_title,
            pm_date.meta_value AS start,
            pm_days.meta_value AS days,
            DATE_ADD(pm_date.meta_value, INTERVAL pm_days.meta_value DAY) AS end
        FROM {$wpdb->prefix}posts p
        LEFT JOIN {$wpdb->prefix}postmeta pm_date 
            ON p.ID = pm_date.post_id AND pm_date.meta_key = 'tourmaster-tour-date'
        LEFT JOIN {$wpdb->prefix}postmeta pm_days 
            ON p.ID = pm_days.post_id AND pm_days.meta_key = 'tourmaster-tour-duration'
        WHERE p.post_status = 'publish'
          AND p.post_type = 'tour'
          AND pm_date.meta_value IS NOT NULL
          AND pm_days.meta_value IS NOT NULL
    ");

    $events = [];

    foreach ($results as $row) {
        $events[] = [
            'id'    => $row->ID,
            'title' => $row->post_title,
            'start' => $row->start,
            'end'   => $row->end,
            'url'   => get_permalink($row->ID)
        ];
    }

    wp_send_json($events);
}

Qui in pratica facciamo un sacco di roba:

• includiamo tutto solo nel template creato sopra
• includiamo il CSS da CDN
• includiamo la libreria da CDN
• includiamo anche la localizzazione in italiano
• includiamo il nostro file js
• sotto eseguiamo una query custom per i dati, che verrà richiamata dal nostro js tramite AJAX

Enjoy!