使用FullCalendar做一个自己的日程管理(二)- 事件篇

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第1张图片

FullCalendar is a drag-n-drop jQuery plugin for displaying events on a full-sized calendar.


本文示例下载地址:FullCalendar示例


1. 鼠标点击事件

(1)通过鼠标点击日历某一天触发dayClick的callback,参数date为点击的日期或时间,常用于为某一天或为某一时刻添加日程,具体方法如下(使用Console日志打印点击的日期或时间) :

dayClick : function( date ) {
    //do something here...
    console.log('dayClick触发的时间为:', date.format());
    // ...
},

在month视图下点击时:

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第2张图片

在agenda视图下点击时会带上对应的时间:

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第3张图片

(2)通过鼠标点击日历某一Event数据触发eventClick的callback,参数event表示被点击的Event,常用于编辑某一Event数据,具体方法如下(使用Console日志打印点击的Event数据基本信息) :

eventClick : function( event ){
    //do something here...
    console.log('eventClick中选中Event的id属性值为:', event.id);
    console.log('eventClick中选中Event的title属性值为:', event.title);
    console.log('eventClick中选中Event的start属性值为:', event.start.format('YYYY-MM-DD HH:mm'));
    console.log('eventClick中选中Event的end属性值为:', event.end==null?'':event.end.format('YYYY-MM-DD HH:mm'));
    console.log('eventClick中选中Event的color属性值为:', event.color);
    console.log('eventClick中选中Event的className属性值为:', event.className);
    // ...
},

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第4张图片

2. 鼠标悬浮事件

通过鼠标经过或者离开日历某一天触发callback,参数event表示鼠标经过或离开的Event,常用来通过一些悬浮DIV展示Event数据的基本信息,具体方法如下(使用Console日志打印事件的触发过程) :

(1)鼠标经过

eventMouseover : function( event ) {
    //do something here...
    console.log('鼠标经过 ...');
    console.log('eventMouseover被执行,选中Event的title属性值为:', event.title);
    // ...
},

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第5张图片

(2)鼠标离开

eventMouseout : function( event ) {
    //do something here...
    console.log('eventMouseout被执行,选中Event的title属性值为:', event.title);
    console.log('鼠标离开 ...');
    // ...
},

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第6张图片

3. 鼠标选择事件

通过鼠标点击或者拖动选择日历中的对象会触发select的callback,参数start表示选择的开始时间,参数end表示选择的结束时间,常用于快速添加阶段性时间的日程,具体方法如下(使用Console日志打印选择的开始和结束时间) :

相关的属性设置:

//设置是否可被单击或者拖动选择
selectable: true,
//点击或者拖动选择时,是否显示时间范围的提示信息,该属性只在agenda视图里可用
selectHelper: true,
//点击或者拖动选中之后,点击日历外的空白区域是否取消选中状态 true为取消 false为不取消,只有重新选择时才会取消
unselectAuto: true,

下面是select的callback方法:

select: function( start, end ){
    //do something here...
    console.log('select触发的开始时间为:', start.format());
    console.log('select触发的结束时间为:', end.format());
    // ...
},

如果dayClick和select同时存在时,两个callback都会执行,需要注意。

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第7张图片

在month视图下选择时:

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第8张图片

设置了selectHelper为true,在agenda视图下选择时会带上对应的时间,Helper会显示选择的时间范围:

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第9张图片

4. 鼠标拖动事件

通过鼠标按住拖动某一Event触发eventDrop的callback,参数event表示被拖动的Event,参数dayDelta表示这次拖动导致Event移动了多少天或时间, 向前为正数, 向后为负数,参数revertFunc 用来在提交数据失败时将刚才的拖动恢复到原状,拖动改变日程时间范围常用于快速编辑某一Event的日程时间,具体方法如下(使用Console日志打印鼠标拖动Event的过程) :

相关的属性设置:

//Event是否可被拖动或者拖拽
editable: true,
//Event被拖动时的不透明度
dragOpacity: 0.5,

下面是eventDrop的callback方法,判断了month视图和agenda视图下不同的时间改变:

eventDrop : function( event, dayDelta, revertFunc ) {
    //do something here...
    console.log('eventDrop --- start ---');
    console.log('eventDrop被执行,Event的title属性值为:', event.title);
    if(dayDelta._days != 0){
        console.log('eventDrop被执行,Event的start和end时间改变了:', dayDelta._days+'天!');
    }else if(dayDelta._milliseconds != 0){
        console.log('eventDrop被执行,Event的start和end时间改变了:', dayDelta._milliseconds/1000+'秒!');
    }else{
        console.log('eventDrop被执行,Event的start和end时间没有改变!');
    }
    //revertFunc();
    console.log('eventDrop --- end ---');
    // ...
},

