Log in

System

You are here: System » JQFullCalendarPlugin

JQFullCalendarPlugin

22 January 2024 - 05:54 | Version 5 |
FullCalendar widget for Foswiki

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://fullcalendar.io/
Author(s): Adam Shaw
Version: 5.11.2

Syntax

A calendar is rendered using the %FULLCALENDAR macro. All parameters are converted to HTML5 data and forwarded to the fullcalendar jquery library. Only exception is the id="..." parameter which may be specified to give the resulting container that holds the calendar a proper css id attribute. This id can then be used to further configure the calendar beyond what is possible via HTML5 data in a dynamic fassion.

See https://fullcalendar.io/docs for a full list of all possible parameters.

A note about the naming conventions: there are three notations of the same parameter when using HTML5 data:

  1. the original fulllcalendar parameter uses keys like firstDay
  2. the same parameter for %FULLCALENDAR is called first_day
  3. in HTML5 data this is data-first-day. these are created automatically during initialization.

So basically whenever when you read the docs at fullcalendar.io you need to translate parameter names along these lines.

Examples

You type: 

%FULLCALENDAR%

You get:

You type: 

%FULLCALENDAR{
   "mycal"
   editable="true"
   first_day="1"
   initial_view="timeGridWeek"
   events="%SCRIPTURLPATH{"view"}%/%BASEWEB%/%BASETOPIC%?section=json-events&skin=text&contenttye=text/json"
}%
%ADDTOZONE{"script" topic="%WEB%.%TOPIC%" section="init" requires="JQUERYPLUGIN::FULLCALENDAR, JQUERYPLUGIN::PNOTIFY"}%
%JQREQUIRE{"pnotify"}%

You get:

JavaScript initialisation 

%STARTSECTION{"init"}%
<literal>
<script>
jQuery(function($) {
    $('#mycal').livequery(function() {
      var calendar = $(this).data("calendar");

      calendar.setOption("eventDragStop", function(info) {
         var ev = info.event;
         console.log("ev=",ev);
         $.pnotify({
            title: "Drag Stop",
            text: `${ev.title} was dragged. id=${ev.id}, start=${ev.start}, end=${ev.end}`
         });
      });

      calendar.setOption("eventResize", function(info) {
         var ev = info.event;
         console.log("ev=",ev);
         $.pnotify({
            title: "Resize",
            text: `${ev.title} was resized. id=${ev.id}, start=${ev.start}, end=${ev.end}`
         });
      });

      calendar.setOption("eventClick", function(info) {
         var ev = info.event;
         console.log("ev=",ev);
         $.pnotify({
            title: "Click",
            text: `${ev.title} was clicked. id=${ev.id}, start=${ev.start}, end=${ev.end}`
         });
      });
   });
});
</script>
</literal>
%ENDSECTION{"init"}%

JSON events 

[
  {
    "id": 1,
    "title": "Event1",
    "start": "2024-05-17",
    "allDay": true
  },
  {
    "id": 2,
    "title": "Workingday",
    "start": "2024-05-17T08:30:00",
    "end": "2024-05-17T15:00:00",
    "allDay": false
  }
]

Dependencies

None

Change History

22 Jan 2024: updated fullcalendar js to 5.11.2
23 Aug 2022: updated documentation and example
04 May 2022: updated fullcalendar js to latest upstream; added full locale support
26 Mar 2010: initial release, externalized from Foswiki:Extensions/JQueryPlugin
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 Middle Fork Home Wiki? Send feedback
Syndicate this site RSS