1. Basic Syntax:
First, fullcalendar is organized in an object-oriented way like jquery.Code. Of course, the object orientation here only refers to the ability to understand the entire fullcalendar as a class, which includes many attributes, methods, and delegation (function callback) as member variables. By assigning values to these member variables, you can create a fullcalendar instance that meets your needs, that is, the calendar that is finally rendered in the browser. In other words, most of the work we do is to configure a fullcalendar instance according to the fullcalendar syntax. The JS file of fullcalendar is modified only when the interfaces provided by fullcalendar are insufficient to meet very few special requirements.
As a jquery plug-in, fullcalendar can be understood as adding a calendar-Related Object to the jquery object set. The method, attribute, and call method of this object are described as follows, it is the basic syntax of fullcalendar. The syntax is divided into two types:
The first method is independent of the calendar itself. It only uses the method provided by fullcalendar to convert strings and daily periods. The format is as follows:
$. Fullcalendar. formatdate ();
The second type is related to the configuration of the fullcalendar instance, which will eventually affect the rendering of fullcalendar in the browser, in the form of $ ('# someid'). fullcalendar (content );
$ ('# Someid') will get a jquery object where someid is the element ID you want to render the calendar. Focus on the later part. fullcalendar (content );
There are three types of content:
① Assign {key: value,…} to the attribute ,...}
$ ('# Calendar'). fullcalendar ({
Weekends: false // will hide Saturdays and Sundays
});
Here, a fullcalendar instance is obtained. The weekends attribute is false, that is, the monthly calendar does not display the weekend.
② Method call 'methodname', 'para'
$ ('# Calendar'). fullcalendar ('Next ')
The next method of the fullcalendar instance will be called here. The result is that the calendar of the browser is reversed to January (day)
③ Assign values to method callback
$ ('# Calendar'). fullcalendar ({
Dayclick: function () {alert ('A Day has been clicked! ');}
});
Here, the dayclick event of the calendar control is assigned with an anonymous function. The result is that the dialog box is displayed when the calendar is clicked every day.
I want to first have this idea to make it easier to understand later. When a fullcalendar control needs to be rendered, it usually completes the assignment of the vast majority of its attributes and delegation directly when instantiating a fullcalendar control, in this way, a fullcalendar object (a) that will be rendered by the browser into a calendar will be obtained. When this object has been rendered, if you need to modify its configuration dynamically, you can use $ ('# calendar '). fullcalendar ('option', 'aspectratio ', 1.8.
If you want some changes to object A, you can also call some methods of object A, such as paging.
2. Content Framework
The entire fullcalendar consists of two parts:
Calendar + events
Calendar is the calendar control depicted by JS scripts in the browser. This part is completely controlled by JS and does not need to be associated with the server.
An event is an extension of the Calendar function and can be understood as a meeting arrangement. These meeting arrangements are usually stored on the server. During each page loading, fullcalendar obtains the set of meeting arrangements, and then depicts the events to the calendar based on the date.
3. Knowledge Point Overview
The remaining detailed knowledge points are translations and combinations of official fullcalendar documents. Each part is organized in the order of attributes, methods, and function callbacks. There will usually be an introduction to relevant knowledge points. For complex or key points, there will be associated code as an example. These examples are also provided in the official fullcalendar documentation.
The following is an overview of all these knowledge points.
Calendar section:
View: different display modes of the calendar. There are currently 5 Central views
General View configuration: This part of configuration is usually valid for the 5-center view.
View object: View module of fullcalendar
Obtain the view object and jump to the specified view
Agenda-related: configuration of relevant details in the agenda View Mode
Date: it involves the display format of dates in the calendar system, the date loaded by the calendar, and how to get the related date or calendar to change the date.
Custom settings of time and text: Most configurations related to custom or localization are completed here
Mouse-related event Capture: for example, you can configure how to trigger a mouse to a special place (one day in the calendar ).
Select element configuration: This part is used to configure whether to select this element and related events when you click a calendar element.
The event section is as follows:
Information contained in the event Module
Event generation: Includes event source management and event management
Event profiling: the entire process of describing an event to the browser is included here
Drag event: move the cursor to a certain time, which requires support from other jquery UI plug-ins.
Drag events from outside the calendar to add events: extend the drag events within the calendar
4. Detailed knowledge point 4.1. Valid View
Month-See example month View
Basicweek-See example weekly view (a set of events and dates within a week)
Basicday-See example (a collection of events and dates within one day)
Agendaweek-See example (weekly calendar)
Agendaday-See example (daily calendar)
4.2 general view Configuration
Header
Information displayed in the header, divided into left, center, right
Valid attribute values: title, Prev, next, prevyear, nextyear, today, avaibleviewname
Header :{
Left: 'title ',
Center: 'prevyear, nextyear ',
Right: 'prev, today, next, agendaday, month'
}
Theme
When true, the calendar skin can be configured with a JQUERY-UI
Buttonicons: http://jqueryui.com/themeroller/
Buttonicons :{
PREV: 'circle-triangle-W ',
Next: 'cycle-triangle-e'
}
Remove. UI-icon-
Firstday: start date of each week: 0 is Sunday
Isrtl: Indicates whether to organize calendars from right to left.
Weekends: whether to display the weekend
Weekmode: Display Mode of weeks:
Fixed: always shows 6 weeks per month
Liquid: the number of weeks is variable, the height of each week is variable, and the height of the entire calendar is unchanged.
Variable: the number of weeks is variable, the height of each week is fixed, and the height of the entire calendar is variable.
Height the height of the entire calendar (including header and content)
Contentheight content height:
Aspectratio width and height ratio
$ ('# Calendar'). fullcalendar ('option', 'aspectratio ', 1.8); can be set dynamically
Call back the viewdisplay (callback) function.
Function (View ){}
View is a view object.
Windowresize (callback) function callback, called every time the window size changes,
Viewdisplay
Render (method) displays view immediately
Destroy (method) releases the calendar, including related data
Defaultview: the view in the calendar initialization. The default value is month.
4.3 viewobject
Name |
One of the five view names available |
Title |
View part title 2012.9.1 |
Start |
The first day of View |
End |
|
Visstart |
Visible start day |
Visend |
|
There will be an object in the related method callback.
4.4 obtain view objects
. Fullcalendar ('getview ')
Switch View
. Fullcalendar ('changeview', viewname)
4.5. Agenda-display information of views related to the control calendar
Whether alldayslot displays the full-day calendar
Text displayed in alldaytext
Axisformat date display format
Slotminutes Interval
Defaulteventminutes default event persistence event
The Start Time That firsthour shows in the Schedule view. You can scroll to the time before this time by using the scroll bar.
Mintime indicates the start time of the entire calendar day.
Maxtime end time of the entire calendar day
4.6 date-related
Year when the calendar is loaded
Month the month when the calendar is loaded (starting from 0)
The number of days in the month when the date calendar is loaded (effective for the weekly and daily views)
Prev (method) calendar jump to the previous day
Next (method) calendar jump to the next day
Prevyear (method) calendar jump to previous year
Nextyear (method) calendar jump to the next year
The Today (method) calendar jumps to the current date
The gotodate (method) calendar jumps to the specified date
Incrementdate (method) calendar jump forward (backward) for a period of time
Getdate (method) gets the current date type of the calendar
4.7 custom time and text
Timeformat: Default Time Format displayed for each event
Columnformat,
{Month: 'ddd ', // mon
Week: 'ddd M/d', // mon9/7
Day: 'dddd M/d' // monday9/7}
Titleformat: The title display format in each view
{Month: 'mmmm yyyy', // September 2009
Week: "Mmm d [YYYY] {'& #8212;' [Mmm] D yyyy}", // Sep 7-13 2009
Day: 'dddd, mmm D, yyyy' // Tuesday, Sep 8, 2009}
The text displayed by each button in the buttontext View
{PREV: '& nbsp; & #9668; & nbsp;', // Left triangle
Next: '& nbsp; & #9658; & nbsp;', // right triangle
Prevyear: '& nbsp; & lt; & nbsp;', // <
Nextyear: '& nbsp; & gt; & nbsp;', //>
Today: 'today ',
Month: 'month ',
Week: 'Week ',
Day: 'day '}
Full name of monthnames month
Monthnamesshort
Full name of daynames
Short for daynamesshort
4.8 click events
Dayclick (callback) is triggered when it is clicked one day
Function (date, allday, jsevent, view ){}
Date: The date currently clicked
Allday: whether it is full-day
Jsevent: underlying JS events
View: current view object
This keyword refers to <TD>
Eventclick (callback) is triggered when an event is clicked.
Function (event, jsevent, view ){}
Event: current event object
Jsevent: underlying JS events
View: current view
This indicates the <div> element in <TD>.
Eventmouseover (callback) is triggered when the mouse slides to the event, which is similar to eventclick.
Eventmouseout (callback) is triggered when the mouse leaves the event, which is similar to eventclick.
4.9 select related: When you click or drag to the relevant position, select the corresponding element
Select whether to select the corresponding element
Selecthelper
In the View related to the calendar, whether to display relevant information when the selected time point is selected
Unselectauto
Whether to automatically cancel the current selection when you click a location other than the page calendar
Unselectcancel
Specify which elements do not clear the selected items. Specify '# someid' as the jquery selector'
Function callback when select (callback) is selected
Function (startdate, enddate, allday, jsevent, view)
Callback when unselect (callback) is selected and canceled
Select (method) Select a time
. Fullcalendar ('select', startdate, enddate, allday)
Unselect (method) unselect
. Fullcalendar ('unselect ')
4.10 event-related
Eventobject event object
ID |
(Optional) Unique Identifier of an event. Duplicate events have the same |
Title |
Required. The title of the event displayed on the calendar. |
Allday |
Optional. Whether the event is an event of the whole day. |
Start |
Required. The start time of the event. |
End |
Optional. End Time. |
URL |
Optional. When specified, the event is clicked to open the corresponding URL. |
Classname |
Event Style |
Editable |
Drag or drop |
Source |
Eventsource object pointing to the secondary event |
Color |
Background and border color |
Backgroundcolor |
Background Color |
Bordercolor |
Border color |
Textcolor |
Text color |
Eventsource object
Events: in the Calendar interface, the parameter event object is divided into three types: array, JSON feed, and function.
Eventsource:
{
Events :[
{Title: 'event1 ',
Start: '2014-04-04 '},
{Title: 'event2 ',
Start: '1970-05-05 '}/etc...],
Color: 'yellow', // anoption!
Textcolor: 'black' // an option!
}
Optional configuration options of eventsource
Classname |
Event Style |
Editable |
Drag or drop |
Source |
Eventsource object pointing to the secondary event |
Color |
Background and border color |
Backgroundcolor |
Background Color |
Bordercolor |
Border color |
Textcolor |
Text color |
Event Set organized in the form of an array of events (events array)
$ ('# Calendar'). fullcalendar ({
Events :[
{
Title: 'event1 ',
Start: '2017-01-01'
},
{
Title: 'event2 ',
Start: '2017-01-05 ',
End: '2017-01-07'
},
{
Title: 'event3 ',
Start: '2017-01-09 12:30:00 ',
Allday: false // will make the time show
}
]
});
Events (asa json feed) obtained in JSON source format
JSON is obtained every time the view time changes. Here, start and end are the start and end of the corresponding view, and insert _ is the browser cache by default. You can use cache: True to read the browser cache by default.
$ ('# Calendar'). fullcalendar ({
Events: '/myfeed. php'
});
Will be converted to the following URL request
/Myfeed. php? Start = 1262332800 & End = 1265011200 & _ = 1263178646
Events (ASA function)
Obtain the event as a method
$ ('# Calendar'). fullcalendar ({
Events: function (START, end, callback ){
$. Ajax ({
URL: 'myxmlfeed. php ',
Datatype: 'xml ',
Data :{
// Ourhypothetical feed requires UNIX timestamps
Start: Math. Round (start. gettime ()/1000 ),
End: Math. Round (end. gettime ()/1000)
},
Success: function (DOC ){
VaR events = [];
$ (DOC). Find ('event'). Each (function (){
Events. Push ({
Title: $ (this). ATTR ('title '),
Start: $ (this). ATTR ('start') // will be parsed
});
});
Callback (events );
}
});
}
});
Start and end are the same as the previous start and end time (default:-1970 milliseconds)
Callback: when the event is obtained, the callback function is called to put the data into the events in fullcalendar.
Eventsources
Multiple eventsources (events) can be placed)
$ ('# Calendar'). fullcalendar ({
Eventsources :[
'/Feed1.php ',
'/Feed2.php'
]
});
Alldaydefault
When allday in event object is specified, its default value is
Ignoretimezone ignore timezone
T08: 15: 30-
Startparam: name of the start parameter passed to the server
Endparam is the same as above
Lazyfetching
Whether to obtain the event from the cache information when the view changes. For example, if the monthly view is switched to the weekly view, the default value is
Loading (callback) function (isloading, view)
It is triggered when Ajax is called to obtain the event.
Updateevent (method)
Update the event on the client and re-describe it on the page
Clientevents (method)
Obtains all the events stored by the client.
. Fullcalendar ('clientevents' [, idorfilter])-> Array
Removeevents (method)
Delete the event and re-describe it
Refetchevents (method)
Get the events again and redraw
Addeventsource (method)
Add eventsource and immediately describe it on the page
. Fullcalendar ('addeventsource', source)
Removeeventsource (method)
Same as above
4.11 Event Description (corresponding to events in the entire Callendar)
Eventcolor
Eventbackgroundcolor
Eventbordercolor
Eventtextcolor
Eventrender (callback)
Triggered when an event is depicted
Function (event, element, view ){}
Event is the change event, and element is the DIV element used to render the change event.
Eventafterrender (callback)
Same as above
Renderevent (method)
. Fullcalendar ('renderevent', event [, stick])
Rerenderevents (method)
. Fullcalendar ('rerenderevents ')
Same as refetchevents
4.12 drag events
You need to add the jquery uidraggable plug-in and set editable to true. The related attributes and methods are similar to those of events.
Editable
Determines whether the events on the calendar can be modified.
Disabledragging
Disables ALL event dragging, even when events are editable.
Disableresizing
Disables ALL event resizing, even when events are editable.
Dragrevertduration
Time it takes for an event to revert to its original position Afteran unsuccessful drag.
Dragopacity
The opacity of an event while it is being dragged.
Eventdragstart (callback)
Triggered when event dragging begins.
Eventdragstop (callback)
Triggered when event dragging stops.
Eventdrop (callback)
Triggered when dragging stops and the event has moved to a differentday/time.
Eventresizestart (callback)
Triggered when event resizing begins.
Eventresizestop (callback)
Triggered when event resizing stops.
Eventresize (callback)
Triggered when resizing stops and the event has changed in duration.
4.13 drag events from outside the calendar to the calendar
Additional requirements:
① Need jquery-UI related controls support jquery-ui-1.8.17.custom.min.js
② Set the dropple attribute of the calendar to true.
Basic Ideas
① Build easy-to-drag elements in the calendar fat <div>
② Set the drop operation for the corresponding Div
$ ('# External-events Div. External-event'). Each (function (){
// Create an event object
// It doesn' t need to have a start or end
VaR eventobject = {
Title: $. Trim ($ (this). Text () // use the element's text as the eventtitle
};
// Store the event object in the DOM element so we can get to itlater
$ (This). Data ('eventobject ', eventobject );
// Make the event draggable using jquery UI
$ (This). draggable ({
Zindex: 999,
Revert: True, // willcause the event to go back to its
Revertduration: 0 // original position after the drag
});
});
③ Construct the event and depict it in the drop callback in the calendar
Drop: function (date, allday) {// This function is called whensomething is dropped
// Retrieve the dropped element's stored event object
VaR originaleventobject = $ (this). Data ('eventobobject ');
// We need to copy it, so that multiple events don't have AReference to the same object
VaR copiedeventobject = $. Extend ({}, originaleventobject );
// Assign it the date that was reported
Copiedeventobject. Start = date;
Copiedeventobject. allday = allday;
// Render the event on the calendar
// The Last 'true' argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent)
$ ('# Calendar'). fullcalendar ('renderevent', copiedeventobject, true );
// Is the "Remove after drop" checkbox checked?
If ($ ('# Drop-delete'). Is (': checked ')){
// If so, remove the element from the "draggable events" list
$ (This). Remove ();
}
}
4.14. Date Conversion Tool
Formatdate (function)
Formats a date object into a string.
Formatdates (function)
Formats A Date range (two date objects) into a string.
Parsedate (function)
Parses a string into a date object.
Parseiso8601 (function)
Parses an iso8601 string into a dateobject.