Fullcalendar official documentation Translation 2

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.