详情请参考以下代码
<!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>