JQFullCalendarPlugin

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

Syntax

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

%FULLCALENDAR%

%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"}%

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

Dependencies

Change History