完整的日历事件渲染

Question

<apex:Stylesheet value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/fullcalendar.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/lib/jquery.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/lib/jquery-ui.custom.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/lib/moment.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/fullcalendar.min.js')}"/>    
<apex:includeScript value="{!URLFOR($Resource.BootStrap, 'js/bootstrap.min.js')}" />

<script>
    function filterFunc()
    {
        alert('Entered Javascript') ;
        CallApexMethod() ;
        //What should i do here ??            
    }    
</script>

<script>
    //We need to wrap everything in a doc.ready function so that the code fires after the DOM is loaded
    $(document).ready(function() {   
        //Call the fullCallendar method. You can replace the '#calendar' with the ID of the dom element where you want the calendar to go. 
        $('#calendar').fullCalendar({
            header: {

                left: 'prev,next today',

                center: 'title',

                right: 'month,agendaDay'

            },

            editable: false,

            events:

            [
                //At run time, this APEX Repeat will reneder the array elements for the events array

                <apex:repeat value="{!events}" id="repeatId" var="e">

                    {

                        title: "{!e.title}",

                        start: '{!e.startString}',

                        end: '{!e.endString}',

                        url: '{!e.url}',

                        allDay: {!e.allDay},

                        className: '{!e.className}'

                    },

                </apex:repeat>
            ]

        });
    });
</script>

