在jQuery中创建对象

Question

我在下面的链接中找到了一个不错的活动日历： 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>

请帮帮我。如何在没有覆盖其他事件日历的行为的情况下实现多个事件日历？ 感谢。