JQFullCalendarPlugin < Extensions

You are here: Foswiki>Extensions Web>JQFullCalendarPlugin (25 Apr 2012, MichaelDaum) (raw view)

<!--
This topic is part of the documentation for JQFullCalendarPlugin and is
automatically generated from Subversion. You can edit it, but if you do,
please make sure the maintainer of the extension knows about your changes,
otherwise your edits might be lost the next time the topic is uploaded.

If you want to report an error in the topic, please raise a report at
http://foswiki.org/Tasks/JQFullCalendarPlugin
-->
---+ %TOPIC%

%STARTSECTION{"summary"}%
!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).
%ENDSECTION{"summary"}%

---++ Source 

Homepage: http://arshaw.com/fullcalendar/ %BR%
Author(s): Adam Shaw %BR%
Version: 1.4.3 


---++ Example
%JQREQUIRE{"fullcalendar"}%
%ADDTOZONE{"body" topic="%WEB%.%TOPIC%" section="init" requires="JQUERYPLUGIN::FULLCALENDAR"}%

<div id='loading' class="foswikiTipMessage" style='display:none;position:absolute;top:5px;right:5px;'>
  loading...
</div>
<div id="calendar2" style="width:650px"></div>


---++ !JavaScript initialisation
%TWISTY%
<verbatim class="tml">
%STARTSECTION{"init"}%
<literal>
<script type='text/javascript'>
jQuery(function($) {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar1').fullCalendar({
      theme: true,
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      firstDay: 1,
      editable: true,
      events: [
        {
          title: 'All Day Event',
          start: new Date(y, m, 1)
        },
        {
          title: 'Long Event',
          start: new Date(y, m, d-5),
          end: new Date(y, m, d-2)
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: new Date(y, m, d-3, 16, 0),
          allDay: false
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: new Date(y, m, d+4, 16, 0),
          allDay: false
        },
        {
          title: 'Meeting',
          start: new Date(y, m, d, 10, 30),
          allDay: false
        },
        {
          title: 'Lunch',
          start: new Date(y, m, d, 12, 0),
          end: new Date(y, m, d, 14, 0),
          allDay: false
        },
        {
          title: 'Birthday Party',
          start: new Date(y, m, d+1, 19, 0),
          end: new Date(y, m, d+1, 22, 30),
          allDay: false
        },
        {
          title: 'Click for Google',
          start: new Date(y, m, 28),
          end: new Date(y, m, 29),
          url: 'http://google.com/'
        }
      ]
    });

    $('#calendar2').fullCalendar({
      theme: true,
      editable: true,
      firstDay: 1,
      defaultView: 'agendaWeek',

      events: '%SCRIPTURLPATH{"view"}%/%BASEWEB%/%BASETOPIC%?section=json-events;skin=text',

      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },

      eventDragStop: function(calEvent, jsEvent, ui, view) {
        alert(calEvent.title + 
              ' was dragged\n' +
              'id=' + calEvent.id + '\n' +
              'start=' + calEvent.start + '\n' +
              'end='+calEvent.end);
      },

      eventResize: function(calEvent, jsEvent, ui, view) {
        alert(calEvent.title + 
              ' was resized\n' +
              'id=' + calEvent.id + '\n' +
              'start=' + calEvent.start + '\n' +
              'end='+calEvent.end);
      },

      eventClick: function(calEvent, jsEvent, view) {
        alert(calEvent.title + ':\n' +
              'id=' + calEvent.id + '\n' +
              'start=' + calEvent.start + '\n' +
              'end='+calEvent.end);
      },

      loading: function(bool) {
        if (bool) {
          $('#loading').stop().show();
        } else {
          $('#loading').stop().fadeOut();
        }
      },
      timeFormat: {
        // for agendaWeek and agendaDay
        agenda: 'H:mm{ - H:mm}', 

        // for all other views
        '': 'h(:mm)'
      },
      columnFormat: {
        month: 'ddd',
        week: 'ddd d',
        day: 'dddd d'
      },
      axisFormat: 'H:mm'
    });
});
</script>
</literal>
%ENDSECTION{"init"}%
</verbatim>
%ENDTWISTY%

---+++ JSON events
<pre>
%STARTSECTION{"json-events"}%
[
  {
    id: 1,
    title: 'Event1',
    start: '%GMTIME{"$mon $day $year"}%',
    allDay: true
  },
  {
    id: 2,
    title: 'Workingday',
    start: '%GMTIME{"$mon $day $year 08:30:00"}%',
    end: '%GMTIME{"$mon $day $year 15:00:00"}%',
    allDay: false
  }
]
%ENDSECTION{"json-events"}%
</pre>

---++ Plugin Info

<!--
   * Set SHORTDESCRIPTION = <nop>FullCalendar jQuery widget for Foswiki
-->

|  Author(s): | Michael Daum |
|  Copyright: | 2009-2010 Michael Daum http://michaeldaumconsulting.com |
|  License: | GPL |
|  Release: | 0.1 |
|  Version: | 6941 (2010-03-26) |
|  Change History: | <!-- versions below in reverse order -->&nbsp; |
|  26 Mar 2010: | initial release, externalized from Foswiki:Extensions/JQueryPlugin |
|  Dependencies: | <table class="foswikiTable" border="1"><tr><th>Name</th><th>Version</th><th>Description</th></tr><tr><td align="left">Foswiki::Plugins::JQueryPlugin</td><td align="left">&gt;3.31</td><td align="left">Required</td></tr></table> |
|  Home: | Foswiki:Extensions/%TOPIC% |
|  Support: | Foswiki:Support/%TOPIC% |

PackageForm edit

ExtensionClassification	Interface and Visualisation, User interactivity
ExtensionType	PluginPackage
Compatibility
ImageUrl
DemoUrl	http://michaeldaumconsulting.com
SupportUrl	JQFullCalendarPlugin
DevelopedInSVN	Yes
ModificationPolicy	CoordinateWithAuthor

Topic attachments
I	Attachment	Action	Size	Date	Who
md5	JQFullCalendarPlugin.md5	manage	0.2 K	26 Mar 2010 - 17:25	MichaelDaum
sha1	JQFullCalendarPlugin.sha1	manage	0.2 K	26 Mar 2010 - 17:25	MichaelDaum
tgz	JQFullCalendarPlugin.tgz	manage	56.6 K	26 Mar 2010 - 17:25	MichaelDaum
zip	JQFullCalendarPlugin.zip	manage	59.6 K	26 Mar 2010 - 17:25	MichaelDaum
EXT	JQFullCalendarPlugin_installer	manage	4.5 K	26 Mar 2010 - 17:25	MichaelDaum

Topic revision: r2 - 25 Apr 2012, MichaelDaum

Extensions

Quick Links

Tools

The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. see CopyrightStatement.