JQueryFullCalendar

%JQPLUGINS{"fullcalendar" format=" Homepage: $homepage
Author(s): $author
Version: $version " }%

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

%JQREQUIRE{"fullcalendar"}% %ADDTOZONE{"body" topic="System.JQueryFullCalendar" section="init" requires="JQUERYPLUGIN::FULLCALENDAR"}%

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


This topic: System > JQueryPlugin > JQueryFullCalendar
Topic revision: r2 - 2010-02-20 - 07:59:58 - AdminUser
 
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 STALklubben? Send feedback