首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >salesforce实现日历列表

salesforce实现日历列表

作者头像
故久
发布2019-09-29 14:51:44
1.6K0
发布2019-09-29 14:51:44
举报
文章被收录于专栏:故久故久

下面的实例图

主要是在页面中加入日历插件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)这个是老版本的方法!

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档