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

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