FullCalendar calendar plug-in instructions, fullcalendar calendar

FullCalendar calendar plug-in instructions, fullcalendar calendar

FullCalendar provides rich attribute settings and method calls. developers can quickly develop a calendar based on the API provided by FullCalendar, this document describes the common properties, methods, and callback functions of FullCalendar. The current version 1.6.4.

Normal display settings

Attribute	Description	Default Value
Header	Set the calendar header information. If this parameter is set to false, the header information is not displayed. Including left, center, right, left, right, and right. Each position can correspond to the following Configuration: Title: displays information about the current month, week, and day. Prev: the button used to switch to the last month/week/day view. Next: the button for switching to the next January/week/day View PrevYear: button used to switch to the previous year view NextYear: button used to switch to the next year's View	{ Left: 'title ', Center :'', Right: 'Today prev, next' }
Theme	Whether to use jquery ui themes. If it is set to true, You need to load css and js files related to jquery ui.	False
ButtonIcons	Set the button style corresponding to variables such as prev and next used in the header, which is valid only when theme is true. If you call the jQuery ui style but do not want to use its icon style, you can set this attribute to false.	{Prev: 'circle-triangle-W', next: 'circle-triangle-e '}
FirstDay	Set the first day of the week, Sunday, Monday, and so on.	0
IsRTL	When it is set to true, the calendar is displayed from right to left. It seems to be designed for the Arab.	False
Weekends	Whether the weekend is displayed. If it is set to false, the weekend and Sunday are not displayed.	True
HiddenDays	Hide one or several days of a week in the array format, such as hiding Tuesday and Friday: [2, 5]. It is not hidden by default, Unless weekends is set to false.	[]
WeekMode	The weekly view mode is displayed in the monthly view. The monthly view height may vary depending on the number of weeks each month. Fixed: fixed display 6 weeks high, the calendar height remains unchanged Liquid: the number of weeks is not fixed, and the height varies with the number of weeks. Variable: the number of weeks is not fixed, but the height is fixed.	'Fixed'
WeekNumbers	Whether to display the week (the week in the year) in the calendar. If it is set to true, the week count is displayed in the upper left corner of the month view, week view, and daily view.	False
WeekNumberCalculation	Weekly display format.	"Iso"
Height	Set the height of the calendar, including the header calendar header, which is not set by default. The height is adaptive according to the aspectRatio value.
ContentHeight	Set the height of the calendar subject content, excluding the header part. It is not set by default. The height is adaptive according to the aspectRatio value.
AspectRatio	Set the ratio of the calendar cell width to height.	1.35
HandleWindowResize	Whether the browser window size changes automatically.	True
WindowResize	Callback: triggers the function when the browser window changes. Use: $ ('# Calendar'). fullCalendar ({ WindowResize: function (view ){ Alert ('the calendar has adjusted to a window resize '); } });
Render	Method, bind the calendar to the id. $ ('# Id'). fullCalendar ('render ');
Destroy	Method: destroys the id calendar and returns the calendar to the pre-initialization status. $ ('# Id'). fullCalendar ('deststroy ');

View

FullCalendar provides five available views, including month, basicWeek (basic weekly view, with no specific time displayed on the left), and basicDay (basic daily view with no specific time displayed on the left ), agendaWeek (weekly view) and agendaDay (daily view ).

View object attributes:

Attribute	Description
Name	Including month, basicWeek, basicDay, agendaWeek, agendaDay
Title	Title content (for example, "September 2013" or "Sep 7-13 2013 ")
Start	Date type, the first day of the view
End	Date type, the last day of the view. Because it is a closed value, for example, in the month view, the month of January 1, October, the end corresponds to the first day of January 1, November.
VisStart	Date type. Under the first day. month view that can be accessed under this view, this value is the first day of the month, and under week view, it is usually consistent with start
VisEnd	Date type, the last accessible day

View other attributes and Methods

Attribute	Description	Default Value
DefaultView	Default view during calendar Initialization	'Month'
GetView	Method To obtain view object information, such as obtaining the title content of the current view: Var view = $ ('# calendar'). fullCalendar ('getview'); alert ("The view's title is" + view. title );
ChangeView	Method, switch the view . FullCalendar ('changeview', viewName) ViewName is one of the five Views

