2

イベントをjQuery UI Datepickerに関連付けるためのガイドとして、この質問を使用してきました。

現在の月の日付とイベントが強調表示されていますが、これは正常に機能します。私の質問は、さらなる ajax 呼び出し (以下のコードの onChangeMonthYear を参照) に基づいて、新しいイベント (SpektrixApp.events に保存されているカレンダー上の新しいソーシャル イベントのセット) でカレンダーを更新する方法です。

SpektrixApp = {};

(function($) {

    $.post(
        // see tip #1 for how we declare global javascript variables
        SpektrixAjax.ajaxurl,
        {
            // here we declare the parameters to send along with the request
            // this means the following action hooks will be fired:
            // wp_ajax_nopriv_spektrix_get_events and wp_ajax_spektrix_get_events
            action : 'spektrix_get_events',

            // other parameters can be added along with "action"
            monthId : 9
        },
        function( response ) {
            SpektrixApp.events = response;
            //console.log(events[1]);
            $("#spektrix-event-calendar" ).datepicker({

                beforeShowDay: function(date) {

                    var result = [true, '', null];
                    var matching = $.grep(SpektrixApp.events, function(event) {
                        //console.log(new Date(event.Date).valueOf() );
                        dateToHighlight = new Date(event.Date).valueOf();
                        return dateToHighlight === date.valueOf();
                    });

                    if (matching.length) {
                        result = [true, 'highlight', null];
                    }

                    return result;
                },

                onSelect: function(dateText) {

                    $('#spektrix-dialog').empty(); //empty the target div
                    var date,
                        selectedDate = new Date(dateText),
                        i = 0,
                        event = null;
                        daysEvents = [];

                    /* Determine if the user clicked an event: */
                    while (i < events.length && !event) {
                        //console.log(events[i].Date);
                        date = new Date(SpektrixApp.events[i].Date);

                        if (selectedDate.valueOf() === date.valueOf()) {
                            event = SpektrixApp.events[i];
                            daysEvents.push(event);
                        }
                        i++;
                    }
                    if (daysEvents) {
                       for(i = 0; i < daysEvents.length; i++) {
                        /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
                        var day = new Date(event.Date).getDate().toString();
                        $('#spektrix-dialog').append('<div><a href="/whats-on/'+slugify(event.Title)+'">'+event.Title+'</a></div>');

                    }

                    }
                },

                onChangeMonthYear: function(year, month,instance) {
                    jQuery.post(
                        // see tip #1 for how we declare global javascript variables
                        SpektrixAjax.ajaxurl,
                        {
                            // here we declare the parameters to send along with the request
                            // this means the following action hooks will be fired:
                            // wp_ajax_nopriv_spektrix_get_events and wp_ajax_spektrix_get_events
                            action : 'spektrix_get_events',

                            // other parameters can be added along with "action"
                            monthId : month
                        },
                        function( response ) {
                            SpektrixApp.events = response;
                            $("#spektrix-event-calendar" ).datepicker("refresh");

                        }
                    );
                }

            });

            //console.log(events);
        }
    );



})(jQuery);

function slugify(input)
{
    return input.replace(/\s+/g, '-').toLowerCase();
}
4

2 に答える 2

0

コードで意図したとおりに機能しないものは何ですか?

.datepicker("refresh")メソッドは機能するはずです。これは、更新が遅れた簡単な例です

var highlight = 3;
$('#date').datepicker({
    beforeShowDay: function(date){
        // highlight days matching the "highlight" weekday :
        var res = [true, "", ""];

        if (date.getDay() == highlight) {
            res = [true, "ui-state-hover", "tip"];
        }

        return res;
    },
    onChangeMonthYear: function(){
        // delayed update : change the "highlight" weekday and trigger refresh
        setTimeout(function(){
            highlight += 1;
            highlight = highlight % 7;
            $('#date').datepicker('refresh');
        }, 1000);
    }
});

フィドル

于 2013-10-01T10:43:12.147 に答える
0

onChangeMonthYear イベント ハンドラで ajax リクエストを使用しているため、コードが機能しません。onChangeMonthYear で SpektrixApp.events が変更される前に beforeShowDay が呼び出されます。問題を解決するには、jQuery.post を jQuery.ajax に変更し、オプションを追加します。

async : false

onChangeMonthYear イベント ハンドラーの ajax リクエスト宣言に追加します。

この例を参照してくださいjsFiddle

于 2013-09-26T18:45:37.387 に答える