关于FullCalendar日历添加日程的简单使用方法

1. fullcalendar是一个日历插件，可以在相应的时间上面添加相应的日程或备注：

注意：

使用fullcalendar之前需要引入jquery插件。
然后引入它的js和css即可。
fullcalendar的中文帮助文档：https://www.helloweba.net/javascript/445.html

2. fullcalendar的简单使用：

##在需要放置的日历模块中加入<div id="calendar"></div>。

然后进行初始化

$('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},

 //默认视图defaultView: 'agendaWeek',//设置日程事件的时间格式
timeFormat: {agenda:'H:mm{-H:mm}',month:'H:mm'},//日历下视图左侧的时间显示格式axisFormat: 'H:mm',//两个时间之间的间隔
slotMinutes: 15,/**date: 是用户点击的那一天的Date对象，用户点击日程周视图和日程天视图的时间曹一样
*/
//点击日历某天时候触发
dayClick: function(date, jsEvent, view) {//自行定义事件
},/**event: 包含了日程的信息（例如：日期，标题）jsEvent: 是原生的javascript事件，包含“点击坐标”之类的信息view： 是当前的view object在 eventClick 回调函数内部，this 是当前点击那个日程的<div>
*/
//点击日历中某个事情时候触发
eventClick: function(calEvent, jsEvent, view) {//自行定义事件},eventMouseover: function(event, jsEvent, view){/**以下代码是在事件上方悬浮时在下方显示提示信息
*/$(this).attr("title","<h2>Title</h2>").attr("data-container","body").attr ("data-toggle","popover").attr("data-content","<h4>Popover 中的一些内容 —— options 方法</h4>").attr("data-html","true").attr("data-trigger","hover").attr("data-placement","bottom");$("[data-toggle='popover']").popover();
},});

是bootstrap里的方法，链接： http://www.runoob.com/bootstrap/bootstrap-popover-plugin.html

用来将日程填充到日历上面：

//清除原本所有的日历记录
$('#calendar').fullCalendar('removeEvents');
$.ajax({type: "POST",url: "请求数据的url",data: "",success: function (data) {if (data.length>0) {$.each(data, function (index, info) {var eventObj = new Object();//构造每一个日历记录eventObj.id = info.id;eventObj.title = info.prodEntName;eventObj.start = new Date(info.prepareTime);eventObj.end = new Date(info.endPrepareTime) ;var arr = [];//className是可以存放一些信息包括数组，方便在日历事件的时候使用eventObj.className = arr;eventObj.allDay = false;//刷新日历里面的记录$('#calendar').fullCalendar('renderEvent', eventObj, true);})} else {DialogUtils.error("失败", data.msg);}}
});

end

谢谢！

关于FullCalendar日历添加日程的简单使用方法相关推荐

Vue中使用Fullcalendar日历开发日程安排
效果图: 官方文档地址:Vue Component - Docs | FullCalendar 1.安装与FullCalendar相关的依赖项 npm install --save @fullcale ...
android 添加日程失败,Andriod向系统日历添加日程
Andriod向系统日历添加日程 1.检查是否有现有的账户存在 private static int checkCalendarAccount(Context context) { Cursor us ...
Android 向系统日历添加日程
工作需求:需要在某个时间点提前提醒用户秒杀活动开始由于推送到达率不高不够及时,使用系统日历的日程是最方便最简单的选择 1.使用系统日历需要添加权限 targetSdkVersion=23以上的需要动 ...
android向系统日历添加日程事件（实现闹铃效果，且在app被杀仍能完成）
向系统日历读写事件有一下步骤 1,有读写日历的权限 2,如果没有日历账户需要先创建日历账户 3,实现日历事件增删改查,提醒功能一,权限申请 AndroidManifest.xml添加如下权限 < ...
分享添加字幕最简单的方法视频制作超简单
字幕是一个视频或电影组成中相当重要的一部分,方便了我们更容易看懂视频以及视频想要表达的意思,但是很多新手小白在添加字幕时常常耗时耗力,小编今天分享一个添加字幕的方法,感兴趣的朋友一起来看看吧! 第一步 ...
无法同步谷歌日历_苹果日历不能添加日程提醒怎么办？云提醒软件为你罗列待办事项...
苹果手机上可用来记录日程提醒的软件有提醒事项.备忘录和日历提醒,使用苹果手机的群体会根据个人的喜好选择桌面工具提醒,但是从相关的手机论坛中,网友提出的问题来看,不少人的日历添加日程提醒的按钮呈灰色显示 ...
fullCalendar日历，点击添加日程，点击删除日程
fullCalendar日历插件玩法解析 Fullcalendar安装安装需要的npm包 npm install --save @fullcalendar/vue // 日历的周视图.日视图: np ...
FullCalendar日历插件的简单使用(版本4.2.0)
最近开的一个项目,涉及到了日历日程安排的功能,所以选用了一个免费的日历插件:FullCalendar 1.首先去官网将官方的demo下载下来,通过官方的demo进行一个初步的了解,下面正式开始 PS: ...
js 排班插件_js jquery 实现排班,轮班，日历，日程。使用fullcalendar 插件
如果想用fullcalendar实现排班功能,或者日历.日程功能.那么只需要简单的几步: 这里先挂官网链接: fullcalendar fullcalendar官网下载链接一.下载及简单配置 1.这 ...

关于FullCalendar日历添加日程的简单使用方法

1. fullcalendar是一个日历插件，可以在相应的时间上面添加相应的日程或备注：

2. fullcalendar的简单使用：

关于FullCalendar日历添加日程的简单使用方法相关推荐

最新文章

热门文章