Log In | Users | Register
Welcome, Registration, and other StartingPoints; Foswiki history & Wiki style; All the docs...
spacer
Edit | Attach | New | Raw | Delete | History | Diff | Print | Pdf | Subscribe | Tools
You are here: System » JQueryPlugin » JQueryFullCalendar

JQueryFullCalendar

Homepage: 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: default

Example: async

JavaScript initialisation

More...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: 'Apr 20 2024',
    allDay: true
  },
  {
    id: 2,
    title: 'Workingday',
    start: 'Apr 20 2024 08:30:00',
    end: 'Apr 20 2024 15:00:00',
    allDay: false
  }
]

spacer
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Wiki? Send feedback
Syndicate this site RSS ATOM