Widżet kalendarza w AJAXie

Zasada działania widżetu kalendarza jest prosta. Ma on za zadanie wyświetlać dni, w których pojawiły się wpisy. Kliknięcie w miesiąc lub dzień spowoduje, że przejdziemy do archiwum informacji z podziałem na rok/miesiąc/dzień. Jeżeli chcemy umożliwić użytkownikowi przechodzenie pomiędzy miesiącami musimy pobawić się w AJAXie. Minusem tego rozwiązania jest to, że nie będziemy mogli z poziomu kalendarza przejść do wpisów z danego miesiąca.

Zatem zaczynamy. W pierwszej kolejność musimy dodać zaczep dla naszej akcji w AJAXie.

function load_calendar() {
    $GLOBALS['monthnum'] = $_POST['month'];
    $GLOBALS['year'] = $_POST['year'];
    get_calendar();
    wp_die();
}

add_action( 'wp_ajax_load_calendar', 'load_calendar' );
add_action( 'wp_ajax_nopriv_load_calendar', 'load_calendar' );

function set_calendar_source() {
	wp_localize_script( 'calendar-data', 'ajax_options', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'set_calendar_source' );

Nasza funkcja będzie pobierała miesiąc i rok. Ustawienie tych zmiennych jako globalne spowoduje, że te dane trafią do funkcji get_calendar(). Druga funkcja przekaże dla naszego skryptu JS adres URL wysyłanego żądania.

Ostatnia rzecz to kod javascript. Będzie odpowiedzialny za przekazywanie danych do naszego zaczepu.

jQuery(document).ready(function($){
    $('.widget_calendar').on('click', '#wp-calendar #prev a, #wp-calendar #next a', function(e){
        e.preventDefault();
        var url = $(this).attr('href').split('/');
        var year = url[3];
        var month = url[4];
        
        var data = {
            'action': 'load_calendar',
            'year': year,
            'month': month
        };
        jQuery.post(ajax_options.ajax_url, data, function(response) {
            $('#calendar_wrap').html(response);
        });
    });
});

Nie jest to najlepsze rozwiązanie jednak i nie najgorsze. Jako że WordPress-owy kalendarz można całkowicie przeprogramować, w następnej części stworzymy kalendarz, który będzie pozwalał na przechodzenie pomiędzy miesiącami/latami bez przeładowywania strony, a dla każdego dnia stworzymy dymki z tytułami wpisów jakie zostały opublikowane.

Piszcie jakie rzeczy mogą przydać się jeszcze w takim kalendarzu.

You may also like...