FullCalendar日历插件的简单使用(版本4.2.0)

最近开的一个项目，涉及到了日历日程安排的功能，所以选用了一个免费的日历插件：FullCalendar

1.首先去官网将官方的demo下载下来，通过官方的demo进行一个初步的了解，下面正式开始

PS:中文文档的可能不太全，不清楚的可以去官网看看

2.建议先试试官方的示例：

  document.addEventListener('DOMContentLoaded', function() {var calendarEl = document.getElementById('calendar');var calendar = new FullCalendar.Calendar(calendarEl, {plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'rrule' ],header: {left: 'prev,next today',center: 'title',right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'},defaultDate: '2019-06-12',editable: true,events: [{title: 'rrule event',rrule: {dtstart: '2019-06-09T13:00:00',// until: '2019-06-01',freq: 'weekly'},duration: '02:00'}],eventClick: function(arg) {if (confirm('delete event?')) {arg.event.remove()}}});calendar.render();});</script>
<style>body {margin: 40px 10px;padding: 0;font-family: Arial, Helvetica Neue, Helvetica, sans-serif;font-size: 14px;}#calendar {max-width: 900px;margin: 0 auto;}</style>
</head>
<body><div id='calendar'></div></body>
</html>

3.正式开始，首先引入相关的js/css

PS：必须将jquery放在最上面！

jquery-form.js则是我后面需要用ajaxFrom，如果不用可不引入。

<link href='../fm/js/common/fullcalendar-4.2.0/packages/core/main.css' rel='stylesheet' /><link href='../fm/js/common/fullcalendar-4.2.0/packages/daygrid/main.css' rel='stylesheet' />
<link href='../fm/js/common/fullcalendar-4.2.0/packages/timegrid/main.css' rel='stylesheet' /><script src='/fm/js/common/jquery-2.1.4.js'></script>
<script src='/fm/js/common/jquery-form.js'></script><script src='../fm/js/common/fullcalendar-4.2.0/packages/core/main.js'></script>
<script src='../fm/js/common/fullcalendar-4.2.0/packages/interaction/main.js'></script>
<script src='../fm/js/common/fullcalendar-4.2.0/packages/daygrid/main.js'></script>
<script src='../fm/js/common/fullcalendar-4.2.0/packages/timegrid/main.js'></script>
<script src="../fm/js/common/fullcalendar-4.2.0/packages/core/locales/zh-cn.js"></script>

4.构建一个简单的页面

  <div id="calendar"></div>

5.js方法相关

$(function () {initFullCalendar();
});function initFullCalendar(){var calendarEl = document.getElementById('calendar');var calendar = new FullCalendar.Calendar(calendarEl, {plugins: ['interaction', 'dayGrid', 'timeGrid'],header: {left: 'prev,next today',center: 'title',right: 'dayGridMonth,timeGridWeek,timeGridDay'},// defaultDate: '2019-06-12',navLinks: true, // can click day/week names to navigate views//允许用户通过点击或拖动选择日历中的对象selectable: true,locale: 'zh-cn',selectMirror: true,editable: true,eventLimit: true,//绑定一个mothod,在点击日历时可以弹出页面select:  function(arg){//modal 是semantic ui中的弹框样式$(".ui.small").modal({onShow : function() {//弹框显示的时候},//点击弹框确定按钮onApprove : function() {//弹出的页面，通过ajaxForm的方法存入数据库中$("#calendar_form").ajaxSubmit({type: 'POST',url: '/**/**/insertJobSchedule', success: function(result) { // data 保存提交后返回的数据，一般为 json 数据//可以进行一些操作   },error:function(){console.info("提交失败失败");}})//对日历页面进行实时更新var start = $("#transact_date").val();var end = $("#end_date").val();var jobAbstract = $("#jobAbstract").val();calendar.addEvent({title: jobAbstract,//必须参数start: start,//必须参数end: end,//非必须//allDay: arg.allDay})calendar.unselect();},//弹框隐藏时onHidden : function() {}}).modal('show');},//点击添加的事件触发的方法eventClick : function(arg) {console.info(arg.event.id);if (confirm('delete event?')) {arg.event.remove()}},//进入日历界面进行加载添加过的数据events: function( fetchInfo, successCallback, failureCallback ){var events = [];$.ajax({type:"POST",url:"/**/**/selectAllJob",dataType:"json",success:function(result){console.info(result.msg);if(result.status){console.info(result.obj.jobScheduleList);var jobScheduleList =  result.obj.jobScheduleList;if(jobScheduleList.length > 1){$.each(jobScheduleList,function(i,j){events.push({id:j.id,title: j.jobAbstract,start: new Date(j.startDate).format('yyyy-MM-dd hh:mm:ss'),           // will be parsedend:new Date(j.endDate).format('yyyy-MM-dd hh:mm:ss')});})//回调渲染日历successCallback(events);}}},error:function(){},})}});calendar.render();
}

5.下面我是用的日期格式化方法格式是：yyyy-MM-dd hh:mm:ss

//将数据库的时间戳转成 字符串
Date.prototype.format = function(format) {var o = {"M+": this.getMonth() + 1,"d+": this.getDate(),"h+": this.getHours(),"m+": this.getMinutes(),"s+": this.getSeconds(),"q+": Math.floor((this.getMonth() + 3) / 3),"S": this.getMilliseconds()}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;
}

FullCalendar日历插件的简单使用(版本4.2.0)相关推荐

fullcalendar日历插件使用手册
我是在angularjs框架下使用的,看到下面的代码不要一味照搬,不过差别不大,依葫芦画瓢即可. 引用 //安装angular-ui-calendar插件,目前最新版本是1.0.2,默认该插件依赖的f ...
FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)
(基于vue)实现效果文章目录前言一.FullCalendar是什么? 二.使用步骤 1.引入库 2.html部分代码 3.css样式代码(样式我单独写个scss文件引入的) 4.逻辑代码部分 ...
fullcalendar php,php使用fullcalendar日历插件详解，fullcalendar日历
php使用fullcalendar日历插件详解,fullcalendar日历最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了fullcalendar,还挺简单的,很方便,先贴一张项目页面 ...
FullCalendar 二：FullCalendar日历插件说明文档
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...
java显示日历插件_JavaWeb项目FullCalendar日历插件使用的示例代码
本文介绍了JavaWeb项目FullCalendar日历插件使用的示例代码,分享给大家,具体如下: 使用FullCalendar需要引用的文件 1.css文件 2.js文件生成日历主界面 FullC ...
Sep 15 FullCalendar日历插件说明文档
Sep 15 FullCalendar日历插件说明文档 helloweba.com 作者:月光光时间:2013-09-15 13:53 标签: FullCalendar 日历文档 FullCa ...
fullcalendar日历插件的使用并实现增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
fullcalendar日历插件的使用并动态增删改查(转载)
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...

FullCalendar日历插件的简单使用(版本4.2.0)

FullCalendar日历插件的简单使用(版本4.2.0)相关推荐

最新文章

热门文章