详情请参考以下代码
<!DOCTYPE html>
<html> <head>
<title>利用Jquery和fullCalendar制作日程表</title>
<!--FullCalendar CSS-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<!--jQuery/jQuery-ui/moment-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script>
<!--FullCalendar/本地脚本js-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/locale/zh-cn.js'></script>
<script type="text/javascript">
/*
jQuery载入
*/ $(document).ready(function() {
/**
* 定义date，d，m,y
*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear(); /**
* 初始化fullCalendar，便于后续其他js的调用
*/
var calendar = $('#calendar').fullCalendar({
/**
* head参数
*/
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
/**
* [defaultView 默认视图]
*/
defaultView: 'agendaWeek',
/**
* [selectable 是否可选]
*/
selectable: true,
selectHelper: true, select: function(start, end, allDay) {
/*
after selection user will be promted for enter title for event.
*/
var title = prompt('标题:');
/*
if title is enterd calendar will add title and event into fullCalendar.
*/
if (title) {
calendar.fullCalendar('renderEvent', {
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
/*
editable: true allow user to edit events.
*/
editable: true,
/*
events is the main option for calendar.
for demo we have added predefined events in json object.
*/
events: [{
title: '测试1',
start: new Date(y, m, 1)
}, {
title: '测试2',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2)
}, {
id: 999,
title: '测试3',
start: new Date(y, m, d - 3, 16, 0),
allDay: false
}, {
id: 999,
title: '测试4',
start: new Date(y, m, d + 4, 16, 0),
allDay: false
}, {
title: '测试5',
start: new Date(y, m, d, 10, 30),
allDay: false
}, {
title: '测试6',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
}, {
title: '测试7',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false
}, {
title: '测试8',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://www.baidu.com/'
}]
}); });
</script>
<style type="text/css">
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
} #calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head> <body>
<!-- 定义一个容器 -->
<div id='calendar'></div>
</body> </html>