fullcalendar/docs/index.txt

282 lines
9.1 KiB
Plaintext
Raw Normal View History

2009-04-26 06:43:27 +02:00
2009-09-14 00:25:49 +02:00
Usage
=====
2009-04-26 06:43:27 +02:00
2009-09-14 05:36:27 +02:00
The following code initializes a FullCalendar within an element::
2009-04-26 06:43:27 +02:00
2009-09-14 00:25:49 +02:00
$('#calendar').fullCalendar({
// put your options here
})
2009-10-15 08:14:21 +02:00
.. _BasicOptions:
2009-05-30 07:54:53 +02:00
2009-09-14 05:36:27 +02:00
Basic Options
=============
2009-09-14 00:25:49 +02:00
**year, month, date**: Integers
The initial year/month/date when the calendar loads.
2009-09-14 05:36:27 +02:00
``month`` is 0-based, meaning January=0, February=1, etc.
2009-09-14 00:25:49 +02:00
If ommitted, the calendar starts on the current date.
2009-10-15 08:14:21 +02:00
**defaultView**: String, *Default*: ``'month'``
The initial view when the calendar loads. Any of the :ref:`available-views`.
2009-09-14 00:25:49 +02:00
2009-10-15 08:14:21 +02:00
**header**: Object/``false``, *Default*: ``{ left:'title', center:'', right:'today prev,next' }``
2009-09-14 05:36:27 +02:00
Defines the buttons/text at the top of the calendar.
``false`` will display no header.
An object can be supplied with properties ``left``, ``center``, and ``right``.
These properties contain strings with comma separated values,
containing any of the following:
2009-09-14 00:25:49 +02:00
``title``
text containing the current date or date-range
``prev``
2009-09-14 05:36:27 +02:00
button for moving the calendar back one month/week/day
2009-09-14 00:25:49 +02:00
``next``
2009-09-14 05:36:27 +02:00
button for moving the calendar forward one month/week/day
2009-10-15 08:14:21 +02:00
``prevYear``
button for moving the calendar back on year
``nextYear``
button for moving the calendar forward one year
``today``
button for moving the calendar to the current month/week/day
2009-09-14 05:36:27 +02:00
*a blank space*
visual gap between buttons/text
2009-09-14 00:25:49 +02:00
2009-09-14 05:36:27 +02:00
*a view name*
2009-09-14 00:25:49 +02:00
button that will switch the calendar to any of the
2009-09-14 05:36:27 +02:00
:ref:`available-views`
Specifying an empty string for a property will cause it display no text/buttons.
2009-09-14 00:25:49 +02:00
2009-10-15 08:14:21 +02:00
**buttonText**: Object
Text that will be displayed on buttons of the header. Default::
2009-09-14 00:25:49 +02:00
2009-10-15 08:14:21 +02:00
{
prev: ' ◄ ', // left triangle
next: ' ► ', // right triangle
prevYear: '&nbsp;&lt;&lt;&nbsp;', // <<
nextYear: '&nbsp;&gt;&gt;&nbsp;', // >>
2009-10-15 08:14:21 +02:00
today: 'today',
month: 'month',
week: 'week',
day: 'day'
}
2009-09-14 00:25:49 +02:00
**aspectRatio**: Float, *Default*: ``1.35``
A calendar is a block-level element that fills its entire avaiable width.
The calendar's height, however, is determined by this ratio of width-to-height.
(Hint: larger numbers make smaller heights).
2009-10-15 08:14:21 +02:00
**height**: Integer
Will make the entire calendar (including header) a pixel height.
You may change this after initialization with :ref:`Option Setters<option-getters-setters>`.
**contentHeight**: Integer
Will make the calendar's content area a pixel height.
You may change this after initialization with :ref:`Option Setters<option-getters-setters>`.
2009-10-15 08:14:21 +02:00
.. _allDayDefault:
**allDayDefault**: Boolean, *Default*: ``true``
Determines the default value for each :ref:`CalEvent's <CalEvent>` ``allDay`` property,
when it is unspecified.
2009-11-01 00:51:30 +01:00
**weekends**: Boolean, *Default*: ``true``
Whether to include Saturday/Sunday columns in any of the views.
2009-09-14 00:25:49 +02:00
**weekMode**: String, *Default*: ``'fixed'``
Determines the number of weeks displayed in a month view.
Also determines each week's height. Available options:
``'fixed'``
The calendar will always be 6 weeks tall.
2009-09-14 05:36:27 +02:00
The ``aspectRatio`` will always be maintained.
2009-09-14 00:25:49 +02:00
``'liquid'``
The calendar will have either 4, 5, or 6 weeks, depending on the month.
The height of the weeks will stretch to fill the available height,
2009-09-14 05:36:27 +02:00
as determined by ``aspectRatio``.
2009-09-14 00:25:49 +02:00
``'variable'``
The calendar will have either 4, 5, or 6 weeks, depending on the month.
2009-09-14 05:36:27 +02:00
The ``aspectRatio`` will NOT be maintained however. Each week will have
a constant height, meaning the calendar's height will change month-to-month.
2009-09-14 00:25:49 +02:00
2009-10-15 08:14:21 +02:00
**allDaySlot**: Boolean, *Default*: ``true``
In the agenda views, determines if the "all-day" slot is displayed at the top
of the calendar. When hidden with ``false``, all-day events will not be displayed
in agenda views.
2009-10-15 08:14:21 +02:00
**allDayText**: String, *Default*: ``'all-day'``
2009-10-15 08:14:21 +02:00
In the agenda views, the text titling the "all-day" slot at the top of the calendar.
**firstHour**: Integer, *Default*: 6
In the agenda views, determines the first hour that will be visible in the
scroll pane. Values must be from 0-23, where 0=midnight, 1=1am, etc.
**slotMinutes**: Integer, *Default*: 30
In the agenda views, the frequency for displaying time slots, in minutes.
**defaultEventMinutes**: Integer, *Default*: 120
In the agenda views, when a :ref:`CalEvent <CalEvent>` has an unspecified end date,
determines the length (in minutes) the event appears to be.
**minTime**: Integer/String, *Default*: ``0``
In the agenda views, determines the first hour/time that will be displayed, even when
the scollbars have been scrolled all the way up. This can be a number like ``5`` (which
means 5am), a string like ``'5:30'`` (which means 5:30am) or a string like ``'5:30am'``.
**maxTime**: Integer/String, *Default*: ``24``
In the agenda views, determines the last hour/time (exclusively) that will be displayed, even when
the scrollbars have been scrolled all the way down. This can be a number like ``22`` (which
means 10pm), a string like ``'22:30'`` (which means 10:30pm) or a string like ``'10:30pm'``.
2009-09-14 00:25:49 +02:00
Event Editing
=============
**editable**: Boolean, *Default*: ``false``
2009-09-14 05:36:27 +02:00
Determines whether the events on the calendar can be modified, i.e,
if the events will be *draggable* and *resizable*.
This can be overridden on a per-event basis with a :ref:`CalEvent's <CalEvent>`
``editable`` property.
For dragging, the `jQuery UI draggable <http://jqueryui.com/demos/draggable/>`_ library is required.
2009-09-14 00:25:49 +02:00
2009-09-14 05:36:27 +02:00
For resizing, the `jQuery UI resizable <http://jqueryui.com/demos/resizable/>`_ library is required.
2009-09-14 00:25:49 +02:00
**disableDragging**: Boolean, *Default*: ``false``
2009-09-14 05:36:27 +02:00
Disables all event dragging, even when events are editable.
2009-09-14 00:25:49 +02:00
**disableResizing**: Boolean, *Default*: ``false``
2009-09-14 05:36:27 +02:00
Disables all event resizing, even when events are editable.
2009-09-14 00:25:49 +02:00
**dragRevertDuration**: Float, *Default*: ``500``
The time in milliseconds it takes for an event to revert to its
2009-09-14 05:36:27 +02:00
original position after an unsuccessful drag.
2009-09-14 00:25:49 +02:00
2009-10-15 08:14:21 +02:00
**dragOpacity**: Float
The opacity of an event when it is being dragged. Values range
from 0.0 to 1.0.
Specify a single number to affect all views, or a
2009-10-15 08:14:21 +02:00
:ref:`ViewHash` to target specific views. Here is the default
(a View Hash)::
{
// for agendaWeek and agendaDay
agenda: .5,
// for all other views
'': 1.0
}
2009-09-14 00:25:49 +02:00
Time & Date Formatting
======================
**titleFormat**: String/Object
Determines the text that will be displayed in the header's title
2009-10-15 08:14:21 +02:00
using the :ref:`formatDates <formatDates>` format.
A single string will set the title format for *all* views.
A :ref:`ViewHash` may be provided to target specific views.
Here is the default (a View Hash), showing example output::
2009-09-14 00:25:49 +02:00
{
2009-09-14 05:36:27 +02:00
month: 'MMMM yyyy', // September 2009
2009-09-14 00:25:49 +02:00
week: "MMM d[ yyyy]{ '&#8212;'[ MMM] d yyyy}", // Sep 7 - 13 2009
2009-09-14 05:36:27 +02:00
day: 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2009
2009-09-14 00:25:49 +02:00
}
**columnFormat**: String/Object
2009-10-15 08:14:21 +02:00
Determines the text that will be displayed on the calendar's column headings
using the :ref:`formatDates <formatDates>` format.
A single string will set the title format for *all* views.
A :ref:`ViewHash` may be provided to target specific views.
Here is the default (a View Hash), showing example output::
2009-09-14 00:25:49 +02:00
{
2009-09-14 05:36:27 +02:00
month: 'ddd', // Mon
2009-09-14 00:25:49 +02:00
week: 'ddd M/d', // Mon 9/7
2009-09-14 05:36:27 +02:00
day: 'dddd M/d' // Monday 9/7
2009-09-14 00:25:49 +02:00
}
2009-10-15 08:14:21 +02:00
**timeFormat**: String/Object
2009-09-14 00:25:49 +02:00
Determines the time-text that will be displayed on an event
2009-10-15 08:14:21 +02:00
using the :ref:`formatDates <formatDates>` format.
Time-text will only be displayed for :ref:`CalEvents <CalEvent>`
that have ``allDay`` equal to ``false``.
A single string will change the time-text for applicable events in *all* views.
A :ref:`ViewHash` may be provided to target specific views.
Here is the default (a View Hash), showing example output::
{
// for agendaWeek and agendaDay
agenda: 'h:mm{ - h:mm}', // 5:00 - 6:30
// for all other views
'': 'h(:mm)t' // 7p
2009-10-15 08:14:21 +02:00
}
2009-09-14 05:36:27 +02:00
2009-10-15 08:14:21 +02:00
**axisFormat**: String, *Default*: ``h(:mm)tt``
Determines the time-text that will be displayed on the left vertical axis
of the agenda views.
2009-09-14 05:36:27 +02:00
.. _available-views:
2009-09-14 00:25:49 +02:00
2009-09-14 05:36:27 +02:00
Available Views
===============
2009-09-16 08:17:37 +02:00
**month** - `see example <../../media/fullcalendar-views/month.html>`_
2009-09-14 05:36:27 +02:00
2009-09-16 08:17:37 +02:00
**basicWeek** - `see example <../../media/fullcalendar-views/basicWeek.html>`_
2009-09-14 05:36:27 +02:00
2009-09-16 08:17:37 +02:00
**basicDay** - `see example <../../media/fullcalendar-views/basicDay.html>`_
2009-10-15 08:14:21 +02:00
**agendaWeek** - `see example <../../media/fullcalendar-views/agendaWeek.html>`_
**agendaDay** - `see example <../../media/fullcalendar-views/agendaDay.html>`_
.. _ViewHash:
View Hash
=========
A "View Hash" is an object that specifies options for specific calendar views.
It can contain any of the following properties::
{
month: // month view
week: // basicWeek & agendaWeek views
day: // basicDay & agendaDay views
agenda: // agendaDay & agendaWeek views
agendaDay: // agendaDay view
agendaWeek: // agendaWeek view
basic: // basicWeek & basicDay views
basicWeek: // basicWeek view
basicDay: // basicDay view
'': // (an empty string) when no other properties match
}
Currently the only options that support View Hashes are
``dragOpacity``, ``titleFormat``, ``columnFormat``, and ``timeFormat``.