我正试图在这样的一个接口中一起实现日期选择器和fulcallendarhttp://edifyzone.net/docs/cal.png。
当我在日期选择器插件中单击某个日期时，我想显示该选定日期的fulcallendar视图。
当我点击日期时，我想设置date全局变量，这样我就可以在eventResources部分下的fulcallendar代码中使用它作为我的 selectedDate由于某些原因，日期
但如果我点击一个单元格，它会显示更新的(正确的)值。(请参阅fulcalendar中的选择回调函数。我正在提醒日期变量)
我该怎么解决这个问题？有人能帮我吗？我的要求是将Date值发布到json事件文件中。非常感谢。
<script>
$(function() {
window.theDate = new Date();//Get todays date and initialize
//I tried var theDate = new Date(); but didn't work
//datepicker
var datepicker = $("#datepicker").datepicker({
dateFormat: 'yy-m-d',
inline: true,
numberOfMonths: [2, 1],
showButtonPanel: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate'),
day = date.getDate(),
month = date.getMonth(),
year = date.getFullYear();
window.theDate = dateText;// Set the theDate value onDate select
selected.val(dateText);
//set the calendar
calendar.fullCalendar('gotoDate', year, month, day);
}
});//end datepicker
//Fullcalendar
var calendar = $('#calendar').fullCalendar({
header: {left: '',center: 'title',right: ''},
select: function(start, end, allDay, event, resourceId) {
alert(theDate); // this alert shows the correct updated date
},
resources: 'calendar/json-staff',
eventSources: [
{
url: 'calendar/json-events',
type: 'POST',
data: {
//This theDate value is not being updated
selectedDate: theDate // get the global theDate value
},
success: function($data) {
console.log($data.responseText);
//alert($data);
},
error: function($data) {
console.log($data);
alert('Error: check the console! ' + $data.responseText);
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}
]
//events: 'calendar/json-events'
});
});//end of jquery
</script>
<html>
<table border="0" width="100%">
<tr>
<td width="10%" valign="top">
<div id="datepicker"></div>
</td>
<td valign="top"><div id='calendar'></div></td>
</tr>
</table>
</html>
我像这样解决了这个问题，
我把完整的Callender脚本放在DatePicker的onSelect函数中
....
onSelect: function(dateText, inst) {
//var d = new Date(dateText); // This line only worked for chrome ???
var d = $(this).datepicker('getDate');
//Fullcalendar
$('#calendar').empty(); //clear the initial view
calendar = $('#calendar').fullCalendar({
//Full calendar suff here
}); //Fullcalendar ends
/*-------------------- Set the selected date ---------------------*/
calendar.fullCalendar('gotoDate', d.getFullYear(), d.getMonth(), d.getDate());
}//on select ends
.....