jquery Calendar Plugin Fullcalendar tips for use

Original link: http://blog.csdn.net/u013493957/article/details/44920341 Fullcalendar is a jquery-based calendar control with powerful features Let me give you a brief introduction to the use of Fullcalendar, I hope this method is helpful to you.

Brief introduction

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

How to use

1. Download the compressed Package Fullcalendar-1.6.3.zip decompression
2. Importing resources in 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 requires jquery, and if the project has already introduced jquery, there is no need to duplicate the import
If you want to use the mouse drag function in the calendar, you need to import Jquery-ui
The Jquery-ui file contained in the compact 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 containing the above features, it cannot be re-imported here, and repeated import will invalidate other functions of jquery-ui.
3. Calling plug-ins

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

Configure the Calendar header

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 top three positions of the page table, the values of which can be separated by commas or spaces, and the range of optional values is as follows:
title– Current Date Text
prev– Forward button
next– Back Turn button
prevyear– Previous year button
nextyear– Button after one year
today– Today button
month– Month View
Basicweek– Week View
basicday– Day View
agendaweek– with Hour week view
agendaday– with a small time view

Configuring the Chinese Language Interface

The code is as follows

Copy Code

$ (' #calenderDemo '). Fullcalendar ({ ButtonText: { Today: ' The present ', Month: ' Moon ', Week: ' Week ', 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 that appear 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, custom attributes can be added to the event object as required by the function

Show Schedule

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

Add parameter Events:array/json string/function
You can set the 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 through 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 }

It can also 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

copy code

var calendar = $ (' #calenderDemo '). Fullcalendar ({  dayclick:function (date, AllDay, jsevent, view) {   // Here you can do the popup window, background communication and other processing   //This example only adds a new schedule to the calendar   calendar.fullcalendar (' renderevent ',     {     title: ' Schedule ' + new Date (). GetTime (),     start:date ,     allday:allday    }   );  } });

Parameter description
date– current date, including time when clicked on Agendaweek, Agendaday view
Allday– is false when clicked on Agendaweek, Agendaday view, other case is true
jsevent– native JavaScript events
view– 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 the 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

Drag the mouse to change the schedule time range
Using the mouse to drag directly on the page to change the schedule time range, need to jquery-ui the drag function, the initialization needs to configure the parameter editable to true to enable the drag function.

The code is as follows	Copy Code
var calendar = $ (' #calenderDemo '). Fullcalendar ({ Editable:true, Eventdrop:function (event, Daydelta, Minutedelta, AllDay, Revertfunc, JSEvent, UI, view) { Schedule time changes when you drag a schedule to a new location, where you can do the relevant processing } });

Parameter description
Daydelta– saves the number of days that this drag caused the schedule event to move, positive forward, negative back
Minutedelta– saves the number of minutes that the drag causes the schedule event to move, positive forward and negative back, which is valid only under agenda view
allday– If you move under Month view or move to the all-day area under agenda view, the AllDay is true, and the other area of agenda view is false
revertfunc– call this method, you can restore just drag to the original. This method is used for the Ajax commit, after the move, submit data to the background, if the background update fails, according to the return message, call this method, you can make the page back to the original

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

The parameters are similar to the EventDrop callback, and the following are only the differences:
daydelta– saved how many days the schedule end time changed, positive forward, negative back
Minutedelta-Saves how many minutes the schedule has changed, positive forward, negative backwards, which only works under agenda view, and 0 in other cases

Mouse over Select a date
Similar to selecting multiple files in Explorer, use the mouse to select a date on the page to operate, such as adding a schedule, you need to configure the selectable parameter to True
On one cell, the mouse over select event selection 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 the relevant 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

jquery Calendar Plugin Fullcalendar tips for use