完整日历事件渲染

1 回答

• 0

  <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”下包含了脚本，并且reRender在更改selectList值（下拉值）的面板上有动作支持的帮助，动作支持也运行控制器中的方法来获取新事件 . 在此处发布解决方案，以便对其他人有所帮助 .

  回复于 2024-05-10T01:10:23+08:00