FullCalendar应用解析

林老师带你学编程

发布于 2022-11-30 10:29:23

1.8K0

发布于 2022-11-30 10:29: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例子下载：点击打开链接

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016-05-01，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax