salesforce實現日曆列表
- 2019 年 10 月 8 日
- 筆記
下面的實例圖
主要是在頁面中加入日曆插件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)這個是老版本的方法！
以上就是日曆頁面的實現！！
