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)这个是老版本的方法！

以上就是日历页面的实现！！

 

转载于:https://my.oschina.net/u/3459265/blog/3071671