FullCalendar应用解析

来源：互联网发布：武汉网络中控机编辑：程序博客网时间：2024/05/22 14:23

最新在网上看到一款关于FullCalendar日历开源项目，可以用日历的形式直观的展示了日程安排、代办事宜等事件。是一款功能强大的开源项目。因为项目需要所以就研究了一下FullCalendar的用法和原理，感觉效果挺不错的所以拿来分享分享。

运行界面：

这里直接上代码，在代码中讲解FullCalendar日历的用法：

<!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例子下载：点击打开链接

如果有什么不清楚或者有啥疑问意见可以加我QQ/微信 208017534 ，欢迎一起交流一起进步。

0 0