fullcalendar插件用法

Posted 笑笑~上善若水

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了fullcalendar插件用法相关的知识,希望对你有一定的参考价值。

管理系统里面采用了fullcalendar插件,遇到几个问题,总结下:

官方英文文档:https://fullcalendar.io/docs/

中文文档:https://www.helloweba.net/javascript/445.html

 

初始化模板:

HTML:
<div id=\'calendarSetting\'>
    <div class="datetime-picker"></div>
</div>

<script>
    $(function () {


        // 打钩按钮的节点(这个就是下图背景蓝色的日程,被我用CSS改成打√的)
        var htmlnode = \'<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable fc-resizable"><div class="fc-content node-height"><span class="fc-title circle-position"> </span></div><div class="fc-resizer fc-end-resizer"></div></a>\';


        //  fullcalendar日程插件初始化
        $(\'#calendarSetting\').fullCalendar({
            // 头部定义
            header: {
                left: \'\',
                center: \'prev, today ,next,checkbox\',
                right: \'\'
            },
            // 日历高度
            height: 650,
//            默认日期
            defaultDate: defaultDate,
            // 时间显示模板
            views: {
                month: {
                    titleFormat: \'YYYY, MM, DD\'

                }
            },

            // 每周的第一天从星期一开始
            firstDay: 1,
            navLinks: true, // can click day/week names to navigate views editable: true, eventLimit: true, // allow "more" link when too many events
            // defaultDate: \'2018-02-12\',这个可以设置一开始进来显示的默认日期
            selectable: true,
            selectHelper: true,
            // 设置中文
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            buttonText: {
                today: \'本月\',
                month: \'月\',
                week: \'周\',
                day: \'日\',
                prev: \'上一月\',
                next: \'下一月\'
            },
            // 当点击日历中的某一日程(事件)时,触发此操作,原来没有的日程,点上去,触发这个
            dayClick: function (date, jsEvent, view) {

                var $this = $(this);
                // 判断是否有打钩图案按钮节点
                var flag = $this.children(\'.fc-day-grid-event\').length;
                // 如果有,则取消该按钮节点,并且删除要提交的对应数据
                var clickDate = new Date(date);
                var year = clickDate.getFullYear();
                var month = (clickDate.getMonth() + 1) < 10 ? "0" + (clickDate.getMonth() + 1) : (clickDate.getMonth() + 1);
                var day = clickDate.getDate() < 10 ? "0" + clickDate.getDate() : clickDate.getDate();
                var submitDate = year + "-" + month + "-" + day;
                if (flag) {
                    $(this).empty();
                    AJAX请求

                } else {
                    // 如果没有,添加图案节点,并且将日期添加到数组
                    $(this).append(htmlnode);
                    AJAX请求

                }
                console.log(submitDate);
            },
            // 取消原来保存的数据,后台获取来的数据,显示上来,想取消的,触发这个
            eventClick: function (event, jsEvent, view) {
                // 将原数据库有的日程日期取消后,放到取消的数组里面,最后作对比
//                console.log(event);
                var submitDate = event.start._i;
                AJAX请求
                // 取消原来保存的数据图标
                $(jsEvent.currentTarget).parent().empty();

            },
            editable: false,
            // 初始化数据,可以放这个地方,也可以放下面的地方
            // events: evnetsData,
        })

        // 初始化数据
        $(\'#calendarSetting\').fullCalendar(\'addEventSource\', evnetsData);
        // 上一个月按钮点击事件
        $(\'.fc-prev-button\').on(\'click\', function () {
            AJAX请求
        });
        // 本月按钮点击事件
        $(\'.fc-today-button\').on(\'click\', function () {
            AJAX请求
        });
        // 下一个月按钮点击事件
        $(\'.fc-next-button\').on(\'click\', function () {
            AJAX请求
        });

       

        }

        function ajaxDate(submitDate,remove){
            $.ajax({
                url: "jf/vacationsSettings/o_doSave?day=" + submitDate + remove ,
                type: "GET",
                processData: false,
                contentType: false,
                dataType: \'json\',
                async:false,
                success: function (json) {
                    if (json.statusCode == \'200\') {
                        alertMsg.correct(\'您的数据提交成功!\')
                    } else {
                        alertMsg.warn(json.message);
                    }
                },
                error: function (e) {
                    alertMsg.warn(e);
                }
            });
        }

        // 选中的背景 颜色图标
        function chooseWeekend(node) {
            $(node).append(htmlnode);
        }

        // 取消被选中的背景颜色,图标
        function unchooseWeekend(node) {
            $(node).empty();
        }


//        数据遍历改变成插件所需要格式
        function traversalData(dataListArray){
            var newDataListArray = []
            $.each(dataListArray, function (i,item) {
                newDataListArray[i] = {};
                newDataListArray[i]["start"] = item;
            });
            return newDataListArray;
        };

            //上个月,下个月,本月,我原来用addEventSource去追加数据,发现数据会重复,图标会重叠。后来才知道
            //先删除数据,再追加数据,再获取。这三个帮我很大的忙  ,使用在AJAX请求完成数据后使用         
             $(\'#calendarSetting\').fullCalendar( \'removeEventSource\', evnetsData);
$(\'#calendarSetting\').fullCalendar( \'addEventSource\', evnetsData);
$(\'#calendarSetting\').fullCalendar( \'refetchEvents\' );
}) </script>

  

 

①插件显示是这样的:

只能通过改变样式,改成设计稿的。

 

②上个月下个月,我是直接获取按钮的的类名,去写点击事件:

// 上一个月按钮点击事件
$(\'.fc-prev-button\').on(\'click\', function () {});
// 本月按钮点击事件
$(\'.fc-today-button\').on(\'click\', function () {});
// 下一个月按钮点击事件
$(\'.fc-next-button\').on(\'click\', function () {});

③自己点的点击事件,那怎么获取到对应的时间呢?
  插件提供好的,这样获取点击事件的时间:moment = $(\'#calendarSetting\').fullCalendar(\'getDate\')

 

以上是关于fullcalendar插件用法的主要内容,如果未能解决你的问题,请参考以下文章

fullCalendar插件基本使用

FullCalendar jQuery 插件 - 设置今天的日期

FullCalendar日程插件

FullCalendar 插件 3.1.0 未正确显示

如何将 Fullcalendar 插件中的日期与日期数组进行比较

FullCalendar日历插件