FullCalendar应用解析

怼烎@ 2022-08-21 12:41 241阅读 0赞

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

**运行界面：**

![Center][]

**这里直接上代码，在代码中讲解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例子下载： [点击打开链接][Link 1]

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

**![Center 1][]**

[Center]: /images/20220724/df41bf2f1a9949ca9543856d69a6eb6d.png
[Link 1]: http://download.csdn.net/detail/linzhiqiang0316/9507730
[Link 2]: http://lib.csdn.net/base/5
[Center 1]: /images/20220724/210be530dfdb4fd3b216bca1b9f48824.png