| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- <!DOCTYPE html>
- <html>
- <head>
- <link href='../../dist/fullcalendar.css' rel='stylesheet' />
- <link href='../../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
- <script src='../../node_modules/jquery/dist/jquery.js'></script>
- <script src='../../node_modules/moment/moment.js'></script>
- <script src='../../dist/fullcalendar.js'></script>
- <script>
- $(document).ready(function() {
- var date = new Date();
- var d = date.getDate();
- var m = date.getMonth();
- var y = date.getFullYear();
- $('#calendar').fullCalendar({
- headerToolbar: {
- left: 'prev,next today',
- center: 'title',
- right: 'dayGridMonth,week,dayGridWeek,day,dayGridDay'
- },
- footerToolbar: {
- left: 'prev,next today',
- center: 'title',
- right: 'dayGridMonth,week,dayGridWeek,day,dayGridDay'
- },
- 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)
- },
- {
- groupId: 999,
- title: 'Repeating Event',
- start: new Date(y, m, d-3, 16, 0),
- allDay: false
- },
- {
- groupId: 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, 5),
- end: new Date(y, m, d, 14, 43),
- 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/'
- }
- ],
- fixedWeekCount: false,
- height: '100%'
- });
- });
- </script>
- <style>
- html, body {
- margin: 0;
- padding: 0;
- height: 100%;
- }
- body {
- position: relative;
- font-size: 14px;
- font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
- }
- #calendar-wrap {
- position: absolute;
- top: 20px;
- right: 20px;
- bottom: 20px;
- left: 20px;
- }
- </style>
- </head>
- <body>
- <div id='calendar-wrap'>
- <div id='calendar'></div>
- </div>
- </body>
- </html>
|