我在下面的链接中找到了一个不错的活动日历: https://github.com/KyleLeneau/jMonthCalendar/blob/master/doc/Demo.html
这很好用。但是当我想在同一页面上创建多个事件日历时出现问题。我认为对于每个事件日历,我们都需要创建它的新实例。但我没有得到如何实现它?它总是覆盖最后一个创建的事件日历的第一个行为。
HTML:
<center>
<div id="jMonthCalendar" style="width: 250px; height: 250px;">
</div>
<div id="jMonthCalendar-detail" style="width: 250px; height: 250px; margin-top: 75px;">
</div>
<button id="Button">
Add More Events</button>
<button id="ChangeMonth">
Change Months May 2009</button>
</center>
脚本:
$().ready(function () {
var options = {
containerId: "#jMonthCalendar",
onMonthChanging: function (dateIn) {
//this could be an Ajax call to the backend to get this months events
//var events = [ { "EventID": 7, "StartDate": new Date(2009, 1, 1), "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description", "CssClass": "Birthday" },
// { "EventID": 8, "StartDate": new Date(2009, 1, 2), "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" }
//];
//$.jMonthCalendar.ReplaceEventCollection(events);
},
onEventLinkClick: function (event) {
alert("event link click");
return true;
},
onEventBlockClick: function (event) {
alert("block clicked");
return true;
},
onEventBlockOver: function (event) {
//alert(event.Title + " - " + event.Description);
return true;
},
onEventBlockOut: function (event) {
return true;
},
onDayLinkClick: function (event) {
alert(event.data.Date.toLocaleDateString());
},
onDayCellDblClick: function (event) {
alert(event.data.Date.toLocaleDateString());
}
};
var events = [{ "EventID": 1, "StartDateTime": "new Date(2009, 6, 29)", "EndDateTime": "new Date(2009, 5, 3)", "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description" },
{ "EventID": 6, "StartDateTime": "new Date(2009, 6, 29)", "EndDateTime": "new Date(2009, 5, 3)", "Title": "10:00 pm - EventTitle6", "URL": "#", "Description": "This is a sample event description" },
{ "EventID": 7, "StartDateTime": new Date(2009, 6, 12), "Title": "10:00 pm - EventTitle7", "URL": "#", "Description": "This is a sample event description" },
{ "EventID": 3, "StartDateTime": "2009-07-28T12:30:00.0000000", "Title": "This is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" },
{ "EventID": 4, "StartDateTime": new Date(2009, 6, 13), "Title": "This is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" },
{ "EventID": 5, "StartDateTime": "2009-06-03", "EndDateTime": "2009-06-14", "Title": "This is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" }
];
$.jMonthCalendar.Initialize(options, events);
var extraEvents = [{ "EventID": 5, "StartDateTime": new Date(2009, 3, 11), "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description", "CssClass": "Birthday" },
{ "EventID": 6, "StartDateTime": new Date(2009, 3, 20), "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" }
];
$("#Button").click(function () {
$.jMonthCalendar.AddEvents(extraEvents);
});
$("#ChangeMonth").click(function () {
$.jMonthCalendar.ChangeMonth(new Date(2008, 4, 7));
});
var options_new = {
containerId: "#jMonthCalendar-detail",
onMonthChanging: function (dateIn) {
//this could be an Ajax call to the backend to get this months events
//var events = [ { "EventID": 7, "StartDate": new Date(2009, 1, 1), "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description", "CssClass": "Birthday" },
// { "EventID": 8, "StartDate": new Date(2009, 1, 2), "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" }
//];
//$.jMonthCalendar.ReplaceEventCollection(events);
},
onEventLinkClick: function (event) {
alert("event link click");
return true;
},
onEventBlockClick: function (event) {
alert("block clicked");
return true;
},
onEventBlockOver: function (event) {
//alert(event.Title + " - " + event.Description);
return true;
},
onEventBlockOut: function (event) {
return true;
},
onDayLinkClick: function (event) {
alert(event.data.Date.toLocaleDateString());
},
onDayCellDblClick: function (event) {
alert(event.data.Date.toLocaleDateString());
}
};
$.jMonthCalendar.Initialize(options_new, events);
});
</script>
请帮帮我。如何在没有覆盖其他事件日历的行为的情况下实现多个事件日历? 感谢。