好用的日历、日程插件-fullcalendar

朱雀 2022-11-18 13:35 780阅读 0赞

### 好用的日历、日程插件-fullcalendar ###

*  官网
 *   *  使用标签初始化
     *  使用ES6构建系统进行初始化
     *  设置中文

# 官网 #

[https://fullcalendar.io/][https_fullcalendar.io]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQ4NTkw_size_16_color_FFFFFF_t_70]

## 使用标签初始化 ##

首先，通过fullcalendar以下方式之一获取标准捆绑包：

下载：[fullcalendar-5.6.0.zip][]  
CDN： [jsdelivr][]  
NPM： npm install fullcalendar

(可以直接下载[fullcalendar-5.6.0.zip][]代码里面有demo可以进行参考)

然后，编写以下初始化代码：

<!DOCTYPE html>
    <html lang='en'>
      <head>
        <meta charset='utf-8' />
        <link href='fullcalendar/main.css' rel='stylesheet' />
        <script src='fullcalendar/main.js'></script>
        <script>
    
          document.addEventListener('DOMContentLoaded', function() { 
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, { 
              initialView: 'dayGridMonth'
            });
            calendar.render();
          });
    
        </script>
      </head>
      <body>
        <div id='calendar'></div>
      </body>
    </html>

## 使用ES6构建系统进行初始化 ##

对于非平凡的项目，建议使用与ES6兼容的构建系统（如Webpack或Rollup）以及程序包管理器（如NPM或Yarn）。这样的设置将确保所有必需的文件一起编译到一个统一的捆绑软件中。您无需担心

您的构建系统将需要知道如何处理CSS文件。这是因为fullcalendar核心和许多插件都导入了自己的样式表。对于Webpack，可以使用css-loader。

首先，使用NPM或Yarn安装core软件包以及计划使用的任何插件：

npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list

然后，导入您的插件并将其提供给新Calendar实例：

import {  Calendar } from '@fullcalendar/core';
    import dayGridPlugin from '@fullcalendar/daygrid';
    import timeGridPlugin from '@fullcalendar/timegrid';
    import listPlugin from '@fullcalendar/list';
    ...
    let calendar = new Calendar(calendarEl, { 
      plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
      initialView: 'dayGridMonth',
      headerToolbar: { 
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,listWeek'
      }
    });
    ...

## 设置中文 ##

引入中文js文件

初始化时加入：locale:‘zh-cn’, 如下代码：

var calendar = new FullCalendar.Calendar(calendarEl, { 
                    headerToolbar: { 
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    },
                    editable: true,
                    locale: 'zh-cn',
                    droppable: true, // this allows things to be dropped onto the calendar

[https_fullcalendar.io]: https://fullcalendar.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQ4NTkw_size_16_color_FFFFFF_t_70]: /images/20221022/18bcdc3daaf048f3925f0c1d1fd12e0f.png
[fullcalendar-5.6.0.zip]: https://github.com/fullcalendar/fullcalendar/releases/download/v5.6.0/fullcalendar-5.6.0.zip
[jsdelivr]: https://www.jsdelivr.com/package/npm/fullcalendar