fullcalendar 应用实践

导语

最近在做一个关于日程管理模块的功能，然后接触到了与日程相关的插件fullcalendar，这个插件功能还是挺强大的，这篇日志仅做记录用。

官网

英语好的小伙伴，直通车O(∩_∩)O哈哈~（ http://fullcalendar.io/）

准备工作

我先在官网上下载了fullcalendar 4.3.1 ，官网上还有npm下载等方式。

应用

1.将下载的压缩包解压，下载的文件里面包含了官网的demo和所需要引入的css和js。

2.然后将packages和vendor引入项目中

3.新建一个jsp文件，引入fullcalendar的css文件和js文件


4.在body中用一个dom作为calendar的容器

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

5.接下来在js中引入以下代码

document.addEventListener('DOMContentLoaded', function() {
    var Calendar = FullCalendar.Calendar;
    var calendarEl = document.getElementById('calendar');
    var calendar = new Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      editable: true,
      droppable: true, 
      drop: function(arg) {
        if (document.getElementById('drop-remove').checked) {
          arg.draggedEl.parentNode.removeChild(arg.draggedEl);
        }
      }
    });
    calendar.render();

  });

6.打开页面就能看到了

7.但是看到上面的文字都是英文，看起来不方便，所以在js中加上locale:'zh-cn',。
`
完整js为

 document.addEventListener('DOMContentLoaded', function() {
        var Calendar = FullCalendar.Calendar;
        var calendarEl = document.getElementById('calendar');
        var calendar = new Calendar(calendarEl, {
            plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
            customButtons: {
                addScheduleBtn: {
                    text: '新建日程',
                    click: function() {
                        layer.open({
                            type: 1,
                            area: '500px',
                            content: $('#addSchedule') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        });
                    }
                }
            },
            header: {
                left: 'prev,next today addScheduleBtn',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
			height: 'parent',
            locale:'zh-cn',
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar
            drop: function(arg) {
                // is the "remove after drop" checkbox checked?
                if (document.getElementById('drop-remove').checked) {
                    // if so, remove the element from the "Draggable Events" list
                    arg.draggedEl.parentNode.removeChild(arg.draggedEl);
                }
            }
        });
        calendar.render();

    });

最后的效果图