我正在研究 Adam Shaw (http://arshaw.com/fullcalendar/) 的 FullCalendar 实现。
每个用户都有自己的个人日历,默认通过 JSON 加载:
$('#calendar').fullCalendar({
header: {
left: false,
center: 'title',
right: false
},
editable: false,
events: 'http://WEBSERVER.com/calendar/json/<?=$gid?>'
});
(calendar/json/ 是一个 PHP 文件,它从 MySQL 查询结果生成 JSON)
但是,也有共享日历。可用日历显示为按钮列表,如下所示:
<div class="btn-group" id="cal-lists">
<div class="btn btn-large" id="1">John's Personal Calendar</div>
<div class="btn btn-large add-cal" id="2">Company Calendar</div>
<div class="btn btn-large add-cal" id="3">Confrence Room Calendar</div>
</div>
然后我有以下应该利用 FullCalendar addEventSource 方法的 jQuery。
$("div.add-cal").click(function()
{
var json = 'http://WEBSERVER.com/calendar/json/';
var cal = $(this).attr('id');
var src = json+cal;
$('#calendar').fullCalendar( 'addEventSource', src);
$(this).removeClass('add-cal');
$(this).addClass('rem-cal');
});
$("div.rem-cal").click(function()
{
var json = 'http://WEBSERVER.com/calendar/json/';
var cal = $(this).attr('id');
var src = json+cal;
$('#calendar').fullCalendar( 'removeEventSource', src);
$(this).removeClass('rem-cal');
$(this).addClass('add-cal');
});
所以每当用户点击
<div class="btn btn-large add-cal" id="2">Company Calendar</div>
应该调用 $("div.add-cal").click(function() 来添加资源,然后将 CSS 类从“add-cal”更改为“rem-cal”。
然后,如果再次单击该按钮,则应调用 $("div.rem-cal").click(function() 。情况并非如此。
单击公司日历不断将公司日历事件添加到显示中。
第一次单击时,类会适当地更改为“rem-cal”,但之后不会更改。因此,如果用户单击它三次,则会显示三个事件实例。
我对 jQuery / JavaScript 不是很好,因此非常感谢任何建议。
提前致谢。