Question

我正在使用Javascript向fullcalendar添加事件。我使用的是fullcalendar-2.7.2。单击自定义按钮时会添加事件，但是当我更改月份时，会显示许多重复事件。这是我写的代码： -

<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);
}
}

这是它开始时的样子： -

以下是点击下个月或回来时的问题截图： -

有人能建议我停止重复的解决方案吗？

FullCalendar显示月份更改时的重复事件

0 个答案: