JQuery日程管理插件fullcalendar.js

简介

JS日程管理插件FullCalendar是一款基于jQuery的日历日程插件，适用于各种日程安排、工作计划等场景，您可以很方便的查看查看待办事项，标记重要事项以及绑定点击和拖动事件，能快速的整合到您的项目中。

使用

1.  引入 jquery.js 和 fullcalendar.js 文件

2.  HTML

<div id='calendar'></div>

3.  调用

$(document).ready(function() {
  //页面加载完初始化日历
  $('#calendar').fullCalendar({
    //设置选项和回调
  })
});

附上带注解的代码

$('#calendar').fullCalendar({
  //是否展示主题
  theme: true,
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  defaultDate: time,
  //月视图下日历格子宽度和高度的比例
  aspectRatio: 1.35,
  //月视图的显示模式，fixed：固定显示6周高；liquid：高度随周数变化；variable: 高度固定
  weekMode: 'variable',
  //初始化时的默认视图，month、agendaWeek、agendaDay
  defaultView: 'month',
  //agenda视图下是否显示all-day
  allDaySlot: false,
  //agenda视图下all-day的显示文本
  allDayText: '全天',
  //agenda视图下两个相邻时间之间的间隔
  slotMinutes: 30,
  //区分工作时间
  businessHours: true,
  //非all-day时，如果没有指定结束时间，默认执行120分钟
  defaultEventMinutes: 50,
  //内容高度
  contentHeight: 500,
  //设置为true时，如果数据过多超，显示为 +...more ，点击后才会完整显示所有的数据
  eventLimit: true,
  //设置是否可被单击或者拖动选择
  selectable: true,
  //点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用
  selectHelper: true,
  //点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消
  unselectAuto: true,
  //Event是否可被拖动或者拖拽
  editable: true,
  //Event被拖动时的不透明度
  dragOpacity: 0.5, 
  editable: true,
  events: [
    {
      title: '事件1',//事件内容
      start:'2018-12-27 20:18',//事件开始时间
      end:‘2018-12-27 22:00’,//事件结束时间
      color:'blue',//事件框背景的颜色
      textColor: 'white',//文字的颜色
      borderColor: 'LightGreen',//事件框的颜色
      //url: 'www.test.com',//设置事件的url链接
      className: 'done'//加类名
    },
    { 事件二 },
    { 事件3  }
  ],
})

相关链接

官网地址 ：https://fullcalendar.io/

在线演示 ：http://demo.jb51.net/js/2017/jquery_fullcalendar/

bootCDN 下载地址 ：https://www.bootcdn.cn/fullcalendar/