JQFullCalendarPlugin

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

JQFullCalendarPlugin

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:

the original fulllcalendar parameter uses keys like firstDay
the same parameter for %FULLCALENDAR is called first_day
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:

%FULLCALENDAR%

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:

%FULLCALENDAR{ "mycal" editable="true" first_day="1" initial_view="timeGridWeek" events="/Extensions/JQFullCalendarPlugin?section=json-events&skin=text&contenttye=text/json" }%

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

PackageForm edit

Author	Michael Daum
Version	3.03
Release	22 Jan 2024
Description	FullCalendar widget for Foswiki
Copyright	© 2009-2024 Michael Daum
License	GPL
Home	Foswiki:Extensions/JQFullCalendarPlugin
Support	Foswiki:Support/JQFullCalendarPlugin
Repository	https://github.com/foswiki/JQFullCalendarPlugin
ExtensionClassification	Interface and Visualisation, User interactivity
ExtensionType	PluginPackage
Compatibility
ImageUrl
DemoUrl	http://michaeldaumconsulting.com
SupportUrl	JQFullCalendarPlugin
ModificationPolicy	CoordinateWithAuthor

I	Attachment	Action	Size	Date	Who
md5	JQFullCalendarPlugin.md5	manage	183 bytes	22 Jan 2024 - 10:55	MichaelDaum
sha1	JQFullCalendarPlugin.sha1	manage	207 bytes	22 Jan 2024 - 10:55	MichaelDaum
tgz	JQFullCalendarPlugin.tgz	manage	485 K	22 Jan 2024 - 10:55	MichaelDaum
zip	JQFullCalendarPlugin.zip	manage	523 K	22 Jan 2024 - 10:55	MichaelDaum
EXT	JQFullCalendarPlugin_installer	manage	12 K	22 Jan 2024 - 10:55	MichaelDaum