事件日历控件是 Web 应用中常见的一个组件，它可以让用户浏览某一周、某一月、某一年内的事件安排，同时也可以添加、编辑、删除事件。使用 Material Design 风格的事件日历控件可以提升网站的用户体验，本文将介绍如何使用 Material Design 风格的事件日历控件并提供示例代码。
Material Design 风格的事件日历控件
当下，Material Design 已经成为 Android 和 Web 设计界的主流，它提供了一套清爽简洁、具有层次感的设计语言。Material Design 风格的事件日历控件与其它的事件日历控件相比，具有以下特点：
- 采用 Material Design 风格的设计语言，简洁、清晰。
- 支持事件快速添加、编辑和删除，用户可以直接在日历控件中进行操作。
- 支持不同的日历视图（月视图、周视图、日视图等），用户可以快速浏览事件。
- 支持事件的颜色分类，用户可以通过视觉感知区分不同类型的事件。
使用 Material Design 风格的事件日历控件
下面我们就来一步步使用 Material Design 风格的事件日历控件。我们使用的是一个名为 FullCalendar 的库，它是一个基于 jQuery、Moment.js 和 Hammer.js 的开源事件日历控件库。它支持更多的配置和扩展，并且它有强大的文档和社区支持。
下载和引入 FullCalendar 库
我们可以到 FullCalendar 官网 下载 FullCalendar 库，然后将它的 CSS 和 JS 文件引入我们的网页中。
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css' /> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js'></script>
初始化 FullCalendar 控件
我们需要在 HTML 中准备一个占位置的 DIV 元素，并在 JavaScript 中初始化 FullCalendar 控件。
<div id='calendar'></div>
$(document).ready(function() { $('#calendar').fullCalendar({ // 控件配置参数 }); });
在上面的初始化代码中，我们通过 fullCalendar() 函数创建了一个 FullCalendar 控件，并传入一些配置参数。
配置 FullCalendar 控件
FullCalendar 控件的配置参数非常多，我们这里只介绍一些常用的配置参数。完整的配置参数列表请参考 FullCalendar 的文档。
-- -------------------- ---- ------- ----------------------------- -- ----------- -------------------------- ----- ----- ------------ -------- -- --------------- ------- -------- -- ------ ------- - -- ------- ----- ---------- ------- -- ----- ------- -------- -- ----- ------ ---------------------------- -- -- --------- ------------ ------------- -- ------ ------- - - ------ ------ ------ ---------------------- ---- ---------------------- ------ --------- -- - ------ ------ ------ ---------------------- ---- ---------------------- ------ --------- -- -- ------- -- -- ------------------- --------- -------------- -------- ----- - -- ------------ -- -- ---------------- ----------- ------------------ -------- ----- - -- ------------- - ---展开代码
在上面的配置参数中，我们设置了默认的视图类型为 month（月视图），默认的日期为 2018-03-12，事件数据来源为一个数组，还设置了日历头的显示和点击日历上日期和事件的行为。
弹出对话框，添加、编辑和删除事件
FullCalendar 控件只提供了日历的显示和事件数据的操作接口，我们需要自己实现添加、编辑和删除事件的操作。一般来说，我们可以在 dayClick 和 eventClick 事件中添加对话框（如 Bootstrap 的 Modal）来完成这些操作。
-- -------------------- ---- ------- ----------------------------- -- ---------------- --------- -------------- -------- ----- - -- ------------ --------------------------- ----- ---- --- -- -- ---------------- ----------- ------------------ -------- ----- - -- ------------- ---------------------------- ----- ---- --- - ---展开代码
在上面的代码中，我们分别为 dayClick 和 eventClick 事件绑定了一个弹出对话框的操作。我们需要自己实现对话框的 HTML 和 JavaScript 代码，用于展示、编辑和删除事件数据。
示例代码
下面是一个完整的示例代码，通过它我们可以更好地了解如何使用 Material Design 风格的事件日历控件。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- --------------- -- ----- ---------------- -------------------------------------------------------------------------------------- -- ----- ---------------- ------------------------------------------------------------------------------------------- -- ------- --------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------- ------- ---------------------------------------------------------------------------------------------- ------- -------------------------------------------------------------------------------------------------- ------- ------ ---- ------------------ ------------ ------ -------------- ---- -------------------- ------ ---- ------- --- ---- ------------ ----- ------------------ ------------- ------------- ------------------------------------ ------------------- ---- -------------------- ---------------- ---- ---------------------- ------ ---- --------------------- --- ------------------- --------------------------------- ------- ------------- ------------- -------------------- ------------------- ----- --------------------------------- --------- ------ ---- ------------------- ---- ------------------- ------ ----------------------------- ------ ----------- -------------------- --------------- --------------------- --------- ------ ---- ------------------- ------ ----------------------------- ------ --------------------- -------------------- --------------- --------- ------ ---- ------------------- ------ --------------------------- ------ --------------------- -------------------- ------------- --------- ------ ------ ---- --------------------- ------- ------------- ---------- -------------- -------------------------------- ------- ------------- ---------- ------------------------ ------ ------- ------ ------ ------ ---- ------- --- ---- ------------ ----- ------------------- ------------- ------------- ------------------------------------- ------------------- ---- -------------------- ---------------- ---- ---------------------- ------ ---- --------------------- --- ------------------- ---------------------------------- ------- ------------- ------------- -------------------- ------------------- ----- --------------------------------- --------- ------ ---- ------------------- ---- ------------------- ------ ----------------------------- ------ ----------- -------------------- --------------- --------------------- --------- ------ ---- ------------------- ------ ----------------------------- ------ --------------------- -------------------- --------------- --------- ------ ---- ------------------- ------ --------------------------- ------ --------------------- -------------------- ------------- --------- ------ ------ ---- --------------------- ------- ------------- ---------- -------------- -------------------------------- ------- ------------- ---------- ------------------------ ------- ------------- ---------- ----------------------- ------ ------- ------ ------ ------ -------- ---------------------------- - ----------------------------- ------------ -------- ------- -------- ------- - ----- ---------- ------- ------- -------- ------ ---------------------------- -- ------------ ------------- ------- - - ------ ------ ------ ---------------------- ---- ---------------------- ------ --------- -- - ------ ------ ------ ---------------------- ---- ---------------------- ------ --------- -- -- ------- -- --------- -------------- -------- ----- - --------------------------- ----- ---- --- -- ----------- ------------------ -------- ----- - ---------------------------- ----- ---- --- - --- --- --------- ------- -------展开代码
结束语
Material Design 风格的事件日历控件提供了一种更加清晰、简洁、易用的用户体验。通过使用 FullCalendar 库，我们可以快速构建一个高质量的事件日历控件，并且它具有很好的可扩展性和社区支持。在使用过程中，我们需要注意各种配置参数和事件回调函数的使用，以及实现对话框的展示、编辑和删除事件的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bd847ca231b2b7ed00d338
