Fullcalendar 日历控件的基本使用

1：Fullcalendar 日历控件的基本简介

Fullcalendar是一款十分强大的开源日历免费控件，提供了丰富的属性设置和方法调用。

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

文档地址：https://fullcalendar.io/docs/

  优点：1、设置时区

2、丰富的回调函数

3、支持拖拽 多选

4、支持触摸

5、列表视图

6、年、月、周。日的显示

7、前端展示可自定义

8、有完整的文档

2：基本使用方法

需要引用的外部支持文件---->>>

 <link href="css/fullcalendar.css" rel="stylesheet" type="text/css" />
 <link href="css/fancybox.css" rel="stylesheet" type="text/css" />
 <link media='print' href="css/fullcalendar.print.min.css" rel="stylesheet" type="text/css" />

 <script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
 <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
 <script src="Scripts/moment.min.js" type="text/javascript"></script>
 <script src="Scripts/fullcalendar.min.js" type="text/javascript"></script>
 <script src="Scripts/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>

 HTML代码--------------->>>>

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

Js进行初始化----------------->>>>>

  <script>
         $(document).ready(function () {

             $('#calendar').fullCalendar({
                 //自定义按钮
                 customButtons: {
                     myCustomButton: {
                         text:'自定义按钮!',
                         click:function(){
                             alert('我是自定义按钮');
                         }}},
                 //日历头部
                 header: {
                     //左边是 前一月/后一月/ 回到今天按钮  自定义按钮
                     left: 'prev,next today,myCustomButton',
                     //中间是当前的时间
                     center: 'title',
                     //切换日历显示月/周/日视图
                     right: 'month,agendaWeek,day'
                 },
                 //日历底部
                 footer: {
                     //左边是 前一月/周/日，后一月/周/日  以及  回到今天按钮
                     left: 'prev,next today',
                     //中间是   当前试图的时间
                     center: 'prevYear,title,nextYear',
                     //切换日历显示月/周/日视图
                     right: 'month,agendaWeek'
                 },
                 //自定义图标
                 buttonIcons:{
                     prev:'left-single-arrow',
                     next: 'right-single-arrow',
                     prevYear: 'left-double-arrow',
                     nextYear: 'right-double-arrow'
                 },
                 //设置时区
                 currentTimezone: 'Asia/Beijing',
                 //设置每星期的第一天是星期几，0 是星期日
                 firstDay:0,
                 //单击日期事
                 // dayClick:function(){
                 //     alert('a day has been clicked!'
                 //     )},
                 //设置日期的现实方向 左到右还是右到左  默认左到右
                 isRTL:false,
                 //设置是否现实周末 默认现实
                 weekends:true,
                 //隐藏某周的某一天
                 //hiddenDays:[1,2,3],
                 //设置每月显示的周数  默认true显示六周
                 fixedWeekCount:true,
                 //设置周数显示  默认不显示
                 weekNumbers:true,
                 //确定月视图周数和基本观点的造型
                 weekNumbersWithinDays:true,
                 //工作时间  默认关闭 true显示周末休息
                 //businessHours:true,
                 businessHours: {
                     // 时间段
                     dow: [1,2,3,4,5],
                     start:'10:00',
                     //开始时间 (10am in this example)
                     end:'18:00'},
                     //结束时间(6pm in this example)}
                 //月份外的表格不显示
                 showNonCurrentDates:false,
                 //高度设置
                 height:"700",
                 //纵横比
                 aspectRatio:1.6,
                 //是否自动调整日历大小
                 handleWindowResize:true,
                 //当事务大于约定的时候回收缩显示
                 eventLimit: true,
                 views: {
                     agenda: {
                         eventLimit: 3//最大容纳数量
                     }
                 },
                 //eventLimitClick回调函数
                 eventLimitClick:
                     function(cellInfo){
                     alert("eventLimitClick回调事件");
                     },
                 dayClick: function(date, allDay, jsEvent, view) {
                     var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd');//格式化日期
                     alert(selDate);
                     $.fancybox({
                         //调用fancybox弹出层

                     });
                     },
                     //设置月份名称，中英文均可
                 monthNames: ["一月", "二月", "三月", "四月",
                     "五月", "六月", "七月", "八月", "九月",
                     "十月", "十一月", "十二月"
                 ],
                 //设置月份的简称
                 monthNamesShort: ["一月", "二月", "三月",
                     "四月", "五月", "六月", "七月", "八月",
                     "九月", "十月", "十一月", "十二月"
                 ],
                 dayNames: ["周日", "周一", "周二", "周三",     //设置星期名称
                     "周四", "周五", "周六"
                 ],
                 dayNamesShort: ["周日", "周一", "周二",       //设置星期简称
                     "周三", "周四", "周五", "周六"
                 ],
                 today: ["今天"],                              //today 按钮的显示名称
                 buttonText: {                                 //设置按钮文本
                     today: '今天',
                     month: '月',
                     week: '周',
                     day: '日',
                     prev: '上一月',
                     next: '下一月'
                 },
                 theme:false,

                 eventClick: function (event) {
                     alert(event.title + "按钮被点击了");

                 },
                 editable: true,                            //事项是否可编辑，改变大小、拖拽等

                 events: [
                     {
                         start: '2017-04-06',
                         end: '2017-04-08',
                         overlap: false,
                         rendering: 'background',         //背景
                         color: '#ff9f89'
                     },

                     {
                         title: 'All Day Event',
                         start: '2017-04-01'
                     },
                     {
                         title: 'Long Event',
                         start: '2017-04-07',
                         end: '2017-04-10',
                         color:'green',
                     },
                     {
                         id: 999,
                         title: 'Repeating Event',
                         start: '2017-04-09T16:00:00'
                     },
                     {
                         id: 999,
                         title: 'Repeating Event',
                         start: '2017-04-16T16:00:00'
                     },
                     {
                         title: 'Conference',
                         start: '2017-04-11',
                         end: '2017-04-13'
                     },
                     {
                         title: 'Meeting',
                         start: '2017-04-12T10:30:00',
                         end: '2017-04-12T12:30:00'
                     },
                     {
                         title: 'Lunch',
                         start: '2017-04-12T12:00:00'
                     },
                     {
                         title: 'Meeting',
                         start: '2017-04-12T14:30:00'
                     },
                     {
                         title: 'Happy Hour',
                         start: '2017-04-12T17:30:00'

                     },
                     {
                         title: 'Dinner',
                         start: '2017-04-12T20:00:00',

                     },
                     {
                         title: 'Birthday Party',
                         start: '2017-04-13T07:00:00',
                         color:'blue',
                     },
                     {
                         title: 'Click for Google',
                         url: 'http://google.com/',  //事件
                         color:'red',
                         start: '2017-04-28'
                     }
                 ]

             });

         });

     </script>

成果展示：

页面风格是引用的Jq ui 实现的 http://jqueryui.com/themeroller/#!bgImgOpacityHeader=35&bgImgOpacityContent=75&bgImgOpacityDefault=50&bgImgOpacityHover=75&bgImgOpacityActive=40&bgImgOpacityHighlight=80&bgImgOpacityError=50

页面标注的很详细，其中部分是在大神那学到，其余部分是自己看的的官方文档学习的，这些基本使用代码，再仔细看一下文档就可以掌握。