jquery Calendar Plugin Fullcalendar usage tips

Brief introduction

Official website:
http://arshaw.com/fullcalendar/
English documents:
http://arshaw.com/fullcalendar/docs/

How to use

1. Download Compressed Package Fullcalendar-1.6.3.zip decompression
2. Import resources into HTML pages

The code is as follows	Copy Code
<script type= "Text/javascript" src= "Js/jquery-1.10.2.min.js" ></script> <script type= "Text/javascript" src= "Js/jquery-ui-1.10.3.custom.min.js" ></script> <script type= "Text/javascript" src= "Js/fullcalendar.min.js" ></script>

A few notes:
Fullcalendar needs jquery and if the project has introduced jquery, there is no need to repeat the import here
If you want to use the mouse to drag and drop functions in your calendar, you need to import Jquery-ui
The Jquery-ui file contained in the compressed package contains only jquery.ui.core.js, Jquery.ui.widget.js, Jquery.ui.mouse.js, Jquery.ui.draggable.js, Jquery.ui.resizable.js function; If the project has introduced a Jquery-ui file with the above features, it cannot be imported here, duplicate import will cause other functions of jquery-ui to fail
3. Invoke Plugin

The code is as follows	Copy Code
$ (function () { $ (' #calenderDemo '). Fullcalendar ({}); });

Configure Calendar Headers

The code is as follows	Copy Code
$ (' #calenderDemo '). Fullcalendar ({ header:{ Left: ' Prev,next today ', Center: ' title ', Right: ' Month,agendaweek,agendaday ' } });

The left, center, and right parameters correspond to the three locations of the page table header, which can be separated by commas or spaces, and the optional values range as follows:
title– Current Date Text
prev–, flip the button forward.
next– back over the button
prevyear– a year ago button
nextyear– a year after the button
today– Today button
month– Month View
Basicweek– Week View
basicday– Day View
agendaweek– with Hour week view
agendaday– with little time view

Configure Chinese interface

The code is as follows

Copy Code

$ (' #calenderDemo '). Fullcalendar ({ ButtonText: { Today: ' Todays ', Month: ' Month ', Week: ' Zhou ', Day: ' Days ' }, Alldaytext: ' All day ', MonthNames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December '], Monthnamesshort: [' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 ', ' 6 ', ' 7 ', ' 8 ', ' 9 ', ' 10 ', ' 11 ', ' 12 '], DayNames: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '], Daynamesshort: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '], });

Schedule Object Event
Schedule events displayed in the calendar

The code is as follows	Copy Code
{ Title: ' Some name ', Start: ' 2013-08-08′, End: ' 2013-08-12′ }

Basic parameter Description
title– event name, displayed in the schedule
start– Schedule Start time
end– Schedule End Time
Other parameters
Id
AllDay
Url
ClassName
Editable
Starteditable
Durationeditable
Source
Color
BackgroundColor
BorderColor
TextColor
In addition, you can add custom attributes to the event object based on functionality

Show Schedule

The code is as follows	Copy Code
$ (' #calenderDemo '). Fullcalendar ({ Events:[] });

Add parameter Events:array/json string/function
Can be an array:

The code is as follows	Copy Code
Events: [ { Title: ' All Day Event ', Start:new Date () }, { Title: ' Long Event ', Start:new Date (), End:new Date (new Date (). GetTime () +86400000) } ]

You can load JSON data via Ajax:

The code is as follows	Copy Code
Events: { URL: '/myfeed.php ', Type: ' POST ', Data: { CUSTOM_PARAM1: ' Something ', CUSTOM_PARAM2: ' SomethingElse ' }, Error:function () { Alert (' There was a error while fetching events! '); }, Color: ' Yellow ',//a non-ajax option TextColor: ' Black '//a non-ajax option }

Or it can be a function:

The code is as follows	Copy Code
Events:function (Start, end, callback) { Callback after getting schedule data Callback (events); }

Add a Schedule
Add a new schedule by clicking on the Calendar cell

code is as follows	copy code
var Calendar = $ (' #calenderDemo '). Fullcalendar ({  dayclick:function (date, AllDay, jsevent, view) {    //Here you can do the window, background communication, etc.   //This example adds a new schedule to the calendar only   calendar.fullcalendar (' renderevent ',    {     title: ' Schedule ' + new Date (). GetTime (),      Start:date,     allday:allday       );   }) ;

Parameter description
date– current date, including time when Agendaweek, Agendaday view clicked
Allday– is false when clicked in Agendaweek, Agendaday view, otherwise true
jsevent– native JavaScript events
view– the current View object

Modify Schedule
Click on the currently displayed schedule to modify the schedule

The code is as follows	Copy Code
var calendar = $ (' #calenderDemo '). Fullcalendar ({ Eventclick:function (event, jsevent, view) { Here you can add code to modify your schedule var red = math.round (255 * math.random ()); var green = Math.Round (255 * math.random ()); var blue = Math.Round (255 * math.random ()); $ (this). CSS (' background-color ', ' rgb (' + red + ', ' + green + ', ' + blue + ') '); } });

Event parameter is the current clicked schedule

Mouse drag to change the schedule time range
Use the mouse to drag directly on the page to change the schedule time range, you need to jquery-ui the drag function, the initialization of the required configuration parameters editable true to enable the drag function.

code is as follows	copy code
var Calendar = $ (' #calenderDemo '). Fullcalendar ({  editable:true,  eventdrop:function (event, Daydelta, Minutedelta, AllDay, Revertfunc, JSEvent, UI, view) {   //when you drag a schedule to a new location, the schedule time changes, where you can do related processing   });

Parameter Description
daydelta– saves the number of days that the schedule event was moved, forwards to positive numbers, and backward to negative
minutedelta– saves the number of minutes that the schedule event has been moved, forwards to positive numbers, and backward to negative numbers. This value is valid only under agenda view
allday– If you move under Month view or move to the all-day area under agenda view, AllDay is true, and the other area to agenda view is false< br> revertfunc– calls this method, you can restore just the drag to the original. This method is more used for the submission of Ajax, after moving, submit data to the background, if the background update failed, according to the return message, call this method, you can make the page revert to the original state

The code is as follows	Copy Code
var calendar = $ (' #calenderDemo '). Fullcalendar ({ Editable:true, Eventresize:function (event, Daydelta, Minutedelta, Revertfunc, JSEvent, UI, view) { Change a schedule size, schedule end time change, here can do related processing } });

The parameter is similar to the EventDrop callback, and the following only explains the difference:
daydelta– Save how many days the schedule end time has changed, forward as positive, backward negative
Minutedelta-Saves the number of minutes that the schedule end time changes, forwards to positive numbers, and backwards to negative values, which are valid only under agenda view, and others 0

Select a date with the mouse across
Similar to selecting multiple files in the Explorer, using the mouse to select a date on the page, such as adding a schedule, requires that the selectable parameter be configured to True
On a cell, the mouse hovers over the Select event Select and mouse click cell event Dayclick will be triggered simultaneously

The code is as follows	Copy Code
var calendar = $ (' #calenderDemo '). Fullcalendar ({ Selectable:true, Select:function (StartDate, EndDate, AllDay, jsevent, view) { Select a date where you can do related processing When processing is complete, uncheck State Calendar.fullcalendar (' unselect '); } });

Parameter description
startdate– Start date
enddate– End Date, when Allday is true, the end date contains the last day