salesforce實現日曆列表

下面的實例圖

主要是在頁面中加入日曆插件Fullcalendar.js我下載是新版本fullcalendar-4.2.0

我這還導入了jquey的插件，由於我後面會用到的

日曆顯示的標籤

具體實現的js

 <script>

Date.prototype.formats = function(format){ 
        var o = { 
        "M+" : this.getMonth()+1, //month 
        "d+" : this.getDate(), //day 
        "h+" : this.getHours(), //hour 
        "m+" : this.getMinutes(), //minute 
        "s+" : this.getSeconds(), //second 
        "q+" : Math.floor((this.getMonth()+3)/3), //quarter 
        "S" : this.getMilliseconds() //millisecond 
        }; 
        if(/(y+)/.test(format)) { 
        format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
        } 
        for(var k in o) { 
        if(new RegExp("("+ k +")").test(format)) { 
        format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); 
        } 
        } 
return format; 
};
    

    
    document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid' ],
      header: {
                //日曆頭部左邊：初始化切換按鈕
                left: 'prev,today,next',
                //日曆頭部中間：顯示當前日期信息
                center: 'title',
                //日曆頭部右邊：初始化視圖
                right: '',
            },
       //設置是否顯示週六和週日，設爲false則不顯示  
        weekends: true,
       aspectRatio: 1.35,
      //月視圖的顯示模式，fixed：固定顯示6周高；liquid：高度隨週數變化；variable: 高度固定
       weekMode: 'fixed',
      // defaultDate: '2019-06-12',
      editable: true,
        //navLinks: true,
      //設置是否可被單擊或者拖動選擇
      selectable: true,
      weekNumbers: false,
      weekNumbersWithinDays: true,
      weekNumberCalculation: 'ISO',
       buttonText: {  
           today: '今天', 
       },
      select: function(arg) {
        var title = prompt('Event Title:');
        if (title) {
          calendar.addEvent({
            title: title,
            start: arg.start,
            end: arg.end,
            allDay: arg.allDay
          })
        }
        calendar.unselect()
      },
      eventLimit: true, // allow "more" link when too many events
     
     events:function(fetchInfo,successCallback,failureCallback){           
        alert("sss")
        var province=$('[id$=province]').val();
        var schools=$('[id$=school]').val();
        var city=$('[id$=city]').val();
        var flag= $('[id$=appoint]').is(':checked');
         Visualforce.remoting.Manager.invokeAction(
                        '{!$RemoteAction.AuditionController.qureyList}',//訪問後臺controoller裏面的方法
              province,schools,city,flag,//參數值
                        function(result, event){ 
                        var events = []; 
                        alert(result)
                        for(var i=0;i<result.length;i++){
                            var classCourseDate=getDate(result[i].BeginTime__c);
                            var school=result[i].SchoolInfo__r.Name
                            var time=formatDate(result[i].BeginTime__c)
                            alert(classCourseDate);
                              events.push({
                                      title:school+" "+time,
                                     start: classCourseDate,
                                     color:'#ffddff'
                               });
                        
                           }
                         successCallback(events);
                     },
                   {escape: false}
               );
            
         } 
    });

    calendar.render();
  });
</script>

注意：events:function(fetchInfo,successCallback,failureCallback)是最新版的方法

function(start,end,timezone,callback)這個是老版本的方法！

以上就是日曆頁面的實現！！