【发布时间】：2016-09-08 04:44:24
【问题描述】：
<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”方法获取的事件中迭代，该方法包含在 apex:page （第一行）中的 action 属性下。它可以正常工作到这里。
我有三个下拉菜单。为此，我使用了 Apex:selectlist。选择每个下拉菜单后，我必须从控制器方法中获取一组新事件并将其显示在日历上。这没有发生。有时我可能还需要结合选择这三个下拉菜单并获取事件和显示。有人可以告诉我该怎么做吗？看来我必须在 filterfunc 中包含一些代码。看到完整的日历文档，我不明白如何使用这些方法。
【问题讨论】：
标签： javascript jquery salesforce fullcalendar visualforce