| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <!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>
- var date = new Date();
- var d = date.getDate();
- var m = date.getMonth();
- var y = date.getFullYear();
- $(document).ready(function() {
- $('#calendar').fullCalendar({
- //year: 2011,
- //month: 2,
- //date: 1,
- /*
- //previous bug, should NOT be march
- year: 2009,
- month: 1,
- date: 15,
- */
- //defaultView: 'dayGridMonth',
- selectable: true,
- selectMirror: true,
- //weekends: false,
- height: 700,
- //contentHeight: 500,
- //aspectRatio: 2,
- header: {
- left: 'title',
- center: 'month,week,dayGridWeek,day,dayGridDay',
- right: 'today prevYear,prev,next,nextYear'
- },
- editable: true,
- dragRevertDuration: 100,
- //allDaySlot: false,
- allDayText: 'ALLDAY',
- firstHour: 10,
- slotMinutes: 15,
- defaultEventMinutes: 45,
- //allDayDefault: false,
- /*
- titleFormat: {
- month: "'hey!'"
- },
- */
- columnHeaderFormat: {
- month: "dddd"
- //timeGrid: "ddd M/d!!!" // BUG: this wont work. timeGrid doesn't override our default for 'week'
- },
- timeFormat: "h(:mm)[T]{ - h(:mm)T}",
- //timeFormat: { week: "'YO'" },
- minTime: 5,
- maxTime: '10:45pm',
- //dayClick: function(date) {
- // console.log(date);
- //},
- //dir: 'rtl',
- eventColor: 'green',
- eventTextColor: 'yellow',
- eventBorderColor: 'black',
- //eventBackgroundColor: 'red',
- events: [
- {
- title: 'All Day Event',
- start: new Date(y, m, 1),
- color: 'gray',
- //backgroundColor: 'red',
- textColor: 'white',
- borderColor: '#000'
- },
- {
- 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
- },
- {
- id: 777,
- 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>
- </head>
- <body style='font-size:12px'>
- <div id='calendar' style='width:70%;margin:20px auto 0;font-family:arial'></div>
- </body>
- </html>
|