|
|
|
|
JQueryFullCalendarHomepage: http://arshaw.com/fullcalendar/Author(s): Adam Shaw Version: 1.4.3 FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). Example: defaultExample: asyncJavaScript initialisationMore...Close%STARTSECTION{"init"}% <literal> <script type='text/javascript'> jQuery(function($) { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); $('#calendar1').fullCalendar({ theme: true, header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, firstDay: 1, 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/' } ] }); $('#calendar2').fullCalendar({ theme: true, editable: true, firstDay: 1, defaultView: 'agendaWeek', events: '%SCRIPTURLPATH{"view"}%/%BASEWEB%/%BASETOPIC%?section=json-events;skin=text', header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, eventDragStop: function(calEvent, jsEvent, ui, view) { alert(calEvent.title + ' was dragged\n' + 'id=' + calEvent.id + '\n' + 'start=' + calEvent.start + '\n' + 'end='+calEvent.end); }, eventResize: function(calEvent, jsEvent, ui, view) { alert(calEvent.title + ' was resized\n' + 'id=' + calEvent.id + '\n' + 'start=' + calEvent.start + '\n' + 'end='+calEvent.end); }, eventClick: function(calEvent, jsEvent, view) { alert(calEvent.title + ':\n' + 'id=' + calEvent.id + '\n' + 'start=' + calEvent.start + '\n' + 'end='+calEvent.end); }, loading: function(bool) { if (bool) { $('#loading').show(); } else { $('#loading').hide(); } }, timeFormat: { // for agendaWeek and agendaDay agenda: 'H:mm{ - H:mm}', // for all other views '': 'h(:mm)' }, columnFormat: { month: 'ddd', week: 'ddd d', day: 'dddd d' }, axisFormat: 'H:mm' }); }); </script> </literal> %ENDSECTION{"init"}% JSON events[ { id: 1, title: 'Event1', start: 'Nov 05 2024', allDay: true }, { id: 2, title: 'Workingday', start: 'Nov 05 2024 08:30:00', end: 'Nov 05 2024 15:00:00', allDay: false } ] |