在month视图下开始拖动,改变的是天数:

开始拖动,可以看到不透明度发生了变化。

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第10张图片

松开鼠标,完成拖动。

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第11张图片

在agenda视图下开始拖动,改变的是毫秒数:

Event初始位置。

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第12张图片

开始拖动,可以看到不透明度发生了变化。

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第13张图片

松开鼠标,完成拖动。

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第14张图片

5. 鼠标拖拽事件

通过鼠标按住Event的一侧进行拖拽触发eventResize的callback,参数event表示被拖拽的Event,参数dayDelta表示这次拖拽改变日程结束时间导致Event日程结束时间增加了多少天或时间,,参数revertFunc 用来在提交数据失败时将刚才的拖拽恢复到原状,拖拽改变日程结束时间常用于快速编辑某一Event的日程结束时间,具体方法如下(使用Console日志打印鼠标拖拽Event的过程) :

相关的属性设置:

//Event是否可被拖动或者拖拽,之前拖动配置过了,此处不必配置
editable: true,

下面是eventResize的callback方法,判断了month视图和agenda视图下不同的时间改变:

eventResize : function( event, dayDelta, revertFunc ) {
    //do something here...
    console.log(' --- start --- eventResize');
    console.log('eventResize被执行,Event的title属性值为:', event.title);
    if(dayDelta._days != 0){
        console.log('eventResize被执行,Event的start和end时间改变了:', dayDelta._days+'天!');
    }else if(dayDelta._milliseconds != 0){
        console.log('eventResize被执行,Event的start和end时间改变了:', dayDelta._milliseconds/1000+'秒!');
    }else{
        console.log('eventResize被执行,Event的start和end时间没有改变!');
    }
    //revertFunc();
    console.log('--- end --- eventResize');
    // ...
},

注意:

(1)all-day的Event可以在month、agendaWeek视图下向右拖拽改变日程结束时间
(2)非all-day的Event,不可以在month视图下拖拽,只能在agenda视图下向下拖拽改变日程结束时间

在month视图下开始拖拽,改变的是天数:

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第15张图片

在agenda视图下开始拖动,改变的是毫秒数:

使用FullCalendar做一个自己的日程管理(二)- 事件篇_第16张图片

附录 完整代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link href='fullcalendar.css' rel='stylesheet' />
    <style>
        /* 语言选择 */
        #top {
            background: #eee;
            border-bottom: 1px solid #ddd;
            padding: 0 10px;
            line-height: 40px;
            font-size: 12px;
        }
        /* 日历 */
        #calendar {
            margin: 40px auto;
            padding: 0 10px;
        }
        /* Event 参数 className 的值 */
        .done:before {
            content:"【 已完成 】";
            background-color:yellow;
            color:green;
            text-align:center;
            font-weight:bold;
            width:100%;
        }
        /* Event 参数 className 的值 */
        .doing:before {
            content:"【 未完成 】";
            background-color:yellow;
            color:red;
            text-align:center;
            font-weight:bold;
        }

    style>
head>
<body>
    <div id='top'>
        Language:
        <select id='lang-selector'>select>

    div>

    <div id='calendar'>div>

