现在的位置: 首页 > web前端 > 正文

fullcalendar日历插件

2020年07月03日 web前端 ⁄ 共 1277字 ⁄ 字号 评论关闭

  FullCalendar是一个jQuery插件,它提供一个全尺寸,像事例中的拖拽日历。它使用AJAX来为每个月提取事件并轻松地配置为使用您自己资料的格式(扩展名为谷歌日历提供)。它是以可视方式自定义并公开为用户触发事件(如单击或拖动事件)挂钩。它是根据MIT许可证领有牌照的开放源代码.


  FullCalendar使用方法:


  1、body中插入以下html代码


  1


  <divid="calendar"></div>


  2、引入文件


  <linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"/>


  <linkrel="stylesheet"type="text/css"href="css/fullcalendar.css"/>


  <linkrel="stylesheet"type="text/css"href="css/index.css"/>


  <scriptsrc=""></script>


  <scripttype="text/javascript"src="js/bootstrap.min.js"></script>


  <scripttype="text/javascript"src="js/moment.min.js"></script><!--日期处理时间工具-->


  <scripttype="text/javascript"src="js/fullcalendar.min.js"></script>


  <scripttype="text/javascript"src="js/index.js"></script>


  FullCalendar配置代码


  $(function(){


  varget='2020-05-14';


  //$("#calendar").fullCalendar({


  varcalendar=$('#calendar').fullCalendar({


  header:{//设置日历头部信息,false,则不显示头部信息。包括left,center,right左中右三个位置


  left:'prev,next,today',//上一个、下一个、今天


  center:'title',//标题


  right:'month,agendaWeek,agendaDay,listMonth'//月、周、日、日程列表


  },


  locale:'zh-cn',//?没用?


  timeFormat:'HH:mm',//日程事件的时间格式


  //timeFormat:'HH:mm{-H:mm}',{agenda:‘h:mm{-h:mm}}


  buttonText:{//各按钮的显示文本信息


  today:'今天',


  month:'月',


  agendaWeek:'周',


  agendaDay:'日',


  listMonth:'日程',


  总之,FullCalendar是一款基于jquery的日历控件,它有着很强大的功能。


  

抱歉!评论已关闭.