07/06/12

FullCalendar Documentation - Basic Usage

FullCalendar
Introduction Documentation Downloads Support Source Adam Shaw Blog
Basic Usage Google Calendar General Display Views Agenda Opt ions Current Dat e Text /Time Cust omizat ion Clicking & Hovering Select ion Event Dat a Event Rendering Event Dragging & Resizing Dropping Ext ernal Element s Ut ilit ies
$dcmn)rayfnto( { (ouet.ed(ucin) / pg i nwray iiilz teclna.. / ae s o ed, ntaie h aedr. $'clna'.ulaedr{ (#aedr)flClna( / ptyu otosadclbcshr / u or pin n alak ee } ) }; ) <ikrl'tlset tp=tx/s'he=flclna.s'/ ln e=syehe' ye'etcs rf'ulaedrcs > <cittp=tx/aacit sc'qeyj'<srp> srp ye'etjvsrp' r=jur.s>/cit <cittp=tx/aacit sc'ulaedrj'<srp> srp ye'etjvsrp' r=flclna.s>/cit

Basic Usage
The first step in embedding a calendar on a web page is to hav e the right Jav aScript and CSS files. Make sure y ou are including the FullCalendar sty lesheet, as well as the FullCalendar and jQuery JS files, in the < e d of y our ha> page:

About Me Portfolio Open Source FullCalendar Scrapemark PHPTI XDate new

Support FullCalendar's Dev elopment!

If y ou plan on doing dragging or resizing, y ou need some additional jQuery UI files (more information here). Once y ou hav e y our dependencies, y ou need to write the Jav aScript code that initializes the calendar. This code must be executed after the page has initialized. The best way to do this is with jQuery 's $ d c m n ) r a ylike so: (ouet.ed

The abov e code should be in a < c i t tag in the head of y our page. The code srp> relies on there being an element with an id of "calendar" in the body of y our page. The calendar will be placed inside this div :
<i i=clna'<dv dv d'aedr>/i>

An that's it, y ou should see a month-based calendar that has no ev ents on it. If y ou want to learn how to display ev ents, v isit the Google Calendar or Ev ent Data sections.

Options
Most of FullCalendar's documentation describes options that affect the look or behav ior of the calendar. Options are usually set when the calendar is initialized, like so:
$'clna'.ulaedr{ (#aedr)flClna( weed:fle/ wl hd StrasadSnas ekns as / il ie audy n udy }; )

Callbacks
Callbacks are sort of like options, but they are functions that get called whenev er something special happens. In the following example, an alert box will appear whenev er the user clicks on a day :
$'clna'.ulaedr{ (#aedr)flClna( dylc:fnto( { aCik ucin) aet' dyhsbe cikd'; lr(a a a en lce!) } }; )

Methods
Methods prov ide way s to manipulate the calendar from Jav aScript code. A method operates on the jQuery object of a calendar that has already been initialized, using the familiar f l C l n a command, but in a completely different ulaedr way :
$'clna'.ulaedr'et) (#aedr)flClna(nx';

This will call the next method and will force to the calendar to mov e to the next

arshaw.com/fullcalendar/docs/usage/

1/2

07/06/12

FullCalendar Documentation - Basic Usage

month/week/day .

2012 Adam Shaw . Original site design.

arshaw.com/fullcalendar/docs/usage/

2/2