Fullcalendar official documentation Translation

Official documentation: http://fullcalendar.io/docs/

: Http://fullcalendar.io/download/

 

1. usage. After the related JS and CSS are introduced, $ ('# div_name'). fullcalendar ({// options}); an option object is accepted.

2. Common attributes

2.1. year, month, Date: integer, date of initialization loading.

2.2. defaultview: string type. The default value is 'month;

2.2.1. Allowed views:

2.2.1.1. The Month page displays the calendar style, calendar, January 1, January.

2.2.1.2. The basicweek page displays a week without special styles.

2.2.1.3. The basicday page is displayed for one day with no special style

2.2.1.4. A week is displayed on the agendaweek page, and a detailed 24-hour schedule (that is, the agenda) is displayed)

2.2.1.5. A day is displayed on the agendaday page, showing the detailed 24-hour schedule

2.3. header: defines the button/text at the top of the calendar. False indicates no header is used ., use the left, center, and right attributes for layout. The default value is {left: 'title', center: '', right: 'Today Prev, next '}, supported attribute buttons:

2.3.1. Title: a text containing the current date

2.3.2. PREV: returns the last month/week/day based on The View.

2.3.3. Next: return the next month/week/day based on The View.

2.3.4. prevyear: returns the calendar to the previous year.

2.3.5. nextyear: returns the calendar to the next year.

2.3.6. Today: Move the calendar to the current day.

2.3.7. View name: The names of Views listed above are used to switch between views.

2.4. buttontext: defines the display text of the buttons used in the header: accepted attribute names: Prev, next, prevyear, etc.

2.5. aspectratio: accept a floating point parameter and adjust the width and height ratio.

2.6. alldaydefault: boolean type. The default value is true, which determines the default value of the allday attribute of each calevent. allday indicates whether a calendar event is a full day, that is, ignore the specific time and only calculate the number of days. by default, all newly added schedules are allday without instructions. You can set alldaydefault so that the new schedule time is followed by default.

2.7. Weekends: boolean type. The default value is true, indicating whether to display columns on Saturday and Sunday.

2.7.1. finxed: fixed monthly display of 6 weeks.

2.7.2. liquid: It may display 4, 5, 6 weeks, depending on the month, the height of the Week will be extended to the variable height of the fill, depending on aspectratio, here the height of the month is set.

2.7.3. vairiable: It may display 4, 5, 6 weeks, depending on the month. The height of each week has a fixed value, that is, the height of the entire month changes with the number of rows in a few weeks.

2.8. alldayslot: Boolean value. The default value is true. It indicates whether the all-day block shown above is displayed in Agenda views mode.

2.9. alldaytext: Text Content in the allday area.

2.10. firsthour: integer. The default value is 6. It indicates that the nth hour is displayed in views of agenda. This table is controlled by scroll.

2.11. slotminutes: integer. The default value is 30, which indicates the interval between two times in views of agenda, that is, the number of minutes for each small row in the row where no hour is located.

2.12. defaulteventminutes: integer. The default value is 120. It is related to the event and the function is uncertain.

3. Schedule editing

3.1. Editable: boolean type. The default value is false. It is used to set whether the calendar in the calendar can be edited. editable refers to whether the calendar can be moved or changed.

3.2. disabledragging: boolean type. The default value is false. All events can be dragged. editable = true

3.3. diableresizing: Boolean. The default value is false. All events can be changed in size and must be editable = true.

3.4. dragrevertduration: indicates the time when the drag is restored. The default value is 500 milliseconds. This indicates the time when the control returns to the original position after an unsuccessful drag.

3.5. dragopacity: Float Type, indicating the opacity when dragging. specify a float value, indicating that all views use this opacity. You can also assign a value to an object and use views hash to specify the opacity of a specific view, when an object uses views hash to specify the opacity, you can specify a part of the object, and then use the '': float method to indicate that the opacity is used for all other views.

3.5.1. Month

3.5.2. Week: basicweek and agendaweek

3.5.3. Day: basicday and agendaday

3.5.4. Agenda: agendaday and agendaweek

3.5.5. agendaday

3.5.6. agendaweek

3.5.7. Basic: basicweek and basicday

3.5.8. basicweek

3.5.9. basicday

3.5.10. '': empty string, indicating all other views

4. format the time and date

4.1. Supported formatting placeholders

4.1.1. S: seconds

4.1.2. SS: Second, two digits

4.1.3. M: minutes

4.1.4. MM: minute, two digits

4.1.5. h: hour, in 12-hour format

4.1.6. hh: hour, in 12-hour format, two digits

4.1.7.h: hour, in 24-hour format

4.1.8. hh: hour, in 24-hour format, two digits

4.1.9. D: Date Number

4.1.10. DD: Date Number, two digits

4.1.11. DDD: Date name, abbreviation

4.1.12. dddd: Date name, full name

4.1.13. M: number of months

4.1.14. MM: number of months, two digits

4.1.15. Mmm: month name

4.1.16. Mmmm: month name, full name

4.1.17. YY: two year

4.1.18. yyyy: 4-digit year

4.1.19. T: Add a or P

4.1.20. TT: Add am or PM

4.1.21. T: Add a or P

4.1.22. TT: Add am or PM

4.1.23. U: iso8601 format

4.1.24. S: add the suffix St, Nd, RD, th to the date, indicating the day

4.1.25. special characters:

4.1.25.1 .'... 'Original intent output text

4.1.25.2. ''indicates a single quotation mark.

4.1.25.3 .(...), At least one of the formatting dates represented by placeholders in parentheses is not empty before this set of formatting strings in parentheses is displayed.

4.2. titleformat: String/object: Determine the title display date format in the header. Here, you can also use view hash to configure the object. If you use view hash, the title format of each view is different.

4.3. columnformat: String/object, which is configured in the same way as titleformat, affects the text displayed in the header of each column in various views. The explanation of allday when it is false in this document is not clear.

4.4. timeformat: The default value is {agenda: 'H: mm {-H: mm}, which affects the time format displayed on the added calendar.

4.5. axisformat: String. The default value is H (: Mm) TT, which affects the Time Display Mode of the leftmost column of Agenda views.

4.6. Views hash: currently, options that support view hashes include dragopacity, titleformat, columnformat, timeformat.

5. formatdates: $. fullcalendar. formatdates (date1, date2, formatstring, [Options]): similar to formatdate, but two dates are accepted. In the format string, {…} is used {...} To format the second date.

6. Event sources:

6.1. Events: array/string/function:

6.1.1. Configure the event Source

6.1.1.1. arrays are hard-coded calendar events.

6.1.1.2. Provide a URL that returns a calendar event group in JSON or array. The get parameter depends on startparam and endparam options.

6.1.1.3. A function is provided to capture data in a custom way. The function must take the start, end, and callback parameters to indicate the start time and end time of the captured calendar event, respectively, callback after the capture is completed, for example:
Events: function (START, end, callback) {$. getjson ("/myscript", {start: Start. gettime (), end: end. gettime ()}, function (result) {callback (result );})}

6.2. eventsources: array, just like the events option. However, this is used to configure multiple calendar event data sources.

6.3. startparam: String, default value: start. This parameter is automatically inserted into the URL when the events data source is obtained using the URL method, indicating the start time of the calendar event to be crawled.

6.4. endparam: String, default value: end, which has the same meaning as startparam, indicating the end time of the calendar event to be crawled

6.5. cacheparam: When a calendar event is obtained using a json url, to prevent data synchronization problems caused by Ajax cache, the value is the current time added by the full calendar control. can query Ajax cache solutions.

7. calevent object: standard currently used calendar event source (note the difference between calendar events and events in the computer field. Events here are business events, indicates a record of doing something at a certain time, while a computer event is a user's action on the computer)

7.1. ID: integer/string: ID of the calendar event. The repeat calendar event has the same ID.

7.2. Title: string, the title of the calendar event

7.3. allday: Boolean. The default value is true, indicating whether a calendar event focuses on the specific time. If it is true, it indicates that the calendar event does not focus on the specific time, because it exists at all times of the day. Therefore, the date of the calendar event is ignored. It is displayed in the special allday area in Agenda view. If it is false, it focuses on the start time and end time.

7.4. Date: date type, alias of the Start attribute

7.5. Start: date type, a javascript date object. For convenience, you can use IETF format, iso8601 format, Unix timestamp, and other string representation methods.

7.6. End: Date (optional): Same as start, but it indicates the end time of the calendar time.

7.6.1. If the corresponding calendar event is allday, the time span is three days from, January 1, October 1 to, October 3.

7.6.2. If the corresponding calendar time is not allday, the time span is 48 hours on August 8, October 1, and August 8, October 3.

7.6.3. URL: String, set a URL, which is used when the calendar event is clicked. The new page is opened in the current window by default. If more complex event processing is used, use eventclick to trigger an action (triggered action is used in this document to describe events in the computer field and prevent calendar events that conflict with the domain where the plug-in is located .)

8. method: method call method: $ ('. selector '). fullcalendar ('method _ name') first obtains the calendar control object using a jquery selector, and then calls fullcalendar (). The parameter is a string-type method name.

8.1. Prev, jump to the previous month/week/day, according to the current view

8.2. Next, same as Prev, is the last month/week/day

8.3. Today, jump to today.

8.4. gotodate: Call method: $ ('. selector '). fullcalendar ('gotodate', year [, month [, date]) The call method is named gotodate. The following three parameters are required: year, month, day, and year. The other two parameters are optional. the month parameter is calculated starting from 0, that is, January corresponds to 0. this method can also be called using a single parameter to pass a javascript date object.

8.5. incrementdate: $ ('. selector '). fullcalendar ('crementdate', years [, months [, days]) uses the current time as the axis to move the calendar forward or backward for a specified length of time, for example: $ ('. selector '). fullcalendar ('incrementdate',-3, 2,-5) indicates moving the calendar year forward for three years, and moving the month backward for February, Day (days ??? Haha) move forward for 5 days.

8.6. changeview: $ ('. selector'). fullcalendar ('changeview', viewname) switch the view of the calendar. viewname must be the allowed views

8.7. updateevent: $ ('. selector '). fullcalendar ('updateevent', calevent) updates a calendar event in the calendar space. If it is a calendar event of repeat, it is updated. the updated calevent object must be the calevent instance that is passed as a parameter or returned by the clientevents method in triggered action (trigger event), that is, it must be legal and searchable in the calendar.

8.8. renderevent: $ ('. selector '). fullcalendar ('renderevent', calevent, [stick]) renders a new calevent object to the calendar. This object must have at least the title and start attributes. by default, the newly rendered calevent object disappears when the calendar re-obtains the calendar event source (such as Prev, or next call). If the stick parameter is set to true, the newly rendered calevent object will be permanently retained.

8.9. removeevents: $ ('. selector '). fullcalendar ('removeevents', [idorfilter]): deletes a calendar event from the calendar. the second parameter can be left blank. It can be an ID or a filter (a function that accepts the calevent object as a parameter)

8.9.1. Unspecified: All calendar events are removed

8.9.2. ID: All calendar events with the specified ID are removed.

8.9.3. filter: the filter accepts the calevent object as a parameter. In the filter, it is processed through some policies. If it needs to be removed, true is returned; otherwise, false is returned.

8.9.4. clientevents: $ ('. selector '). fullcalendar ('clientevents', [idorfilter]): returns the array of the calevents object that fullcalendar has stored on the client. The second parameter has the same meaning as the second parameter of the removeevents method, except in the filter, if true is returned, the calevent object will be added to the returned array.

8.9.5. addeventsource: $ ('. selector '). fullcalendar ('addeventsource', source): adds 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.

8.9.6. removeeventsource: $ ('. selector '). fullcalendar ('removeeventsource', source) removes a calendar event source. The calendar time obtained from the source will be immediately removed from the calendar.

8.9.7. rerenderevents: $ ('. selector'). fullcalendar ('rerenderevents') re-renders all calendar events on the screen.

8.9.8. refetchevents: $ ('. selector'). fullcalendar ('refetchevents') crawls the calendar events on all calendar events and renders them.

8.9.9. render: $ ('. selector '). fullcalendar ('render'): This method is used to render the entire calendar immediately. This method is automatically called when fullcalendar is called on a visible element, if it is called on a hidden element, You need to manually call it as soon as possible to make the element visible and rendered.

9. triggered action: Events in the computer field

9.1. viewdisplay: function (View )..... This is triggered when the view of a calendar is loaded and changed. The view accepted is the object corresponding to the view mentioned earlier.

9.2. Loading: function (isloading, view )..... When the calendar starts to load, the isloading parameter is set to true, the calendar is loaded, and the isloading parameter is set to false.

9.3. windowresize: function (View) is triggered when the size of the calendar control changes due to the change of the window containing the calendar. (it is unclear which element the this variable points to in this method, because my browser does not change the size of the calendar .)

9.4. dayclick (daydate, allday, jsevent, view): triggered when a user clicks day. daydate is the time of the day to be clicked (if it is in Agenda view, it also contains time ), when you click one day under month view, allday is true. In agenda mode, When you click the narrow bar of all-day, allday is true, if you click day in another agenda view, the value is false. jsevent is a common JavaScript event that contains the basic information of the click event. in this method, this obtains a common HTML Dom element, which is a TD containing the date.

9.5. eventrender: function (calevent, element, view): triggered before calendar event rendering. calevent is a calevent calendar event object, and element is the jquery object corresponding to the calevent object. view is the Instance Object of the current view. This method uses the keyword "this" to obtain the reference of the calevent object. if false is returned, all calendar events are rendered. in this method, you can modify the jquery object element to change the specific rendering method. Therefore, it can be used with other plug-ins.

9.6. eventclick, eventmouseover, eventmouseout: function (calevent, jsevent, view): Events with calendar events clicked, Mouse crossed, and mouse left. the parameters are the same as those described above. if the eventclick event returns false, you can prevent the browser from redirecting to the URL specified in the initial configuration of the calendar event. to prevent the spread of such events, refer to the DHTML document about the event propagation and original response.

9.7. eventdragstart, eventdragstop: function (calevent, jsevent, UI, view) is 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. parameters with the same name are the same as those described above. the UI stores a jquery UI object. data such as displacement and position can be obtained from this object.

9.8. eventdrop: function (calevent, daydelta, minutedelta, allday, revertfunc, jsevent, UI, view) is moved in a calendar event and successfully moved to another date/time.

9.8.1. daydelta: the number of days that the calendar event was moved due to saving the drag. The value is positive forward and negative.

9.8.2. minutedelta: the number of minutes that the calendar event moved due to this drag is saved. The value is positive and negative. The value is valid only in the agenda view.

9.8.3. allday: If you move under the month view or under the Agenda View to the all-day region, allday is true, and if you move to other regions of the Agenda view, false

9.8.4. revertfunc: Call this method to restore the original state of the drag. this method is mostly used for Ajax submission. After moving, the data is submitted to the background. If the background update fails, call this method based on the returned message to restore the page to its original state.

9.8.5. eventresizestart, eventresizestop: function (calevent, jsevent, UI, view): occurs after a calendar event changes the size (you do not have to change the size .) calevent stores calendar event information (date, title, and so on)

9.8.6. eventresize: function (calevent, daydelta, minutedelta, revertfunc, jsevent, UI, view.

10. view object

10.1. Name: view names listed above

10.2. Title: String: the value of the title variable that can be set in the header when switching to the view.

10.3. Start: date type, the first day of the view.

10.4. 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.

10.5. visstart: date type. In the first accessible day. Month view under this view, this value is the first day of the month. In week view, it is usually consistent with start.

10.6. visend: date type, last accessible day

11. color modification: Implemented by rewriting CSS

11.1. Example 1:

. FC-event ,. FC-agenda. FC-event-time ,. FC-event a {/* Background Color */border-color: black;/* border color (often same as background-color) */color: red; /* text color */} 11.2. example 2

. Holiday ,. FC-agenda. holiday. FC-event-time ,. holiday A {background-color: green;/* Background Color */border-color: green;/* border color (often same as background-color) */color: yellow; /* text color */} 12. topic. Use the topic provided by jquery UI.

12.1. Theme: Boolean. The default value is false. It is set to true. jquery UI themes are allowed.

12.2. buttonicons: object: change the style of the button corresponding to variables such as Prev and next used in the header. The default style is:

{PREV: 'circle-triangle-W', next: 'circle-triangle-e'} 13. Localization options:

13.1. firstday: Integer type. The default value is 0. The first day of a week is displayed. Sunday is 0, Monday is 1, and so on.

13.2. monthnames: array, the string used by the full name of the month. The default value is the full name of the month in English.

13.3. monthnamesshort: array, short for month, which is short for English month name by default

13.4. daynames: array, the string used by the full name of the week. The default value is the full name of the week in English.

13.5. daynamesshort: array, short for the week, which is short for the English week name by default

13.6. buttontext and alldaytext have been introduced in Sections 2.4 and 2.9.

14. Date Tool

14.1. format Date: $. fullcalendar. formatdate (date, formatstring [, options]): format a date in the specified format and return a string. the options option is an object, in which the attribute values supported by localization variables are set. for example, {monthnames: ['August 11', 'August 11',…], Daynames: ['sunday', 'monday',...]}

14.2. format two dates at a time: $. fullcalendar. formatdate (date1, date2, formatstring [, options]): similar to the previous formatting date, except that braces {…} are used in formatstring {...} To describe the format of the second date.

14.3. parsing Date: $. fullcalendar. parsedate (string): convert a string into a javascript date object. This string can be iso8601, IETF, or Unix timestamp.

14.4. parseiso8601: $ fullcalendar. parseiso8601 (string [, ignoretimezone]) converts an iso8601 string into a javascript date object.

15. link the calendar with Google's calendar management.

15.1. You need to introduce another JS file: Gcal. js

15.2. events: $. fullcalendar. gcalfeed ('your own Google Calendar feed address', {Editable: false, classname: 'gcal-events', currenttimezone: 'Time zone set on Google Calendar '}) in this way, the calendar on your Google Calendar is linked to your application.

15.3. The following code associates myself with my Google Calendar:

$ (Document). Ready (function (){

$ ('# Calendar'). fullcalendar ({

Defaultview: 'agendaweek ',

Events: $. fullcalendar. gcalfeed (

'Http: // response ',

{

Eidtable: True,

Classname: 'gcal-events ',

// Currenttimezone: 'Asia/Chongqing'

Currenttimezone: 'Asia/Tokyo'

}

)

});

});

16. Conclusion:

16.1. When using the SDK, download the released version instead of the development version.

16.2. files to be introduced:

<! -This CSS can be changed to your favorite style based on your own situation. The number of CSS lines in the 500 line is not very large. The main purpose is to clarify the relationship. -->

<LINK rel = 'stylesheet 'Type = 'text/CSS 'href =' ../fullcalendar.css '/>

<SCRIPT type = 'text/JavaScript 'src = '../jquery. js'> </SCRIPT>

<! -The following four JS files are jquery-ui-related packages. You can use them in fullcalendar or subscribe to a min version suitable for your use in the official jquery UI library, in this way, you will get a selectable, compressed, and separate JS file. high efficiency. -->

<SCRIPT type = 'text/JavaScript 'src = '../jquery/UI. Core. js'> </SCRIPT>

<SCRIPT type = 'text/JavaScript 'src = '../jquery/UI. draggable. js'> </SCRIPT>

<SCRIPT type = 'text/JavaScript 'src = '../jquery/UI. resizable. js'> </SCRIPT>

<SCRIPT type = 'text/JavaScript 'src = '../fullcalendar. Min. js'> </SCRIPT>

<SCRIPT type = 'text/JavaScript 'src = '../Gcal. js'> </SCRIPT> <! -If you need to use a Google synchronization account, you need to introduce it. -->

17. main concepts:

17.1. calendar: The DIV of the entire calendar control, that is, the container whose ID is calendar when we use $ ('# calendar'). fullcalendar in this way.

17.2. calendar event: a calendar record, for example, November 16, 2009 Ms at a.m. on Monday, January 1, 111. The title of the event is: "selfiflat, which needs to be done. mailbox: [email protected], blog: http://blog.csdn.net/lgg201"

17.3. trigger action: javascript events encapsulated by jquery ....

17.4. jsevent: the original JavaScript event.

17.5. because Javascript is a dynamic language, you can directly set the calevent object or any other object to save some data. For example, if you want to save your girlfriend's name in calevent, then you can calevent. girl_friend_name = 'beauul ul girl '. When you use it, you can get it directly .... It is best to use my_girl_friend_name = calevent. girl_friend_name | "another beautiful girl"; in this way, when your girlfriend stored in calevent is lost due to intermediate operations, or you have not saved it yet, you can get another beautiful girl without getting nothing, or even causing unnecessary troubles (Browser warning that you are trying to call the attributes of an undefined object ).

18. domain model: Well, I drew it based on my own understanding. I hope it will help you understand the concept of this calendar management.

 

 

This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/lgg201/archive/2009/11/17/4818941.aspx

 

Fullcalendar official documentation Translation