Get Start jquery-plugin fullCalendar

4/1/2014

1. get start

Using fullCalendar pluning, would attach your event to its calendar. Its self using Json to render event to calendar to view. full calendar would provide more functions like read xml from Google Calendar. This article will demostrate how to get start to setup.

fullcalendar

 

2. download files

Go to following link to download fullCalendar, you will get everything you need, for example css, js and demo page. When you see the demo page's source file, you get everything you need, but here we using ASP.NET MVC 3.0 to demostrate using jquery full calendar.

fullcalendar

 

3. Attach sources files

put this to your master or Layout page on your website.

1
2
3
4
5
ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
fullcalendar/fullcalendar.css
fullcalendar/fullcalendar.print.css' media='print'
fullcalendar/fullcalendar.min.js
jquery-ui-1.8.23.custom.min.js

4. HTML

Only Html element is following, very simple right?

1
<div id="calendar"></div>

5. fullCalendar setting

Last bit is setup your fullCalendar, you need to add this to your webpage you'd like use fullCalendar. Following is just example setting.

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
$(document).ready(function () {
 
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
 
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        editable: true,
        events: [
            {
                title: 'Event One',
                start: new Date(y, m, 1),
                editable: false
            },
            {
                title: 'Event Two',
                start: new Date(y, m, d - 5),
                end: new Date(y, m, d - 2)
            },
            {
                id: 333,
                title: 'Event Three',
                start: new Date(y, m, d - 3, 16, 0),
                allDay: false
            }
        ]
    });
});

If you need the full sample app to download, you could go to following button to download