我一直使用这个问题作为将事件与 jQuery UI Datepicker 关联的指南。
我突出显示了当月的日期和事件,效果很好。我的问题是如何根据进一步的 ajax 调用使用新事件(日历上存储在 SpektrixApp.events 中的一组新社交事件)刷新日历(参见下面代码中的 onChangeMonthYear)
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();
}