This repository has been archived by the owner on Mar 26, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
/
usage.txt
82 lines (54 loc) · 2.55 KB
/
usage.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
Basic Usage
===========
The first step in embedding a calendar on a web page is to have the right JavaScript and CSS files.
Make sure you are including the FullCalendar stylesheet, as well as the FullCalendar,
[jQuery](http://jquery.com/), and
[Moment](http://momentjs.com/)
JavaScript files, in the `<head>` of your page:
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
jQuery and Moment must be loaded before FullCalendar's JavaScript.
If you plan on doing dragging or resizing, you might need some additional dependencies.
[More information](event_ui/Requirements).
Once you have your dependencies, you need to write the JavaScript 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
`$(document).ready` like so:
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
The above code should be in a `<script>` tag in the head of your page. The code
relies on there being an element with an id of "calendar" in the body of your page.
The calendar will be placed *inside* this div:
<div id='calendar'></div>
An that's it, you should see a month-based calendar that has no events on it.
If you want to learn how to display events, visit the [Google Calendar](google_calendar)
or [Event Data](event_data) sections.
Options
-------
Most of FullCalendar's documentation describes options that affect the look or behavior of the calendar.
Options are usually set when the calendar is initialized, like so:
$('#calendar').fullCalendar({
weekends: false // will hide Saturdays and Sundays
});
Callbacks
---------
Callbacks are sort of like options, but they are *functions* that get *called* whenever something special happens.
In the following example, an alert box will appear whenever the user clicks on a day:
$('#calendar').fullCalendar({
dayClick: function() {
alert('a day has been clicked!');
}
});
Methods
-------
Methods provide ways to manipulate the calendar from JavaScript code. A method operates
on the jQuery object of a calendar that has already been initialized, using the familiar
`fullCalendar` command, but in a completely different way:
$('#calendar').fullCalendar('next');
This will call the [next](current_date/next) method and will force to the calendar to move to the next
month/week/day.