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

最新推荐文章于 2024-07-15 13:32:00 发布

落魄实习生

最新推荐文章于 2024-07-15 13:32:00 发布

阅读量1.4k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43548590/article/details/115659472

版权

前端专栏收录该内容

42 篇文章 1 订阅

订阅专栏

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

官网

官网

https://fullcalendar.io/
在这里插入图片描述

使用标签初始化

首先，通过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文件

<script src="js/plugins/fullcalendar/zh-cn.js"></script>

初始化时加入：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

落魄实习生

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
好用的日历、日程插件-fullcalendar

好用的日历、日程插件-fullcalendar官网使用标签初始化使用ES6构建系统进行初始化官网https://fullcalendar.io/使用标签初始化首先，通过fullcalendar以下方式之一获取标准捆绑包：下载：fullcalendar-5.6.0.zipCDN： jsdelivrNPM： npm install fullcalendar(可以直接下载fullcalendar-5.6.0.zip代码里面有demo可以进行参考)然后，编写以下初始化代码：<!DOCTY
复制链接

扫一扫

专栏目录