下面的实例图
主要是在页面中加入日历插件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)这个是老版本的方法！
以上就是日历页面的实现！！
