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的日历控件,它有着很强大的功能。