<!--some styling. Modify this to fit your needs-->
<style>

    #cal-options {float:left;}

    #cal-legend { float:right;}

    #cal-legend ul {margin:0;padding:0;list-style:none;}

    #cal-legend ul li {margin:0;padding:5px;float:left;}

    #cal-legend ul li span {display:block; height:16px; width:16px; margin-right:4px; float:left; border-radius:4px;}

    #calendar {margin-top:20px;}

    #calendar a:hover {color:#fff !important;}

    .fc-event-inner {padding:3px;}

    .event-booked {background:#56458c;border-color:#56458c;}

    .event-cancelled {background:#cc9933;border-color:#cc9933;}

    .event-personal {background:#1797c0;border-color:#1797c0;}

</style>

<apex:sectionHeader title="Availability"/>

<apex:outputPanel id="calPanel">

    <apex:form id="formId">
        <apex:input value="{!events}" id="eventList" rendered="false"/>
        <apex:actionFunction name="CallApexMethod" action="{!filterSelection}" onComplete="alert('After apex method') ;" reRender="eventList"/>
        <div class="row">
            <div class="col-md-3">
                <label>Center</label>
                <apex:actionRegion >
                <apex:selectList id="center" label="Center" styleClass="form-control" size="1"  multiselect="false"  value="{!selectedCenter}" onchange="filterFunc();">
                    <!--<apex:actionSupport event="onchange" reRender="scriptpanel"/>-->
                    <apex:selectoptions value="{!centersList}"></apex:selectoptions>
                </apex:selectList> 
                </apex:actionRegion>
            </div>

            <div class="col-md-3">
                 <label>Course</label>
                 <apex:selectList id="course" label="Course" styleClass="form-control" size="1"  multiselect="false"  value="{!selectedCourse}">
                    <apex:selectoptions value="{!coursesList}"></apex:selectoptions>
                </apex:selectList> 
            </div>
            <div class="col-md-3">
                <label>Consultant</label>
                <apex:selectList id="consultant" label="Consultant" styleClass="form-control" size="1"  multiselect="false"  value="{!selectedConsultant}">
                    <apex:selectoptions value="{!consultantsList}"></apex:selectoptions>
                </apex:selectList>
            </div>
        </div>

        <div id="cal-legend">

            <ul>

                <li><span class="event-booked"></span>Booked</li>

                <li><span class="event-cancelled"></span>Cancelled</li>

                <li style="{!IF(includeMyEvents,'','display:none')}"><span class="event-personal"></span>Open</li>

            </ul>

            <div style="clear:both;"><!--fix floats--></div>

        </div>

        <div style="clear:both;"><!--fix floats--></div>

        <div id="calendar"></div>

    </apex:form>

</apex:outputPanel>

I'm new to JS and JQuery... But familiar with salesforce concepts. Have used full calendar plugin for one of my requirements. It fetches all events at first time load of page because of doc.ready function. In this function, i'm having ape:repeat which iterates among events which are fetched from "pageLoad" method which is included in apex:page (first line) under action attribute. It works till here correctly.

I have three drop -downs. For which, I have used Apex:selectlist. Upon selection of each drop down, I have to fetch new set of events from controller method and display it on calendar. This is not happening. SOmetimes I might also need to have the combination of selection of these three drop downs and get events and display. Can someone tell me how to do it? It seems i have to include some code in filterfunc. Saw full calendar documention, I'm not understanding how to use those methods.

Answer 1

<apex:Stylesheet value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/fullcalendar.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/lib/jquery.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/lib/jquery-ui.custom.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/lib/moment.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/fullcalendar.min.js')}"/>    
<apex:includeScript value="{!URLFOR($Resource.BootStrap, 'js/bootstrap.min.js')}" />

<apex:outputPanel id="jsFilter">
   <script>
      var newSource = new Array();
      newSource = [
         <apex:repeat value="{!events}" var="cal">
         {
            title: "{!cal.title}",
            start: '{!cal.startString}',
            end: '{!cal.endString}',
            url: '{!cal.url}',
            allDay: {!cal.allDay},
            className: '{!cal.className}'
         },
         </apex:repeat>
      ];
      $('#calendar').fullCalendar('removeEvents');
      $('#calendar').fullCalendar('addEventSource', newSource);
   </script>
</apex:outputPanel>   


<script>
    //We need to wrap everything in a doc.ready function so that the code fires after the DOM is loaded
    $(document).ready(function() {   
        //Call the fullCallendar method. You can replace the '#calendar' with the ID of the dom element where you want the calendar to go. 
        $('#calendar').fullCalendar({
            header: {

                left: 'prev,next today',

                center: 'title',

                right: 'month,agendaDay'

            },

            editable: false,

            events:

            [
                //At run time, this APEX Repeat will reneder the array elements for the events array

                <apex:repeat value="{!events}" id="repeatId" var="e">

                    {

                        title: "{!e.title}",

                        start: '{!e.startString}',

                        end: '{!e.endString}',

                        url: '{!e.url}',

                        allDay: {!e.allDay},

                        className: '{!e.className}'

                    },

                </apex:repeat>
            ]

        });
    });
</script>

<!--some styling. Modify this to fit your needs-->
<style>

    #cal-options {float:left;}

    #cal-legend { float:right;}

    #cal-legend ul {margin:0;padding:0;list-style:none;}

    #cal-legend ul li {margin:0;padding:5px;float:left;}

    #cal-legend ul li span {display:block; height:16px; width:16px; margin-right:4px; float:left; border-radius:4px;}

    #calendar {margin-top:20px;}

    #calendar a:hover {color:#fff !important;}

    .fc-event-inner {padding:3px;}

    .event-booked {background:#56458c;border-color:#56458c;}

    .event-cancelled {background:#cc9933;border-color:#cc9933;}

    .event-personal {background:#1797c0;border-color:#1797c0;}

</style>

<apex:sectionHeader title="Availability"/>

<apex:outputPanel id="calPanel">

    <apex:form id="formId">
        <!--<apex:input value="{!events}" id="eventList" rendered="false"/>-->
        <!--<apex:actionFunction name="CallApexMethod" action="{!filterSelection}" onComplete="alert('After apex method') ;" />-->
        <div class="row">
            <div class="col-md-3">
                <label>Center</label>
                <!--<apex:actionRegion >-->
                <apex:selectList id="center" label="Center" styleClass="form-control" size="1"  multiselect="false"  value="{!selectedCenter}">
                    <apex:actionSupport event="onchange" reRender="jsFilter" action="{!filterSelection}"/>
                    <apex:selectoptions value="{!centersList}"></apex:selectoptions>
                </apex:selectList> 
                <!--</apex:actionRegion>-->
            </div>

            <div class="col-md-3">
                 <label>Course</label>
                 <apex:selectList id="course" label="Course" styleClass="form-control" size="1"  multiselect="false"  value="{!selectedCourse}">
                    <apex:selectoptions value="{!coursesList}"></apex:selectoptions>
                </apex:selectList> 
            </div>
            <div class="col-md-3">
                <label>Consultant</label>
                <apex:selectList id="consultant" label="Consultant" styleClass="form-control" size="1"  multiselect="false"  value="{!selectedConsultant}">
                    <apex:selectoptions value="{!consultantsList}"></apex:selectoptions>
                </apex:selectList>
            </div>
        </div>

        <div id="cal-legend">

            <ul>

                <li><span class="event-booked"></span>Booked</li>

                <li><span class="event-cancelled"></span>Cancelled</li>

                <li style="{!IF(includeMyEvents,'','display:none')}"><span class="event-personal"></span>Open</li>

            </ul>

            <div style="clear:both;"><!--fix floats--></div>

        </div>

        <div style="clear:both;"><!--fix floats--></div>

        <div id="calendar"></div>

    </apex:form>

</apex:outputPanel>

I included script under outputpanel "jsfilter" and reRender the panel on change of the selectList value (drop down value) with help of action support which also runs the method in controller to get new events. Posting the solution here so that it will be helpful for others.