Javascript FullCalendar在月份更改时显示重复的事件
我正在使用Javascript向fullcalendar添加事件。我正在使用fullcalendar-2.7.2。单击“自定义”按钮时会添加事件，但更改月份时会显示许多重复事件。 以下是我编写的代码：-Javascript FullCalendar在月份更改时显示重复的事件,javascript,jquery,fullcalendar,visualforce,apex,Javascript,Jquery,Fullcalendar,Visualforce,Apex,我正在使用Javascript向fullcalendar添加事件。我正在使用fullcalendar-2.7.2。单击“自定义”按钮时会添加事件，但更改月份时会显示许多重复事件。 以下是我编写的代码：- <script> $(document).ready(function() { $('#calendar').fullCalendar({ theme: true, eve
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
theme: true,
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#processingDiv').toggle(bool);
},
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: moment().utc().valueOf(),
editable: true,
eventLimit: true, // allow "more" link when too many events
fixedWeekCount: false
});
try {
//This data is showing Okay. This one is the Test Event in image Below on Date 1.
var jsonStart = JSON.parse('{!jsonStringSF}');
var myCalendar = $('#calendar');
for(var i=0; i < jsonStart.length; i++) {
var myEvent = {
id: jsonStart[i].id,
title: jsonStart[i].title,
allDay: jsonStart[i].allDay,
start: jsonStart[i].startDate,
end: jsonStart[i].endDate
};
myCalendar.fullCalendar('removeEvents', myEvent.id );
myCalendar.fullCalendar( 'renderEvent', myEvent, true );
}
} catch(err) {
alert(err.message);
}
});
</script>
<body>
<apex:form >
<apex:actionFunction name="getEventsFromGoogle" action="{!getEventsFromCalendar}" onComplete="showEventsOnCalendar('{!jsonString}');" />
<apex:actionFunction name="syncEventsToGoogle" action="{!startSyncToGoogle}" onComplete="hideProcessingDiv();" />
</apex:form>
<div id="processingDiv" style="display:none;">
<apex:outputPanel styleClass="popupBackground" layout="block"/>
<apex:outputPanel styleClass="custPopup" layout="block">
<img src="/img/loading24.gif" style="vertical-align:middle; horizontal-align:middle"/>
<span>Please wait...</span>
</apex:outputPanel>
</div>
<div id="allButtons">
<button class="ui-button ui-state-default" onClick="syncToGoogle();">Sync Salesforce to Google</button>
<button class="ui-button ui-state-default" onclick="connectToGoogle();">Sync Google to Salesforce</button>
</div>
<div id='calendar'></div>
<script>
function syncToGoogle() {
showProcessingDiv();
syncEventsToGoogle();
}
function connectToGoogle() {
showProcessingDiv();
getEventsFromGoogle();
}
function showEventsOnCalendar(jsonString) {
//jsonString is [{"title":"Assign Task","startDate":"2016-05-07T13:00:00+05:30","sequence":1,"recurrence":["RRULE:FREQ=WEEKLY;BYDAY=SU,SA"],"id":"mhpufelkfo1d7thn2naqm2s2ec","endDate":"2016-05-07T14:00:00+05:30","allDay":false}]
try {
var json = JSON.parse(jsonString); //This is String which has list of events.
var myCalendar = $('#calendar');
var myEvent = '';
for(var i=0; i < 1; i++) { //For testing I have itrated the loop just once.
myEvent = '';
var recurValue = JSON.stringify(json[i].recurrence);
//RRULE:FREQ=WEEKLY;UNTIL=20160520T110000Z;BYDAY=MO,TU,WE,TH,FR,SU,SA
//Recurrence returns this format.
if(recurValue != null && recurValue != 'null') {
var Frequency = recurValue.match("FREQ=(.*?);");
var Until = recurValue.match("UNTIL=(.*?);");
var ByDay = recurValue.match("BYDAY=(.*?)\"]");
if(ByDay[1] == null && ByDay[1] == 'null') {
ByDay[1] = '';
}
var repeatDays = [];
if(ByDay[1].indexOf('MO') > -1) {
repeatDays.push(1);
}
if(ByDay[1].indexOf('TU') > -1) {
repeatDays.push(2);
}
if(ByDay[1].indexOf('WE') > -1) {
repeatDays.push(3);
}
if(ByDay[1].indexOf('TH') > -1) {
repeatDays.push(4);
}
if(ByDay[1].indexOf('FR') > -1) {
repeatDays.push(5);
}
if(ByDay[1].indexOf('SA') > -1) {
repeatDays.push(6);
}
if(ByDay[1].indexOf('SU') > -1) {
repeatDays.push(0);
}
myEvent = {
id: json[i].id,
title: json[i].title,
allDay: json[i].allDay,
start: json[i].startDate,
end: json[i].endDate,
dow: repeatDays
};
} else {
myEvent = {
id: json[i].id,
title: json[i].title,
allDay: json[i].allDay,
start: json[i].startDate,
end: json[i].endDate
};
}
$('.fc-event').remove(); //Tried this is solve the problem but failed.
//myCalendar.fullCalendar('removeEvents', myEvent.id ); //also tried this but still no luck.
myCalendar.fullCalendar( 'renderEvent', myEvent, true );
}
hideProcessingDiv();
} catch(err) {
hideProcessingDiv();
alert(err.message);
}
}
$（文档）.ready（函数（）{
$（“#日历”）.fullCalendar（{
主题：真的，
事件单击：函数（事件）{
//在弹出窗口中打开事件
打开（event.url，'gcalevent'，'width=700，height=600'）；
返回false；
},
加载：函数（bool）{
$（'#processingDiv'）。切换（bool）；
},
是的，
selectHelper:对，
选择：功能（开始、结束）{
var title=prompt（'事件标题：'）；
var事件数据；
如果（标题）{
事件数据={
标题:标题,，
开始：开始，
完:完
};
$（“#calendar”）.fullCalendar（'renderEvent'，eventData，true）；//stick？=true
}
$（“#日历”）.fullCalendar（'unselect'）；
},
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，基本周，基本日”
},
defaultDate:moment（）.utc（）.valueOf（），
是的，
eventLimit:true，//当事件太多时允许“更多”链接
fixedWeekCount:false
});
试一试{
//此数据显示正常。这是下图中日期1的测试事件。
var jsonStart=JSON.parse（'{！jsonStringSF}'）；
var myCalendar=$（“#calendar”）；
对于（var i=0；i
以下是单击下个月或返回时问题的屏幕截图：-
有人能给我建议停止重复的解决方案吗？mm。。似乎很复杂，：（您可能会在每次更改月份时调用此函数。您可以共享其余代码吗？最好添加一个JSFIDDLE此函数位于日历上方的一个按钮上。它不是日历的一部分。因此，此函数不可能被多次调用。我想是日历的“renderEvent”导致了问题。您应该e没有显示足够的代码来了解发生了什么。这看起来也没有必要，因为fullcalendar提供了一个方法。另外，请看一下，它们可能会有助于解决问题。感谢各位的回复。现在我已经更新了我的全部代码。请帮我解决。mm..似乎很复杂，：（您可能会在每次更改月份时调用此函数。您可以共享其余代码吗？最好添加一个JSFIDDLE此函数位于日历上方的一个按钮上。它不是日历的一部分。因此，此函数不可能被多次调用。我想是日历的“renderEvent”导致了问题。您应该e没有显示足够的代码来了解发生了什么。这看起来也没有必要，因为fullcalendar提供了一个方法。另外，请看一下，它们可能会有助于解决问题。感谢各位的回复。现在我已经更新了我的全部代码。请帮助我解决问题。