body>
<script src='jquery.min.js'>script>
<script src='moment.min.js'>script>
<script src='fullcalendar.min.js'>script>
<script src='lang-all.js'>script>
<script type="text/javascript">
    $(document).ready(function() {
        var initialLangCode = 'en';

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            weekends: true,
            weekMode: 'liquid',
            defaultView: 'month',
            allDayText: '全天',
            businessHours: true,
            defaultEventMinutes: 120,
            eventLimit: true,
            dayClick : function( date ) {
                //do something here...
                console.log('dayClick触发的时间为:', date.format());
                // ...
            },
            //设置是否可被单击或者拖动选择
            selectable: true,
            //点击或者拖动选择时,是否显示时间范围的提示信息,该属性只在agenda视图里可用
            selectHelper: true,
            //点击或者拖动选中之后,点击日历外的空白区域是否取消选中状态 true为取消 false为不取消,只有重新选择时才会取消
            unselectAuto: true,
            select: function( start, end ){
                //do something here...
                console.log('select触发的开始时间为:', start.format());
                console.log('select触发的结束时间为:', end.format());
                // ...
            },
            eventClick : function( event ){
                //do something here...
                console.log('eventClick中选中Event的id属性值为:', event.id);
                console.log('eventClick中选中Event的title属性值为:', event.title);
                console.log('eventClick中选中Event的start属性值为:', event.start.format('YYYY-MM-DD HH:mm'));
                console.log('eventClick中选中Event的end属性值为:', event.end.format('YYYY-MM-DD HH:mm'));
                console.log('eventClick中选中Event的color属性值为:', event.color);
                console.log('eventClick中选中Event的className属性值为:', event.className);
                // ...
            },
            eventMouseover : function( event ) {
                //do something here...
                console.log('鼠标经过 ...');
                console.log('eventMouseover被执行,选中Event的title属性值为:', event.title);
                // ...
            },
            eventMouseout : function( event ) {
                //do something here...
                console.log('eventMouseout被执行,选中Event的title属性值为:', event.title);
                console.log('鼠标离开 ...');
                // ...
            },
            //Event是否可被拖动或者拖拽
            editable: true,
            //Event被拖动时的不透明度
            dragOpacity: 0.5,
            eventDrop : function( event, dayDelta, revertFunc ) {
                //do something here...
                console.log('eventDrop --- start ---');
                console.log('eventDrop被执行,Event的title属性值为:', event.title);
                if(dayDelta._days != 0){
                    console.log('eventDrop被执行,Event的start和end时间改变了:', dayDelta._days+'天!');
                }else if(dayDelta._milliseconds != 0){
                    console.log('eventDrop被执行,Event的start和end时间改变了:', dayDelta._milliseconds/1000+'秒!');
                }else{
                    console.log('eventDrop被执行,Event的start和end时间没有改变!');
                }
                //revertFunc();
                console.log('eventDrop --- end ---');
                // ...
            },
            eventResize : function( event, dayDelta, revertFunc ) {
                //do something here...
                console.log(' --- start --- eventResize');
                console.log('eventResize被执行,Event的title属性值为:', event.title);
                if(dayDelta._days != 0){
                    console.log('eventResize被执行,Event的start和end时间改变了:', dayDelta._days+'天!');
                }else if(dayDelta._milliseconds != 0){
                    console.log('eventResize被执行,Event的start和end时间改变了:', dayDelta._milliseconds/1000+'秒!');
                }else{
                    console.log('eventResize被执行,Event的start和end时间没有改变!');
                }
                //revertFunc();
                console.log('--- end --- eventResize');
                // ...
            },
            events: [
                {
                    id: 1,
                    title: '这是一个all-day数据',
                    allDay: true,
                    start: '2016-08-11'
                },
                {
                    id: 2,
                    title: '开始时间为12PM',
                    start: '2016-08-11 12:00'
                },
                {
                    id: 3,
                    title: '给一点颜色',
                    start: '2016-08-11',
                    color: 'red'
                },
                {
                    id: 4,
                    title: '使用className:done',
                    start: '2016-08-10 09:00',
                    end: '2016-08-11 18:00',
                    color: 'blue',
                    className: 'done'

                },
                {
                    id: 5,
                    title: '使用className:doing',
                    start: '2016-08-11 09:00',
                    end: '2016-08-12 18:00',
                    color: 'green',
                    className: 'doing'

                },
                {
                    id: 6,
                    title: '使用URL和字体颜色',
                    start: '2016-08-11',
                    color: 'pink',
                    url: 'http://flovel.xyz',
                    className: 'doing',
                    textColor: 'black'
                },
                {
                    id: 7,
                    title: '使用backgroundColor和borderColor',
                    start: '2016-08-11 09:00',
                    end: '2016-08-12 18:00',
                    backgroundColor: 'gray',
                    borderColor: 'red',
                    className: 'done'

                },

            ]
        });

        //初始化语言选择的下拉菜单值
        $.each($.fullCalendar.langs, function(langCode) {
            $('#lang-selector').append(
                    $(')
                            .attr('value', langCode)
                            .prop('selected', langCode == initialLangCode)
                            .text(langCode)
            );
        });

        //当选择一种语言时触发
        $('#lang-selector').on('change', function() {
            if (this.value) {
                $('#calendar').fullCalendar('option', 'lang', this.value);
            }
        });
    });
script>
html>

查看原文

你可能感兴趣的:(Java,JavaScript)