Usage ===== The following code initializes a FullCalendar within an element:: $('#calendar').fullCalendar({ // put your options here }) Basic Options ============= **year, month, date**: Integers The initial year/month/date when the calendar loads. ``month`` is 0-based, meaning January=0, February=1, etc. If ommitted, the calendar starts on the current date. **header**: Object/``false``, *Default*: ``{ left:'title', center:'', right:'today prev,next' }`` 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: ``title`` text containing the current date or date-range ``prev`` button for moving the calendar back one month/week/day ``next`` button for moving the calendar forward one month/week/day ``today`` button for moving the calendar to the current month/week/day *a blank space* visual gap between buttons/text *a view name* button that will switch the calendar to any of the :ref:`available-views` 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` option. **defaultView**: String, *Default*: ``'month'`` The initial view when the calendar loads. Any of the :ref:`available-views`. **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). **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. The ``aspectRatio`` will always be maintained. ``'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, as determined by ``aspectRatio``. ``'variable'`` The calendar will have either 4, 5, or 6 weeks, depending on the month. The ``aspectRatio`` will NOT be maintained however. Each week will have a constant height, meaning the calendar's height will change month-to-month. .. _allDayDefault: **allDayDefault**: Boolean, *Default*: ``true`` Determines the default value for each :ref:`CalEvent's ` ``allDay`` property, when it is unspecified. Event Editing ============= **editable**: Boolean, *Default*: ``false`` 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 ` ``editable`` property. For dragging, the `jQuery UI draggable `_ library is required. For resizing, the `jQuery UI resizable `_ library is required. **disableDragging**: Boolean, *Default*: ``false`` Disables all event dragging, even when events are editable. **disableResizing**: Boolean, *Default*: ``false`` 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`` The time in milliseconds it takes for an event to revert to its original position after an unsuccessful drag. Time & Date Formatting ====================== **titleFormat**: String/Object Determines the text that will be displayed in the header's title using :ref:`formatDates' `' format string. A string will set the title 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:: { month: 'MMMM yyyy', // September 2009 week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", // Sep 7 - 13 2009 day: 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2009 } **columnFormat**: String/Object Determines the text that will be displayed on a view's column headings using :ref:`formatDates' ` format string. A string will set the column header 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:: { month: 'ddd', // Mon week: 'ddd M/d', // Mon 9/7 day: 'dddd M/d' // Monday 9/7 } **timeFormat**: String, *Default*: ``'h(:mm)t'`` Determines the time-text that will be displayed on an event using :ref:`formatDates' ` format string. The default format outputs text such as '9a' or '5:30p'. Time-text will only be displayed for :ref:`CalEvent` that have ``allDay`` equal to ``false``. .. _available-views: Available Views =============== **month** - `see example <../../media/fullcalendar-views/month.html>`_ **basicWeek** - `see example <../../media/fullcalendar-views/basicWeek.html>`_ **basicDay** - `see example <../../media/fullcalendar-views/basicDay.html>`_