This commit is contained in:
Adam Shaw 2009-10-15 06:14:21 +00:00
parent 3576075da1
commit a52ce8f40d
6 changed files with 140 additions and 43 deletions

View file

@ -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: '&nbsp;&#9668;&nbsp;', // left triangle
next: '&nbsp;&#9658;&nbsp;', // 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``.

View file

@ -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: '&nbsp;&#9668;&nbsp;', // left triangle
next: '&nbsp;&#9658;&nbsp;', // right triangle
today: 'today',
month: 'month',
week: 'week',
day: 'day'
}

View file

@ -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'>&nbsp;</th>"; tm + "-state-default'>&nbsp;</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'>&nbsp;</th></tr>"; s+= "<th class='" + tm + "-state-default'>&nbsp;</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() {

View file

@ -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) {

View file

@ -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>

View file

@ -1 +1 @@
1.3.1 1.4