基本使用-FullCalendar中文文档

helloweba.com 作者:月光光 时间:2017年10月19日 17:37 标签: fullcalendar  日历 

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='fullcalendar.css' />
<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/

0条评论

顶部 反馈 二维码 底部
扫一扫

扫描二维码用手机看文章