Search Close
Log inRegister

System

You are here: System » JQFullCalendarPlugin

JQFullCalendarPlugin

23 August 2022 - 07:04 | Version 1 |
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: 2.5.0

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-15",
    "allDay": true
  },
  {
    "id": 2,
    "title": "Workingday",
    "start": "2024-05-15T08:30:00",
    "end": "2024-05-15T15:00:00",
    "allDay": false
  }
]

Dependencies

None

Change History

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 Ütopya? Send feedback
This website is using cookies. More info. That's Fine