You are here:
STALklubben
>
System Web
>
JQueryPlugin
>
JQueryFullCalendar
(2010-02-20,
AdminUser
)
(raw view)
E
dit
A
ttach
---+ %TOPIC% %JQPLUGINS{"fullcalendar" format=" Homepage: $homepage <br /> Author(s): $author <br /> Version: $version " }% %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"}% %JQREQUIRE{"fullcalendar"}% %ADDTOZONE{"body" topic="%WEB%.%TOPIC%" section="init" requires="JQUERYPLUGIN::FULLCALENDAR"}% ---++ Example: default <div id="calendar1"></div> ---++ Example: async <div id='loading' style='display:none;' alt='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').show(); } else { $('#loading').hide(); } }, 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>
E
dit
|
A
ttach
|
P
rint version
|
H
istory
: r2
<
r1
|
B
acklinks
|
V
iew topic
|
Ra
w
edit
|
M
ore topic actions
Topic revision: r2 - 2010-02-20 - 07:59:58 -
AdminUser
System
Internetbokning
Log In
(ej för bokning) or
Register
Toolbox
Users
Groups
Index
Search
Changes
Notifications
RSS Feed
Statistics
Preferences
User Reference
BeginnersStartHere
TextFormattingRules
Macros
FormattedSearch
QuerySearch
DocumentGraphics
SkinBrowser
InstalledPlugins
Admin Maintenance
Reference Manual
AdminToolsCategory
InterWikis
ManagingWebs
SiteTools
DefaultPreferences
WebPreferences
Categories
Admin Documentation
Admin Tools
Developer Doc
User Documentation
User Tools
Webs
Main
STALklubben
Sandbox
System
Deutsch
English
Svenska
Copyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding STALklubben?
Send feedback