最新在网上看到一款关于FullCalendar日历开源项目，可以用日历的形式直观的展示了日程安排、代办事宜等事件。是一款功能强大的开源项目。因为项目需要所以就研究了一下FullCalendar的用法和原理，感觉效果挺不错的所以拿来分享分享。
运行界面：
这里直接上代码，在代码中讲解FullCalendar日历的用法：
代码语言：javascript复制<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>FullCalendar应用</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css">
<link rel="stylesheet" type="text/css" href="css/fancybox.css">
<script src='js/jquery-1.9.1.js'></script>
<script src='js/jquery-ui.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/jquery.fancybox-1.3.1.pack.js'></script>
<style type="text/css">
#calendar{width:960px; margin:20px auto 10px auto}
.fancy{width:450px; height:auto}
.fancy h3{height:30px; line-height:30px; border-bottom:1px solid #d3d3d3; font-size:14px}
.fancy form{padding:10px}
.fancy p{height:28px; line-height:28px; padding:4px; color:#999}
.input{height:20px; line-height:20px; padding:2px; border:1px solid #d3d3d3; width:100px}
.btn{-webkit-border-radius: 3px;-moz-border-radius:3px;padding:5px 12px; cursor:pointer}
.btn_ok{background: #360;border: 1px solid #390;color:#fff}
.btn_cancel{background:#f0f0f0;border: 1px solid #d3d3d3; color:#666 }
.btn_del{background:#f90;border: 1px solid #f80; color:#fff }
.sub_btn{height:32px; line-height:32px; padding-top:6px; border-top:1px solid #f0f0f0; text-align:right; position:relative}
.sub_btn .del{position:absolute; left:2px}
</style>
<script type="text/javascript">
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true,
events: [
{
title: 'All Day Event',
start: '2016-04-01'
},
{
title: 'Long Event',
start: '2016-04-07',
end: '2016-04-08'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-04-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-04-16T16:00:00'
},
{
title: 'Conference',
start: '2016-04-11',
end: '2016-04-13'
},
{
title: 'Meeting',
start: '2016-04-12T10:30:00',
end: '2016-04-12T12:30:00'
},
{
title: 'Lunch',
start: '2016-04-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-04-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-04-12T17:30:00'
},
{
title: 'Dinner',
start: '2016-04-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2016-04-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-04-28'
}
],
select: function(start, end, allDay) {//选择事件
alert("你select的了一下子");
},
//拖动事件
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
alert("你eventDrop的了一下子");
},
eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
alert("你eventResize的了一下子");
},
//日期点击事件
eventClick: function(calEvent, $event){
alert("你点击了一下日期");
},
});
});
</script>
</head>
<body>
<div id="main" style="width:1060px">
<div id='calendar'></div>
</div>
</body>
</html>这个日期的数据是本地数据，如果大家想要和服务器连接起来可以使用ajax请求服务器，将服务器返回值设置成json格式。再利用ajax解析获取数据。需要注意的是资源文件中css，js不能随便更改不然会发生很不好的事情。Demo例子下载： 点击打开链接
