完整日历事件呈现

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>

我是JS和JQuery的新手。。。但熟悉salesforce的概念。我使用了完整的日历插件来满足我的一个需求。由于doc.ready函数，它在第一次加载页面时获取所有事件。在这个函数中，我有ape:repeat，它在从"pageLoad"方法获取的事件之间迭代，该方法包含在action属性下的apex:page(第一行(中。它一直工作到这里都是正确的。

我有三个下拉菜单。为此，我使用了Apex:selectlist。在选择每个下拉菜单后，我必须从控制器方法中获取一组新的事件，并将其显示在日历上。这并没有发生。有时，我可能还需要组合选择这三个下拉菜单，并获取事件和显示。有人能告诉我怎么做吗？看来我必须在filterfunc中包含一些代码。看到了完整的日历文档，我不知道如何使用这些方法。

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>

我在outputpanel"jsfilter"下包含了脚本，并在操作支持的帮助下，在更改selectList值(下拉值(时重新渲染面板，操作支持还运行控制器中的方法来获取新事件。在此处发布解决方案，以便对其他人有所帮助。