fullcalendar 官网API 原文
从给定的文件内容中,我们可以提取出关于FullCalendar的几个关键知识点,以下是详细说明: ### FullCalendar基础使用 **引入必要的JavaScript和CSS文件:** 要将日历嵌入到网页中,首先需要确保引入了正确的JavaScript和CSS文件。必须包含FullCalendar的样式表`fullcalendar.css`以及FullCalendar和jQuery的JS文件。代码示例如下: ```html <link rel='stylesheet' type='text/css' href='fullcalendar.css'/> <script type='text/javascript' src='jquery.js'></script> <script type='text/javascript' src='fullcalendar.js'></script> ``` 如果打算进行拖拽或调整大小的日历操作,还需要包含一些额外的jQuery UI文件。 **初始化日历:** 在包含页面依赖之后,需要编写JavaScript代码来初始化日历。初始化代码应该在文档加载完成后执行,最佳做法是使用jQuery的`$(document).ready()`。示例代码如下: ```javascript $(document).ready(function(){ // 页面已准备就绪,初始化日历 $('#calendar').fullCalendar({ // 在这里放置选项和回调 }); }); ``` 初始化代码应该放在页面`<head>`中的`<script>`标签里。上述代码依赖于页面`<body>`中有一个id为"calendar"的元素。日历将被放置在该`div`元素内部。 **无事件的日历显示:** 如果你只是想显示一个空白的日历(基于月份,但没有事件),按照上述步骤操作后,你应该会看到一个没有事件的月视图日历。 ### FullCalendar的选项和回调 **选项(Options):** FullCalendar文档大多数描述的是影响日历外观或行为的选项。选项通常在初始化日历时设置。例如,隐藏周六和周日可以通过以下代码实现: ```javascript $('#calendar').fullCalendar({ weekends: false // 将隐藏周六和周日 }); ``` **回调(Callbacks):** 回调函数类似于选项,但它们是在特殊事件发生时被调用的函数。以下示例展示了如何在用户点击某一天时弹出一个警告框: ```javascript $('#calendar').fullCalendar({ dayClick: function(){ alert('点击了某一天!'); } }); ``` ### FullCalendar的方法 **方法(Methods):** 方法提供了一种从JavaScript代码操作日历的方式。方法作用于已经初始化的jQuery对象上的日历,并且使用熟悉的fullCalendar命令,但方式完全不同。以下是一个调用`next`方法,强制日历移动到下一个月份/周/天的示例: ```javascript $('#calendar').fullCalendar('next'); ``` ### FullCalendar的通用显示设置 **头部显示(General Display header):** 这部分内容被截断,但通常,FullCalendar允许你定义日历顶部的按钮和标题。这是通过配置日历初始化时的选项来实现的。 ### 总结 通过文档内容,我们可以了解到FullCalendar是一个用于网页的JavaScript日历库,它依赖于jQuery和其样式表来展现。初始化它需要适当的HTML结构和JavaScript代码。FullCalendar提供了丰富的选项来定制日历的外观和行为,同时也有回调函数来响应用户的交互事件。除此之外,FullCalendar还提供了各种方法来从JavaScript代码中动态操作日历。对于想要深入学习如何显示事件、自定义日历头部和其他高级功能的开发者,FullCalendar的官方文档将是一个宝贵的学习资源。
剩余81页未读,继续阅读
- xiaomachangjiang2018-03-14谢谢分享,值得收藏
- thinks_20062014-09-08好东西啊, 和官网一样,PDF格式非常方便平时查阅!
- owandering2015-04-08好东西,项目开发用到这个插件,全靠文档了
- lyj20045022014-04-25和官网一样啊!好东西!
- 粉丝: 6
- 资源: 5
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助