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函数，它在第一次加载页面时获取所有事件。在这个函数中，我有一个猿：重复在从“pageLoad”方法获取的事件之间进行迭代，该方法包含在action属性下的apex：page（第一行）中。它正常工作到这里。

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

Answer 1

{{1}}

我在outputpanel＆＃34; jsfilter＆＃34;下包含了脚本。并且在动作支持的帮助下重新调整selectList值（下拉值）的面板，该动作支持也在控制器中运行方法以获取新事件。在此处发布解决方案，以便对其他人有所帮助。

完整日历事件渲染

1 个答案: