基本使用-FullCalendar中文文档

King

FullCalendar的使用非常简单，首先需要获取Fullcalendar，可以使用npm安装，或者引入cdn资源，或者下载到本地再引入。然后就可以按照文档接口调用建立属于自己的日历。

获取Fullcalendar

我们提供三种方式获取Fullcalendar。

1、使用NPM安装Fullcalendar。

$ npm install fullcalendar

知识兔

2、官方提供了稳定的CNDJS资源，直接可以引入：

https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.js
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.print.css

知识兔

3、下载Fullcalendar到本地并引入。官方下载地址：https://fullcalendar.io/download/

<link rel='stylesheet' type='text/css' href="https://zhishitu.com" />
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='fullcalendar.js'></script>

知识兔

调用Fullcalendar

首先在<body>之间你想放置Fullcalendar的位置添加一个#calendar的div元素。

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

知识兔

然后在页面最后的<script>标签里添加如下代码：

$(document).ready(function() {
    // 页面加载完毕，初始化Canlendar
    $('#calendar').fullCalendar({
        // 你的选项配置和回调函数
    });
});

知识兔

最后保存打开页面，你就可以看到一个空的日程表，上面没有任何日程，请看Demo演示，添加日程的方法我们会在后续章节中讲到。

选项设置(Options)

FullCalendar的大部分文档都在讲日程表的“呈现”和“行为”，通常在初始化的时候配置FullCalendar，例如：

$('#calendar').fullCalendar({
    weekends: false // 隐藏周六和周日
});

知识兔

回调函数(Callbacks)

回调函数和配置有几分相似，执行某些操作的时候会触发回调。下面的例子中，用户点击日程表的某一天，会弹出一个警告提示：

$('#calendar').fullCalendar({
    dayClick: function() {
        alert('a day has been clicked!');
    }
});

知识兔

方法(Methods)

“方法”是用来操作日程表的，直接使用fullCalendar命令可以调用方法，下面的例子会让日程表切换到下一个月/周/日视图：

$('#calendar').fullCalendar('next');

知识兔

官方英文文档地址：https://fullcalendar.io/docs/usage/

。

计算机

2022年3月13日