内容介绍
FullCalendar 是一个jQuery日历插件,它提供一个全尺寸,像事例中的拖拽日历。它使用 AJAX 来为每个月提取事件并轻松地配置为使用您自己资料的格式
核心代码:
复制代码代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
- <link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
- <script src='lib/jquery.min.js'></script>
- <script src='lib/jquery-ui.custom.min.js'></script>
- <script src='fullcalendar/fullcalendar.min.js'></script>
- <script>
-
- $(document).ready(function() {
-
- var date = new Date();
- var d = date.getDate();
- var m = date.getMonth();
- var y = date.getFullYear();
-
- var calendar = $('#calendar').fullCalendar({
- header: {
- left: 'prev,next today',
- center: 'title',
- right: 'month,agendaWeek,agendaDay'
- },
- selectable: true,
- selectHelper: true,
- select: function(start, end, allDay) {
- var title = prompt('Event Title:');
- if (title) {
- calendar.fullCalendar('renderEvent',
- {
- title: title,
- start: start,
- end: end,
- allDay: allDay
- },
- true // make the event "stick"
- );
- }
- calendar.fullCalendar('unselect');
- },
- editable: true,
- events: [
- {
- title: 'All Day Event',
- start: new Date(y, m, 1)
- },
- {
- title: 'Long Event',
- start: new Date(y, m, d-5),
- end: new Date(y, m, d-2)
- },
- {
- id: 999,
- title: 'Repeating Event',
- start: new Date(y, m, d-3, 16, 0),
- allDay: false
- },
- {
- id: 999,
- title: 'Repeating Event',
- start: new Date(y, m, d+4, 16, 0),
- allDay: false
- },
- {
- title: 'Meeting',
- start: new Date(y, m, d, 10, 30),
- allDay: false
- },
- {
- title: 'Lunch',
- start: new Date(y, m, d, 12, 0),
- end: new Date(y, m, d, 14, 0),
- allDay: false
- },
- {
- title: 'Birthday Party',
- start: new Date(y, m, d+1, 19, 0),
- end: new Date(y, m, d+1, 22, 30),
- allDay: false
- },
- {
- title: 'Click for Google',
- start: new Date(y, m, 28),
- end: new Date(y, m, 29),
- url: 'http://google.com/'
- }
- ]
- });
-
- });
-
- </script>
- <style>
-
- 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>
-