建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery日程管理插件fullcalendar.js

来源:易助科技网浏览量:10收藏

简介


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


JQuery日程管理插件fullcalendar.js-示例图



使用


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/