Foswiki on GitHub is open for business! Next release meeting: Monday September 1, 1300Z

JQFullCalendarPlugin

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).

Source

Homepage: http://arshaw.com/fullcalendar/
Author(s): Adam Shaw
Version: 1.4.3

Example

Error: no such plugin fullcalendar

JavaScript initialisation

%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').stop().show();
        } else {
          $('#loading').stop().fadeOut();
        }
      },
      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: 'Aug 29 2014',
    allDay: true
  },
  {
    id: 2,
    title: 'Workingday',
    start: 'Aug 29 2014 08:30:00',
    end: 'Aug 29 2014 15:00:00',
    allDay: false
  }
]

Plugin Info

Author(s): Michael Daum
Copyright: 2009-2010 Michael Daum http://michaeldaumconsulting.com
License: GPL
Release: 0.1
Version: 6941 (2010-03-26)
Change History:  
26 Mar 2010: initial release, externalized from Foswiki:Extensions/JQueryPlugin
Dependencies:
NameVersionDescription
Foswiki::Plugins::JQueryPlugin>3.31Required
Home: Foswiki:Extensions/JQFullCalendarPlugin
Support: Foswiki:Support/JQFullCalendarPlugin
Topic revision: r2 - 25 Apr 2012, MichaelDaum
 
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. see CopyrightStatement. Creative Commons License