| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset='utf-8' />
- <link href='../../dist/fullcalendar.css' rel='stylesheet' />
- <link href='../../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
- <script src='../../node_modules/moment/moment.js'></script>
- <script src='../../node_modules/jquery/dist/jquery.js'></script>
- <script src='../../dist/fullcalendar.js'></script>
- <script>
- $(document).ready(function() {
- var count = 0;
- var intervalID;
- $('#start').on('click', start);
- $('#stop').on('click', stop);
- function start() {
- initCalendar();
- intervalID = setInterval(function() {
- destroyCalendar();
- initCalendar();
- if (count > 100) {
- stop();
- }
- count++;
- }, 200);
- }
- function stop() {
- if (intervalID) {
- clearInterval(intervalID);
- intervalID = null;
- }
- destroyCalendar();
- }
- function initCalendar() {
- $('#calendar').fullCalendar({
- headerToolbar: {
- left: 'prev,next today',
- center: 'title',
- right: 'month,week,day'
- },
- initialDate: '2014-06-12',
- initialView: 'dayGridMonth', // week
- editable: true,
- selectable: true,
- droppable: true,
- events: [
- {
- title: 'All Day Event',
- start: '2014-06-01'
- },
- {
- title: 'Long Event',
- start: '2014-06-07',
- end: '2014-06-10'
- },
- {
- groupId: 999,
- title: 'Repeating Event',
- start: '2014-06-09T16:00:00'
- },
- {
- groupId: 999,
- title: 'Repeating Event',
- start: '2014-06-16T16:00:00'
- },
- {
- title: 'Meeting',
- start: '2014-06-12T10:30:00',
- end: '2014-06-12T12:30:00'
- },
- {
- title: 'Lunch',
- start: '2014-06-12T12:00:00'
- },
- {
- title: 'Birthday Party',
- start: '2014-06-13T07:00:00'
- },
- {
- title: 'Click for Google',
- url: 'http://google.com/',
- start: '2014-06-28'
- }
- ]
- });
- }
- function destroyCalendar() {
- $('#calendar').fullCalendar('destroy');
- }
- });
- </script>
- <style>
- body {
- margin: 0;
- padding: 0;
- font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
- font-size: 14px;
- }
- #calendar {
- width: 900px;
- margin: 40px auto;
- }
- </style>
- </head>
- <body>
- <button id='start'>START</button>
- <button id='stop'>STOP</button>
- <div id='calendar'></div>
- </body>
- </html>
|