TIP JQFullCalendarPlugin is not installed on Foswiki.org.

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

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:

%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": "2022-09-25",
    "allDay": true
  },
  {
    "id": 2,
    "title": "Workingday",
    "start": "2022-09-25T08:30:00",
    "end": "2022-09-25T15: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

PackageForm edit

Author Michael Daum
Version 3.01
Release 23 Aug 2022
Description FullCalendar widget for Foswiki
Copyright © 2009-2022 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 Comment
JQFullCalendarPlugin.md5md5 JQFullCalendarPlugin.md5 manage 183 bytes 23 Aug 2022 - 07:05 MichaelDaum  
JQFullCalendarPlugin.sha1sha1 JQFullCalendarPlugin.sha1 manage 207 bytes 23 Aug 2022 - 07:05 MichaelDaum  
JQFullCalendarPlugin.tgztgz JQFullCalendarPlugin.tgz manage 484 K 23 Aug 2022 - 07:05 MichaelDaum  
JQFullCalendarPlugin.zipzip JQFullCalendarPlugin.zip manage 522 K 23 Aug 2022 - 07:05 MichaelDaum  
JQFullCalendarPlugin_installerEXT JQFullCalendarPlugin_installer manage 12 K 23 Aug 2022 - 07:05 MichaelDaum  
Topic revision: r4 - 23 Aug 2022, MichaelDaum
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy