のフルカレンダーイベント

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を持っています。これは、action属性のapex：page（1行目）に含まれる "pageLoad"メソッドからフェッチされたイベントの間で繰り返されます。ここまで正しく機能します。

私は3つのドロップダウンを持っています。 Apex：selectlistを使用しました。各ドロップダウンを選択すると、コントローラメソッドから新しいイベントセットを取得し、カレンダーに表示する必要があります。これは起こっていない。私はまた、これらの3つのドロップダウンの組み合わせの組み合わせを持って、イベントと表示を取得する必要があります。誰かが私にそれをする方法を教えてもいいですか？私は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の値の変化のパネル（値をドロップダウン）の下にスクリプトが含まれてコントローラーで新しいイベントを取得することができます。他の人に役立つようにここにソリューションを投稿する。