new docs
This commit is contained in:
parent
3576075da1
commit
a52ce8f40d
151
docs/index.txt
151
docs/index.txt
|
@ -10,6 +10,7 @@ The following code initializes a FullCalendar within an element::
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
.. _BasicOptions:
|
||||||
|
|
||||||
Basic Options
|
Basic Options
|
||||||
=============
|
=============
|
||||||
|
@ -19,7 +20,10 @@ Basic Options
|
||||||
``month`` is 0-based, meaning January=0, February=1, etc.
|
``month`` is 0-based, meaning January=0, February=1, etc.
|
||||||
If ommitted, the calendar starts on the current date.
|
If ommitted, the calendar starts on the current date.
|
||||||
|
|
||||||
**header**: Object/``false``, *Default*: ``{ left:'title', center:'', right:'prev,next' }``
|
**defaultView**: String, *Default*: ``'month'``
|
||||||
|
The initial view when the calendar loads. Any of the :ref:`available-views`.
|
||||||
|
|
||||||
|
**header**: Object/``false``, *Default*: ``{ left:'title', center:'', right:'today prev,next' }``
|
||||||
Defines the buttons/text at the top of the calendar.
|
Defines the buttons/text at the top of the calendar.
|
||||||
``false`` will display no header.
|
``false`` will display no header.
|
||||||
An object can be supplied with properties ``left``, ``center``, and ``right``.
|
An object can be supplied with properties ``left``, ``center``, and ``right``.
|
||||||
|
@ -35,6 +39,15 @@ Basic Options
|
||||||
``next``
|
``next``
|
||||||
button for moving the calendar forward one month/week/day
|
button for moving the calendar forward one month/week/day
|
||||||
|
|
||||||
|
``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
|
||||||
|
|
||||||
*a blank space*
|
*a blank space*
|
||||||
visual gap between buttons/text
|
visual gap between buttons/text
|
||||||
|
|
||||||
|
@ -44,16 +57,31 @@ Basic Options
|
||||||
|
|
||||||
Specifying an empty string for a property will cause it display no text/buttons.
|
Specifying an empty string for a property will cause it display no text/buttons.
|
||||||
|
|
||||||
To change the text within a button, see the :ref:`buttonText<locale>` option.
|
**buttonText**: Object
|
||||||
|
Text that will be displayed on buttons of the header. Default::
|
||||||
|
|
||||||
**defaultView**: String, *Default*: ``'month'``
|
{
|
||||||
The initial view when the calendar loads. Any of the :ref:`available-views`.
|
prev: ' ◄ ', // left triangle
|
||||||
|
next: ' ► ', // right triangle
|
||||||
|
prevYear: 'prev year',
|
||||||
|
nextYear: 'next year',
|
||||||
|
today: 'today',
|
||||||
|
month: 'month',
|
||||||
|
week: 'week',
|
||||||
|
day: 'day'
|
||||||
|
}
|
||||||
|
|
||||||
**aspectRatio**: Float, *Default*: ``1.35``
|
**aspectRatio**: Float, *Default*: ``1.35``
|
||||||
A calendar is a block-level element that fills its entire avaiable width.
|
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.
|
The calendar's height, however, is determined by this ratio of width-to-height.
|
||||||
(Hint: larger numbers make smaller heights).
|
(Hint: larger numbers make smaller heights).
|
||||||
|
|
||||||
|
.. _allDayDefault:
|
||||||
|
|
||||||
|
**allDayDefault**: Boolean, *Default*: ``true``
|
||||||
|
Determines the default value for each :ref:`CalEvent's <CalEvent>` ``allDay`` property,
|
||||||
|
when it is unspecified.
|
||||||
|
|
||||||
**weekMode**: String, *Default*: ``'fixed'``
|
**weekMode**: String, *Default*: ``'fixed'``
|
||||||
Determines the number of weeks displayed in a month view.
|
Determines the number of weeks displayed in a month view.
|
||||||
Also determines each week's height. Available options:
|
Also determines each week's height. Available options:
|
||||||
|
@ -72,11 +100,24 @@ Basic Options
|
||||||
The ``aspectRatio`` will NOT be maintained however. Each week will have
|
The ``aspectRatio`` will NOT be maintained however. Each week will have
|
||||||
a constant height, meaning the calendar's height will change month-to-month.
|
a constant height, meaning the calendar's height will change month-to-month.
|
||||||
|
|
||||||
.. _allDayDefault:
|
**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
|
||||||
|
at all.
|
||||||
|
|
||||||
**allDayDefault**: Boolean, *Default*: ``true``
|
**allDayText**: Boolean, *Default*: ``'all-day'``
|
||||||
Determines the default value for each :ref:`CalEvent's <CalEvent>` ``allDay`` property,
|
In the agenda views, the text titling the "all-day" slot at the top of the calendar.
|
||||||
when it is unspecified.
|
|
||||||
|
**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.
|
||||||
|
|
||||||
|
|
||||||
Event Editing
|
Event Editing
|
||||||
|
@ -98,22 +139,37 @@ Event Editing
|
||||||
**disableResizing**: Boolean, *Default*: ``false``
|
**disableResizing**: Boolean, *Default*: ``false``
|
||||||
Disables all event resizing, even when events are editable.
|
Disables all event resizing, even when events are editable.
|
||||||
|
|
||||||
**dragOpacity**: Float, *Default*: ``1.0``
|
|
||||||
The opacity of an event when it is being dragged.
|
|
||||||
|
|
||||||
**dragRevertDuration**: Float, *Default*: ``500``
|
**dragRevertDuration**: Float, *Default*: ``500``
|
||||||
The time in milliseconds it takes for an event to revert to its
|
The time in milliseconds it takes for an event to revert to its
|
||||||
original position after an unsuccessful drag.
|
original position after an unsuccessful drag.
|
||||||
|
|
||||||
|
**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 an
|
||||||
|
: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
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
Time & Date Formatting
|
Time & Date Formatting
|
||||||
======================
|
======================
|
||||||
|
|
||||||
**titleFormat**: String/Object
|
**titleFormat**: String/Object
|
||||||
Determines the text that will be displayed in the header's title
|
Determines the text that will be displayed in the header's title
|
||||||
using :ref:`formatDates' <formatDates>`' format string. A string will set the title format
|
using the :ref:`formatDates <formatDates>` format.
|
||||||
for *all* views. An object hash will set the format on a per-view basis.
|
|
||||||
Here is the default, showing example outputs for each view::
|
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::
|
||||||
|
|
||||||
{
|
{
|
||||||
month: 'MMMM yyyy', // September 2009
|
month: 'MMMM yyyy', // September 2009
|
||||||
|
@ -122,10 +178,12 @@ Time & Date Formatting
|
||||||
}
|
}
|
||||||
|
|
||||||
**columnFormat**: String/Object
|
**columnFormat**: String/Object
|
||||||
Determines the text that will be displayed on a view's column headings
|
Determines the text that will be displayed on the calendar's column headings
|
||||||
using :ref:`formatDates' <formatDates>` format string. A string will set the column header format
|
using the :ref:`formatDates <formatDates>` format.
|
||||||
for *all* views. An object hash will set the format on a per-view basis.
|
|
||||||
Here is the default, showing example outputs for each view::
|
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::
|
||||||
|
|
||||||
{
|
{
|
||||||
month: 'ddd', // Mon
|
month: 'ddd', // Mon
|
||||||
|
@ -133,13 +191,28 @@ Time & Date Formatting
|
||||||
day: 'dddd M/d' // Monday 9/7
|
day: 'dddd M/d' // Monday 9/7
|
||||||
}
|
}
|
||||||
|
|
||||||
**timeFormat**: String, *Default*: ``'h(:mm)t'``
|
**timeFormat**: String/Object
|
||||||
Determines the time-text that will be displayed on an event
|
Determines the time-text that will be displayed on an event
|
||||||
using :ref:`formatDates' <formatDates>` format string. The default format outputs text
|
using the :ref:`formatDates <formatDates>` format.
|
||||||
such as '9a' or '5:30p'.
|
|
||||||
|
|
||||||
Time-text will only be displayed for :ref:`CalEvent` that have
|
Time-text will only be displayed for :ref:`CalEvents <CalEvent>`
|
||||||
``allDay`` equal to ``false``.
|
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' // 7pm
|
||||||
|
}
|
||||||
|
|
||||||
|
**axisFormat**: String, *Default*: ``h(:mm)tt``
|
||||||
|
Determines the time-text that will be displayed on the left vertical axis
|
||||||
|
of the agenda views.
|
||||||
|
|
||||||
|
|
||||||
.. _available-views:
|
.. _available-views:
|
||||||
|
@ -153,3 +226,35 @@ Available Views
|
||||||
|
|
||||||
**basicDay** - `see example <../../media/fullcalendar-views/basicDay.html>`_
|
**basicDay** - `see example <../../media/fullcalendar-views/basicDay.html>`_
|
||||||
|
|
||||||
|
**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``.
|
||||||
|
|
|
@ -23,14 +23,5 @@ Locale Options
|
||||||
**dayNamesShort**: Array, *Default*: ``['Sun','Mon','Tue'...``
|
**dayNamesShort**: Array, *Default*: ``['Sun','Mon','Tue'...``
|
||||||
Abbreviated names of days-of-week.
|
Abbreviated names of days-of-week.
|
||||||
|
|
||||||
**buttonText**: Object
|
The ``buttonText`` and ``allDayText`` options in :ref:`BasicOptions`
|
||||||
Text that will be displayed on buttons of the header. Default::
|
might also be of interest.
|
||||||
|
|
||||||
{
|
|
||||||
prev: ' ◄ ', // left triangle
|
|
||||||
next: ' ► ', // right triangle
|
|
||||||
today: 'today',
|
|
||||||
month: 'month',
|
|
||||||
week: 'week',
|
|
||||||
day: 'day'
|
|
||||||
}
|
|
|
@ -3,7 +3,7 @@
|
||||||
-----------------------------------------------------------------------------*/
|
-----------------------------------------------------------------------------*/
|
||||||
|
|
||||||
setDefaults({
|
setDefaults({
|
||||||
allDayHeader: true,
|
allDaySlot: true,
|
||||||
allDayText: 'all-day',
|
allDayText: 'all-day',
|
||||||
firstHour: 6,
|
firstHour: 6,
|
||||||
slotMinutes: 30,
|
slotMinutes: 30,
|
||||||
|
@ -127,7 +127,7 @@ function Agenda(element, options, methods) {
|
||||||
// head
|
// head
|
||||||
s = "<div class='fc-agenda-head' style='position:relative;z-index:4'>" +
|
s = "<div class='fc-agenda-head' style='position:relative;z-index:4'>" +
|
||||||
"<table style='width:100%'>" +
|
"<table style='width:100%'>" +
|
||||||
"<tr class='fc-first" + (options.allDayHeader ? '' : ' fc-last') + "'>" +
|
"<tr class='fc-first" + (options.allDaySlot ? '' : ' fc-last') + "'>" +
|
||||||
"<th class='fc-leftmost " +
|
"<th class='fc-leftmost " +
|
||||||
tm + "-state-default'> </th>";
|
tm + "-state-default'> </th>";
|
||||||
for (i=0; i<colCnt; i++) {
|
for (i=0; i<colCnt; i++) {
|
||||||
|
@ -138,7 +138,7 @@ function Agenda(element, options, methods) {
|
||||||
addDays(d, dis);
|
addDays(d, dis);
|
||||||
}
|
}
|
||||||
s+= "<th class='" + tm + "-state-default'> </th></tr>";
|
s+= "<th class='" + tm + "-state-default'> </th></tr>";
|
||||||
if (options.allDayHeader) {
|
if (options.allDaySlot) {
|
||||||
s+= "<tr class='fc-all-day'>" +
|
s+= "<tr class='fc-all-day'>" +
|
||||||
"<th class='fc-axis fc-leftmost " + tm + "-state-default'>" + options.allDayText + "</th>" +
|
"<th class='fc-axis fc-leftmost " + tm + "-state-default'>" + options.allDayText + "</th>" +
|
||||||
"<td colspan='" + colCnt + "' class='" + tm + "-state-default'>" +
|
"<td colspan='" + colCnt + "' class='" + tm + "-state-default'>" +
|
||||||
|
@ -342,7 +342,7 @@ function Agenda(element, options, methods) {
|
||||||
// renders 'all-day' events at the top
|
// renders 'all-day' events at the top
|
||||||
|
|
||||||
function renderDaySegs(segRow) {
|
function renderDaySegs(segRow) {
|
||||||
if (options.allDayHeader) {
|
if (options.allDaySlot) {
|
||||||
var td = head.find('td'),
|
var td = head.find('td'),
|
||||||
tdInner = td.find('div div'),
|
tdInner = td.find('div div'),
|
||||||
tr = td.parent(),
|
tr = td.parent(),
|
||||||
|
@ -659,7 +659,7 @@ function Agenda(element, options, methods) {
|
||||||
matrix = new HoverMatrix(function(cell) {
|
matrix = new HoverMatrix(function(cell) {
|
||||||
eventElement.draggable('option', 'revert', !cell);
|
eventElement.draggable('option', 'revert', !cell);
|
||||||
if (cell) {
|
if (cell) {
|
||||||
if (!cell.row && options.allDayHeader) { // over full days
|
if (!cell.row && options.allDaySlot) { // over full days
|
||||||
if (!allDay) {
|
if (!allDay) {
|
||||||
// convert to temporary all-day event
|
// convert to temporary all-day event
|
||||||
allDay = true;
|
allDay = true;
|
||||||
|
@ -675,7 +675,7 @@ function Agenda(element, options, methods) {
|
||||||
view.hideOverlay();
|
view.hideOverlay();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (options.allDayHeader) {
|
if (options.allDaySlot) {
|
||||||
matrix.row(head.find('td'));
|
matrix.row(head.find('td'));
|
||||||
}
|
}
|
||||||
bg.find('td').each(function() {
|
bg.find('td').each(function() {
|
||||||
|
|
|
@ -556,7 +556,7 @@ $.fn.fullCalendar = function(options) {
|
||||||
}
|
}
|
||||||
var prevButton;
|
var prevButton;
|
||||||
$.each(this.split(','), function(j) {
|
$.each(this.split(','), function(j) {
|
||||||
var buttonName = this;
|
var buttonName = this; // TODO: make this an arg one line above
|
||||||
if (buttonName == 'title') {
|
if (buttonName == 'title') {
|
||||||
tr.append("<td><h2 class='fc-header-title'/></td>");
|
tr.append("<td><h2 class='fc-header-title'/></td>");
|
||||||
if (prevButton) {
|
if (prevButton) {
|
||||||
|
|
|
@ -125,6 +125,7 @@
|
||||||
<button onclick="cal.fullCalendar('next')">next</button>
|
<button onclick="cal.fullCalendar('next')">next</button>
|
||||||
<button onclick="cal.fullCalendar('today')">today</button>
|
<button onclick="cal.fullCalendar('today')">today</button>
|
||||||
<button onclick="cal.fullCalendar('gotoDate', 1999, 9, 31)">Oct 31 1999</button>
|
<button onclick="cal.fullCalendar('gotoDate', 1999, 9, 31)">Oct 31 1999</button>
|
||||||
|
<button onclick="cal.fullCalendar('gotoDate', new Date(1999, 9, 30))">Oct 30 1999 (Date)</button>
|
||||||
<button onclick="cal.fullCalendar('incrementDate', 1, 1, 1)">+1 +1 +1</button>
|
<button onclick="cal.fullCalendar('incrementDate', 1, 1, 1)">+1 +1 +1</button>
|
||||||
<button onclick="cal.fullCalendar('incrementDate', -1, -1, -1)">-1 -1 -1</button>
|
<button onclick="cal.fullCalendar('incrementDate', -1, -1, -1)">-1 -1 -1</button>
|
||||||
|
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
1.3.1
|
1.4
|
Loading…
Reference in a new issue