fullCalendar日历控件的使用总结

最新推荐文章于 2024-07-26 08:00:00 发布

qq_15704535

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/qq_15704535/article/details/45219421

版权

本文详细介绍了如何使用fullCalendar日历控件，包括配置选项如header、默认日期、语言设置、事件处理等，并提供了具体的HTML和JavaScript代码示例，帮助开发者实现日程展示和交互功能。

摘要由CSDN通过智能技术生成

因为项目需求，用了三天时间研究这个控件，改写成自己想要的。总结如下：

官方文档 http://fullcalendar.io/docs/

说明文档 http://blog.csdn.net/zhenyuanjie/article/details/16984065

视频教程 http://www.verycd.com/topics/2782321/

日程例子http://www.verycd.com/topics/2782321/

我自己写的例子：（本人不需要拖拽功能）

html页面如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <link rel='stylesheet' href='css/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    <link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
    <link href='css/test.css' rel='stylesheet'/>
    <script src='js/moment.min.js'></script>
    <script src='js/jquery.min.js'></script>
    <script src='js/fullcalendar.min.js'></script>
    <script src='js/lang-all.js'></script>
    <script>
$(document).ready(function() {
    var currentLangCode = 'zh-cn';
    $('#calendar').fullCalendar({
        theme: true,
        //主题
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        defaultDate: '2015-04-21',
        lang: currentLangCode,
        buttonIcons: {
            prev: 'circle-triangle-w',
            next: 'circle-triangle-e'
        },
        weekNumbers: true,
        editable: true,
        eventLimit: false,
        views: {
            agenda: {
                eventLimit: 1
            }
        },
        selectable: false,
        selectHelper: false,
        events: [{
            title: '41事件',
            start: '2015-04-01'
        },
        {
            title: '422事件',
            start: '2015-04-22',
            url: 'http://www.baidu.com/'
        },
        {
            title: '412-1事件',
            start: '2015-04-12'
        },
        {
            title: '412-2事件',
            start: '