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