基本用法 – FullCalendar中文文档

FullCalendar中文文档目录

使用FullCalendar的第一步是引用CSS和Js文件:

<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>

如果需要使用dragging(拖拽)和resizing(改变大小,也就是改变日程时间)的话,需要引用额外的Jquery UI文件(详情看这里)。

最好在页面加载完成之后进行Calendar的初始化

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

上面的代码里面指定初始化一个 id=calendar 容器,所以必须在body中加入如下代码:

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

之后打开页面,你就可以看到一个空的日程表,上面没有任何日程,添加日程的方法详见: Google Calendar 和 Event Data 这两个章节

配置:

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

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


回调函数:

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

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

方法:

“方法”是用来操作日程表的,下面的例子会让日程表切换到下一个月、周或则日:

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

官方英文文档:http://arshaw.com/fullcalendar/docs/usage/



标签: ,

无觅相关文章插件,快速提升流量