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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
<!DOCTYPE html>
<html>
<head>
<title>How to add calendar using jQuery and fullCalendar</title>
<!--FullCalendar Dependencies-->
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<!--jQuery-->
<script src='jquery-1.11.1.js'></script>
<!--<script src='jquery/jquery-1.9.1.min.js'></script>
<!--<script src='jquery/jquery-ui-1.10.2.custom.min.js'></script>
<!--FullCalendar-->
<script src='fullcalendar/fullcalendar.min.js'></script>
<script type="text/javascript">
/*
jQuery document ready
*/
$(document).ready(function()
{
/*
date store today date.
d store today date.
m store current month.
y store current year.
*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
/*
Initialize fullCalendar and store into variable.
Why in variable?
Because doing so we can use it inside other function.
In order to modify its option later.
*/
var calendar = $('#calendar').fullCalendar(
{
/*
header option will define our calendar header.
left define what will be at left position in calendar
center define what will be at center position in calendar
right define what will be at right position in calendar
*/
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
/*
defaultView option used to define which view to show by default,
for example we have used agendaWeek.
*/
defaultView: 'agendaWeek',
/*
selectable:true will enable user to select datetime slot
selectHelper will add helpers for selectable.
*/
selectable: true,
selectHelper: true,
/*
when user select timeslot this option code will execute.
It has three arguments. Start,end and allDay.
Start means starting time of event.
End means ending time of event.
allDay means if events is for entire day or not.
*/
select: function(start, end, allDay)
{
/*
after selection user will be promted for enter title for event.
*/
var title = prompt('Event Title:');
/*
if title is enterd calendar will add title and event into fullCalendar.
*/
if (title)
{
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
/*
editable: true allow user to edit events.
*/
editable: true,
/*
events is the main option for calendar.
for demo we have added predefined events in json object.
*/
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
});
</script>
<style type="text/css">
body
{
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar
{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<!--FullCalendar container div-->
<div id='calendar'></div>
</body>
</html> |