Calendar options

The following options apply to the agendaWeek and agendaDay views.

Attribute	Description	Default Value
AllDaySlot	In agenda view mode, whether to display all-day on top of the calendar)	True
AllDayText	Defines the text of all-day information displayed above the calendar	'All-day'
AxisFormat	Set the time display format on the left of the calendar agenda view. The default format is 5: 30pm.	'H (: mm) tt'
SlotMinutes	In the agenda view, the interval between two times (minutes)	30
DefaultEventMinutes	The default execution duration of an event. If the event object does not specify the execution duration, the default execution duration is two hours.	120
FirstHour	When switching to agenda, the time position for the initial scroll bar to scroll. The default value is six o'clock.	6
MinTime	Set the display time from the following time	0
MaxTime	Set the display time to end in a few days	24
SlotEventOverlap	Set whether the event display in the view can overlap and overwrite	True

Current Date settings

Attribute	Description	Default Value
Year	Set the calendar year, which must be four digits, for example, 2013. If this parameter is not set, the default value is the current year.
Month	Set the month to initialize the calendar, starting from 0. If the year and month are not specified, the calendar starts from January 1, January.
Date	Set the date of the calendar initialization, which is only valid in the weekly view and daily view.
Prev	Method To Go To The last month (weeks, days) view $ ('# Calendar'). fullCalendar ('prev ');
Next	Method To Go To The January (week, day) view $ ('# Calendar'). fullCalendar ('Next ');
PrevYear	Method To go to the previous year view
NextYear	Method to go to the next year's View
Today	Method, enter the day
GotoDate	Method to specify a day in the calendar $ ('# Calendar'). fullCalendar ('gotodate', year [, month, [date])
IncrementDate	Method, with the current time as the axis, move the calendar forward or backward to the specified length of time, for example: $ ('# calendar '). fullCalendar ('incrementdate',-3, 2,-5) indicates that the calendar year is moved three years forward, and the month is shifted to February, and the day (number of days) is moved five days forward.
GetDate	Method, returns the date in the current calendar

Text and time Customization

You can set text information displayed in the calendar as needed, such as the month in Chinese.

Attribute	Description	Default Value
TimeFormat	Set the time format of the displayed calendar event, for example, timeFormat: 'H: mm'. The 24-hour format is shown.	{Agenda: 'H: mm {-h: mm }}
ColumnFormat	Sets the format text for displaying the header information of each calendar list. Default Value: { Month: 'ddd ', // Mon Week: 'ddd M/d', // Mon 9/7 Day: 'dddd M/d' // Monday 9/7}	See description
TitleFormat	Set the text information used to display the calendar header. Default Value: { Month: 'mmmm yyyy', // September 2013 Week: "MMM d [yyyy] {'-' [MMM] d yyyy}", // Sep 7-13 2013 Day: 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2013 }	See description
ButtonText	Set the display text of buttons in the calendar header. Default Value: { Prev: 'stopped', // response :'‹',//‹ Next :'›',//› PrevYear :'«',//« NextYear :'»',//» Today: 'today ', Month: 'month ', Week: 'Week ', Day: 'day' }	See description
MonthNames	Full name of month. Default Value: ['January ', 'february', 'march', '0000l', 'may', 'june', 'july', 'August ', 'September ', 'October ', 'november', 'december']	See description
MonthNamesShort	Abbreviated month name. Default Value: ['Jan ', 'feb', 'mar', 'apr', 'may', 'jun', 'aug ', 'sept', 'oct', 'nov', 'dec ']	See description
DayNames	Full name of the week. Default Value: ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'Friday', 'saturday']	See description
DayNamesShort	Abbreviated weekly name. Default Value: ['sun', 'mon ', 'tue', 'wed', 'thu', 'fri', 'sat ']	See description
WeekNumberTitle	Weekly, that is, the week of the year	"W"

Mouse clicks and slides

The following lists the callback functions that are called when the mouse clicks or slides over an element in the calendar.

Attribute	Description
DayClick	Call back is triggered when you click a day in the calendar. Usage: $ ('# Calendar'). fullCalendar ({ DayClick: function (date, allDay, jsEvent, view ){ Do something... } }); Date is the time of the day to be clicked (if it is in the agenda view, it also contains the time). When you click a day in the monthly view, allDay is true. In agenda mode, when you click the narrow bar of all-day, allDay is true, and the day under other agenda views is false, jsEvent is a common javascript event, it contains the basic information of the click event.
EventClick	This operation is triggered when you click a calendar event. Usage: $ ('# Calendar'). fullCalendar ({ DayClick: function (event, jsEvent, view ){ Do something... } }); Event is a calendar (event) object, jsEvent is a javascript event, and view is the current view object.
EventMouseover EventMouseout	The usage and parameters of the mouse over and off events are the same as those

Select Operation

Attribute	Description	Default Value
Selectable	Whether to allow users to select objects in the calendar by clicking or dragging, including days and times.	False
SelectHelper	When you click or drag to select a time, the default loading prompt is displayed. This attribute is only available on a weekly or daily basis.	False
UnselectAuto	Whether to automatically cancel the selected status when you click a location other than the page calendar.	True
UnselectCancel	Specify which elements do not clear the selected items. Specify '# someid' as the JQUERY selector '.	''
Select	Callback: callback of the selected function. Usage: Function (startDate, endDate, allDay, jsEvent, view) StartDate: Start Time of the selected region EndDate: End Time of the selected region AllDay: whether it is a full-day event StartDate: jasond object StartDate: current view object
Unselect	Callback: select the callback when the call is canceled. Usage: Function (view, jsEvent)
Select	Method to select a time. Usage: $ ('# Calendar'). fullCalendar ('select', startDate, endDate, allDay)
Unselect	Method: $ ('# Calendar'). fullCalendar ('unselect ')

Calendar event data

The most important part of FullCalendar, which is used for calendar event-related information.

Event Object, which is a standard Object used to store calendar Event information. Only title and start are required.

Attribute	Description
Id	(Optional) Unique Identifier of an event. Duplicate events have the same id.
Title	Required. The title of the event displayed on the calendar.
AllDay	Optional; true or false; whether it is a full-day event.
Start	Required. The start time of the event.
End	Optional. End Time.
Url	(Optional) when specified, the corresponding url is opened when the event is clicked.
ClassName	Specifies the event style.
Editable	Whether the event can be edited. editable means that the event can be moved or changed.
Source	Specifies the eventsource object pointing to the secondary event.
Color	Background and border color.
BackgroundColor	Background color.
BorderColor	Border color.
TextColor	Text color.

Event source object

The event source is the data source in the Calendar. FullCalendar provides arrays, function calls, And JSON data. Of course, you can use Google Calendar feed to obtain data interfaces. Helloweba.com will be followed by an article dedicated to event data operations, including data query, write, update, and delete operations.

The following describes the parameter attributes related to Event Events.

Attribute	Description	Default Value
EventSources	Event source, which stores array objects. It can be Arrays/Functions/URLs.
AllDayDefault	Whether the event is a full-day calendar event.	True
IgnoreTimezone	Whether to ignore the time zone.	True
StartParam	When you use the URL method to obtain the events data source, the parameters automatically inserted into the URL indicate the start time of the calendar event to be crawled.	'Start'
EndParam	The same as the startParam parameter, indicating the end time of the calendar event to be crawled.	'End'
LazyFetching	Whether to obtain the event from the cache information. For example, switch from the monthly View to the weekly view.	True
EventDataTransform	Callback: converts an external data source to data that can be processed by Fullcalendar.
Loading	Callback: When the calendar starts loading, the isLoading parameter is triggered once if it is set to true. After the calendar is loaded, the isLoading parameter is set to false. Usage: Function (isLoading, view)
UpdateEvent	Method: update a calendar event in the calendar space. If it is a duplicate calendar event, it is updated. Usage: $ ('# Calendar'). fullCalendar ('updateevent', event)
ClientEvents	Method, returns the FullCalendar array of the CalEvents object that has been stored in the client. The second parameter has the same meaning as the second parameter of the removeEvents method, but in the filter, if true is returned, the CalEvent object will be added to the returned array.
RemoveEvents	Method: delete a calendar event from the calendar. The second parameter can be left blank. You can enter an id or a filter (a function that accepts the CalEvent object as a parameter ). Usage: $ ('# Calendar'). fullCalendar ('removeevents' [, idOrFilter])
RefetchEvents	Method, re-capture all calendar events on the calendar event source and render them.
AddEventSource	Method to add a calendar event source. After adding a calendar event, FullCalendar immediately obtains the calendar event from the source and loads it to the calendar. The second parameter is consistent with the url parameter used when the Calendar is defined.
RemoveEventSource	Method to remove a calendar event source. The calendar time obtained from the source will be immediately removed from the calendar.

Event Rendering

 

Attribute	Description
EventColor EventBackgroundColor EventBorderColor EventTextColor	Set the background color, border color, and text color of the calendar event. You can use any color that supports css, such as # f00, # ff0000, rgb (, 0), or red.
EventRender	Callback: triggered when a calendar event is rendered. Usage: Function (calEvent, element, view)
EventAfterRender	Callback: triggered when a calendar event is rendered. Usage: Function (event, element, view ){}
EventDestroy	Callback: triggered when a calendar event is removed. Usage: Function (event, element, view ){}
RenderEvent	Method: once the calendar gets the date source again, the original calendar disappears. When stick is set to true, the calendar is permanently saved to the calendar.
RerenderEvents	Method to re-render all events.

Drag and zoom calendar events

The drag and zoom functions depend on the draggable and resizable functions of jQuery ui. Therefore, jQuery ui plug-ins must be loaded in advance during use.

Attribute	Description	Default Value
Editable	You can drag, scale, or edit an image.	False
EventStartEditable	Whether the event can be dragged at the beginning.	True
DragRevertDuration	If the drag fails, how long will it take to restore to the original state, in milliseconds	500
DragOpacity	Opacity when dragging. { Agenda:. 5 // For agenda Attempt '': 1.0 // other views }	See description
EventDragStart, EventDragStop	Callback, triggered before and after a calendar event is dragged. The drag here is not necessarily a valid drag, as long as the calendar event control is dragged, the event is triggered. You can obtain data such as displacement and position from this object. Usage: function (event, jsEvent, ui, view ){}
EventDrop	Callback: triggered when the drag and drop is complete and the time changes. Usage: Function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ){} How many days have ayDelta moved the calendar forward or backward? The value of minuteDelta is valid only in the agenda view and is moved at a time. If allDay is a monthly or all-day calendar of the agenda view, the value is true; otherwise, the value is false.
EventResizeStart, EventResizeStop	Callback, which occurs after a calendar event changes its size (you do not have to change it). Usage: Function (event, jsEvent, ui, view ){}
EventResize	Callback, called after the calendar event is changed and successful, the parameter and eventDrop parameter are used in the same way. Usage: Function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ){}

Date Tool

Function	Description
FormatDate	Format a date. Format a date in the specified format and return a string. The options option is an object that sets the attribute values supported by localization variables. For example, {monthNames: ['August 11', 'August 11',…], DayNames: ['sunday', 'monday',...]}, Usage: $. FullCalendar. formatDate (date, formatString [, options])
FormatDates	Format two dates at a time, similar to the previous format date, except that braces {…} are used in formatString {...} To describe the format of the second date. Usage: $. FullCalendar. formatDates (date1, date2, formatString [, options])
ParseDate	Parses a Date and converts a string into a Date object in javascript. This string can be in three formats: ISO8601, IETF, and UNIX timestamp. Usage: $. FullCalendar. parseDate (string)
ParseISO8601	Converts an ISO8601 string into a javascript Date object. Usage: $. FullCalendar. parseISO8601 (string [, ignoreTimezone])

References:

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

FullCalendar http://www.cnblogs.com/mycoding/archive/2011/05/20/2052152.html

FullCalendar: Chinese API: http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html