Jquery.fullcalendar Official document Translation (a small and easy-to-use calendar that integrates with Google Calendar)

reprint Please declare source: http://blog.csdn.net/lgg201

1. Using the method, introduce the relevant JS, CSS, $ (' #div_name '). Fullcalendar ({//options}); Accepted is an option object

2. General properties

2.1. Year, month, Date: integer, the date when the load was initialized.

2.2. DefaultView: String type, default is ' month;

2.2.1. Permitted views:

2.2.1.1. Month one page display January, calendar style

2.2.1.2. Basicweek One-page display, no special styles

2.2.1.3. Basicday One-page display day, no special style

2.2.1.4. Agendaweek one week, showing detailed 24-hour schedule (i.e. agenda)

2.2.1.5. Agendaday One-page display day, show detailed 24-hour schedule

2.3. Header: Defines the button/text at the top of the calendar, False indicates that the header is not used. Using left, center, and right three properties for layout, default is {left: ' title ', Center: ', right: ' Toda Y prev, Next '}, supports the use of the properties button:

2.3.1. Title: A text containing the current date

2.3.2. Prev: Returns the last month/week/day, depending on the view

2.3.3. Next: Returns the next month/week/day, depending on the view

2.3.4. Prevyear: Return the calendar to the previous year

2.3.5. Nextyear: Returning the calendar to the next year

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

2.3.7. View name: The supported views names listed above are used to toggle views

2.4. ButtonText: Defines the display text for the buttons used in the header: Accepted property names: Prev, Next, prevyear, etc.

2.5. Aspectratio: Accepts a floating-point parameter and adjusts the width-to-height ratio.

2.6. Alldaydefault: Boolean type, Default True, determines the default value of the Allday property for each calevent.  Allday indicates whether a schedule event is all day long, that is, ignoring the specific time and counting the number of days. By default, all newly added schedule times are allday, and you can set Alldaydefault to make the newly created schedule time, by default, the focus time.

2.7. Weekends: Boolean type, default to True, to identify whether to display columns for Saturday and Sunday.

2.7.1. finxed: Fixed monthly display for 6 weeks.

2.7.2. Liquid: May show 4, 5, 6 weeks, depending on the month, the height of the week will be elongated to the filling variable height, depending on the aspectratio, the height of the month here is fixed.

2.7.3. Vairiable: May show 4, 5, 6 weeks, depending on the month, the height of the week will have a fixed value, that is, the height of the entire month will vary with the number of weeks of the row.

2.8. Alldayslot: Boolean, the default is true, indicated in Agenda views mode, the above all-day small block is displayed.

2.9. The text content of the Alldaytext:allday area.

2.10. Firsthour: Integer, the default value is 6. In Agenda's views, the first time it was opened shows the Nth hour, the table is controlled by scroll.

2.11. slotminutes: int, the default value of 30, represents the interval between two times in a agenda's views. That is, the number of minutes that each of the other small lines in a row of one hours represents.

2.12. Defaulteventminutes: Integral type, default value 120, and event-related, function indeterminate.

3. Schedule Editor

3.1. Editable:boolean type, default value False, to set whether the schedule in the calendar can be edited. Editable means that you can move, change the size, and so on.

3.2. Disabledragging:boolean type, default false, all event can be dragged, must editable = True

3.3. Diableresizing:boolean, default false, all event can change size, must editable = True

3.4. Dragrevertduration: Drag the recovery time by default of 500 milliseconds, indicating the time after which the control replies to the original position after an unsuccessful drag.

3.5. Dragopacity:float type, which represents the opacity when dragging. Specify a float value, which indicates that all views use the opacity, can also be assigned to an object, through the views hash to specify the opacity of a particular view, when the object through the views hash to specify the opacity, you can specify a part, and then, The other uses the opacity in the ": Float" way to mark all other views under all 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. Formatting of time and date

4.1. Supported formatting placeholders

4.1.1. S: sec

4.1.2. SS: sec, two digits

4.1.3. M: Minutes

4.1.4. MM: minutes, two digits

4.1.5 H: Hours, 12-hour system

4.1.6. HH: Hours, 12-hour, two-digit

4.1.7 h: Hours, 24-hour system

4.1.8. HH: Hours, 24-hour, two-digit

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: Month number

4.1.14. MM: Month number, two digits

4.1.15. MMM: Month name, abbreviation

4.1.16. MMMM: Month name, full name

4.1.17. YY: Two-bit year

4.1.18. Year of Yyyy:4 Bit

4.1.19. T: Last afternoon plus a or P

4.1.20. TT: Last PM plus AM or PM

4.1.21. T: Last afternoon plus a or P

4.1.22. TT: Last PM plus AM or PM

4.1.23. u:iso8601 format

4.1.24. S: Give the date plus St, ND, RD, th and other suffixes indicating the day of the week

4.1.25. Special characters:

4.1.25.1. ' ... ' Original Intent output text

4.1.25.2. ' denotes a single quotation mark

4.1.25.3. (...), the bracketed placeholder represents the formatted date, at least one of which is not empty, to display this set of formatted strings in parentheses

4.2. Titleformat:string/object: Determines the format of the title display date in the header, which can also be configured using the View hash method, if configured using view hash, The title in each view is in a different format.

4.3. Columnformat:string/object, like the TitleFormat configuration, affects the header display text for each column in various view. The explanation in the document about Allday to false is not clear.

4.4. TimeFormat: The default is {agenda: ' H:mm{-h:mm}}, which affects the time format that is displayed on the specific schedule that is added.

4.5. axisformat:string, the default H (: mm) TT, affects the time display mode of the leftmost column under agenda views.

4.6. Views Hash: Now the options to support view hashes are: Dragopacity, TitleFormat, ColumnFormat, TimeFormat

5. Formatdates: $.fullcalendar.formatdates (date1, Date2, formatString, [options]): Similar to FormatDate, but accepts two date, in a formatted string , use {...} To format a second date

6. Event Sources:

6.1. Events:array/string/function:

6.1.1. Configuring event sources

6.1.1.1. Arrays are hard-coded schedule events.

6.1.1.2. Provides a URL that returns a JSON or array of schedule event groups, and the get parameters are dependent on the Startparam and Endparam options.

6.1.1.3. Provides a function to crawl the data in a custom manner, which takes the parameters start, end, callback, respectively, to indicate the start time, end time, and callback of the crawl event, such as:
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 schedule event data sources.

6.3. Startparam:string, Default: Start, this is the parameter that is automatically inserted into the URL when you use the URL to get the events data source, indicating the start time of the current scheduled event that needs to be crawled

6.4. Endparam:string, Default: End, and the Startparam parameter have the same meaning, indicating the end time of the scheduled event to crawl

6.5. Cacheparam: When using JSON URL to get schedule events, in order to prevent data synchronization problems caused by Ajax's own cache, the value of the authentication parameter name added is the current time added by full calendar control. Do not understand the Ajax caching solution can be queried.

7. Calevent object: Standard currently used schedule event source (note the difference between the schedule events here and the events in the computer domain, where events are business, a record of doing something at a certain time, and events in the computer domain are a user's action on the computer)

7.1. Id:integer/string: Identification of the schedule event, the repeat-type schedule event has the same ID

7.2. title:string, title of the schedule event

7.3. Allday:boolean, by default True, indicates whether a schedule event is a time-specific, if true, indicating that the schedule event is not focused on a specific time, is available all the time of the day, so the date of the event is ignored, in Agenda view through the The Allday area of the door shows that, if False, the focus is on the start time and the end time.

7.4. Date:date type, which is the alias of the Start property

7.5. Start:date type, a JavaScript Date object, for convenience, can be used in many ways such as the IETF format, the ISO8601 format, and the Unix timestamp.

7.6. End:date (optional): Same as Start, but indicates the end time of the schedule time.

7.6.1. If the corresponding schedule event is Allday, then October 1 8 o'clock to October 3 8 o'clock means that the span is 3 days

7.6.2. If the corresponding schedule time is not allday, then October 1 8 o'clock October 3 8 o'clock means the span is 48 hours.

7.6.3. url:string, set a URL that is used when the event is clicked, the new page is opened by default in the current window, and if more complex event handling is used, the Eventclick trigger action is used (this document uses the triggered Action to describe events in the domain of the computer, preventing a conflict with a schedule event in the domain where the plug-in is located.

8. Method: Method Invocation: $ ('. Selector '). Fullcalendar (' method_name ') first gets the Calendar control object using a jquery selector, and then calls Fullcalendar (), Parameter is a method name in the form of a string

8.1. Prev, jump to previous month/week/day, based on current view decision

8.2 Next, with Prev, is after January/week/day

8.3. Today, jump to this day.

8.4. GoToDate: Call Mode: $ ('. Selector '). Fullcalendar (' GoToDate ', year[, month[, Date]]) call method named GoToDate, followed by three parameters pass year, month, day, year is required   , the other two are optional.   The monthly month parameter is calculated starting at 0, which means that January corresponds to 0. The method can also be called with a single parameter, passing a JavaScript date object.

8.5. Incrementdate: $ ('. Selector '). Fullcalendar (' Incrementdate ', years[, months[, Days]]) Take the current time as an axis, move the calendar forward, or back to the specified length of time , such as: $ ('. Selector '). Fullcalendar (' Incrementdate ',-3, 2,-5) means moving the calendar year forward for 3 years, the month moving backwards February, day (days??? OH) move forward for 5 days.

8.6. ChangeView: $ ('. Selector '). Fullcalendar (' ChangeView ', viewName) switch calendar view, ViewName must be allowed views

8.7. Updateevent: $ ('. Selector '). Fullcalendar (' updateevent ', calevent) updates a schedule event in the calendar space, if it is a repeat schedule event. The updated Calevent object must be a calevent instance that is passed as a parameter in the triggered Action (trigger event) or Clientevents method, that is, it must be legal and retrievable in the calendar.

8.8. Renderevent: $ ('. Selector '). Fullcalendar (' renderevent ', calevent, [stick]) renders a new Calevent object into the calendar,   The object must have at least the title and start properties. By default, the newly rendered Calevent object disappears when the calendar retrieves the schedule event source (such as Prev, or next), and if the set stick parameter is true, the newly rendered Calevent object is guaranteed to persist forever.

8.9. Removeevents: $ ('. Selector '). Fullcalendar (' removeevents ', [Idorfilter]): Removes a schedule event from the calendar. The second parameter can not be filled, can fill in the ID, can be a filter (a function, accept the Calevent object as the parameter)

8.9.1. Do not fill in: All schedule events are removed

8.9.2. ID: Specifies that all schedule events that match the ID are removed

8.9.3. Filter: The filter accepts the Calevent object as a parameter, inside the filter, through some policy processing, if need to remove, returns True, otherwise returns false.

8.9.4. Clientevents: $ ('. Selector '). Fullcalendar (' clientevents ', [Idorfilter]): Returns an array of Calevents objects that Fullcalendar has stored to the client, the second parameter is the same as the second parameter of the Removeevents method, except that in the filter, if True is returned, the Calevent object is added to the returned array

8.9.5. Addeventsource: $ ('. Selector '). Fullcalendar (' Addeventsource ', source): Add a Schedule event source, add it,  Fullcalendar will get the schedule event from that source immediately and load it into the calendar. The second parameter is consistent with the URL parameter that defines the calendar time.

8.9.6. Removeeventsource: $ ('. Selector '). Fullcalendar (' Removeeventsource ', source) removes a schedule event source, The obtained schedule time on the source will also be removed from the calendar immediately.

8.9.7. Rerenderevents: $ ('. Selector '). Fullcalendar (' rerenderevents ') re-renders all schedule events on the screen.

8.9.8. Refetchevents: $ ('. Selector '). Fullcalendar (' refetchevents ') re-crawls all schedule events on the event source and renders them.

8.9.9. Render: $ ('. Selector '). Fullcalendar (' render '): This method is used to render the entire calendar at once, and the method is automatically called when Fullcalendar is called on a visible element. If called on a hidden element, you need to make the element visible and render as soon as possible by a manual call.

9. Trigger event (triggered Action): Events in the computer domain

9.1. Viewdisplay:function (view) ... every time the calendar is loaded and the view of the calendar is changed, it is triggered once. The view that is accepted is the object of the view that has been mentioned before.

9.2. Loading:function (isloading, view) ... when the calendar starts loading, the isloading parameter is true once, the calendar is loaded, and the isloading parameter is fired once.

9.3. Windowresize:function (view) is triggered when the size of the calendar control changes due to the size of the window that contains the calendar. (The This variable in this method points to which element is not clear, because my side of the browser change size does not cause the calendar size to change.)

9.4 Dayclick (DayDate, AllDay, JSEvent, view): Triggers when the user clicks on day, DayDate is the time of day to click (if in Agenda view, also contains time), click on a day under Month view , Allday is true, in Agenda mode, when you click the narrow bar of all-day, Allday is true, click on the other agenda view day is false, JSEvent is a normal JavaScript event,   Contains the underlying information for the Click event. In this method, this gets a normal HTML DOM element, which is a TD containing the date

9.5. Eventrender:function (calevent, Element, view): Triggered before a schedule event is rendered.  Calevent is a Calevent schedule event object, which is the jquery object corresponding to the Calevent object.   View is the instance object of the current view, which uses the keyword this to obtain a reference to the Calevent object.   The handling of this event returns false to prevent all schedule events from being rendered. This method can change the specific rendering method by modifying the jquery object element, so it can be used in conjunction with other plugins.

9.6. Eventclick, Eventmouseover, Eventmouseout:function (calevent, JSEvent, view): Events are clicked, the mouse is over, the mouse leaves the event.    Parameters are consistent with the same name as described above.  If the Eventclick event returns false, you can prevent the browser from jumping to the URL address specified by the corresponding schedule event at the initial configuration. The blocking propagation of this event can refer to the DHTML document's propagation of events and the original response.

9.7. Eventdragstart, Eventdragstop:function (Calevent, JSEvent, UI, view) schedule events are triggered before and after the event is dragged.  The drag here is not necessarily a valid drag, as long as the control of the schedule event is dragged and the event is triggered.  The same name parameter is the same as described above.  The UI holds a jquery UI object. You can get data such as displacement, position, and so on from this object.

9.8. Eventdrop:function (Calevent, Daydelta, Minutedelta, AllDay, Revertfunc, JSEvent, UI, view) is moved in one schedule event and successfully moved to another date Time.

9.8.1. Daydelta: Saves the number of days that this drag caused the schedule event to move, positive forward, and negative back.

9.8.2. Minutedelta: Saves the number of minutes that this drag causes the schedule event to move, positive forward, and negative back. This value is valid only under agenda view.

9.8.3. AllDay: If you move under Month view or move to the all-day area under agenda view, AllDay is true and the other area of the agenda view is moved to False

9.8.4. Revertfunc: Call this method to restore the drag you just made to its original state. 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.

9.8.5. Eventresizestart, Eventresizestop:function (Calevent, JSEvent, UI, view): Occurs after a schedule event changes size (not necessarily to change success.) Calevent Saves schedule event information (date, title, and so on)

9.8.6. Eventresize:function (Calevent, Daydelta, Minutedelta, Revertfunc, JSEvent, UI, view): Called after the schedule event has changed size and succeeded, Parameters are consistent with the EventDrop parameter usage.

Ten. View objects

10.1. Name: The view names listed earlier

10.2. Title:string: The value of the title variable that can be set in the header when switching to 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, so, for example, under Month view, October this month, then end corresponds to the first day of November.

10.5. Visstart:date type. The first day that can be accessed under the view. Month view, the value is the first day of the month, under Week view, is usually the same as start.

10.6. Visend:date type, last accessible day

11. Color changes: By overriding the CSS implementation

11.1. Example one:

. Fc-event,

. Fc-agenda. Fc-event-time,

. Fc-event a {

        Background-color: black; /* Background color */

        Border-color: black;     /* Border color (often same as background-color) */

        color: red;              /* Text color */

        }

11.2. Example Two

. 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. Themes, topics provided using the jquery UI

12.1. Theme:boolean, default false, set to True to allow UI themes with jquery

12.2. Buttonicons:object, change the style of the button corresponding to the prev used in the header, next, and the default style is:

{

        Prev: ' Circle-triangle-w ',

        Next: ' Circle-triangle-e '

}

13. Localization Options:

13.1. Firstday:integer type, default value 0. The day of the week on which the first day is displayed. Sunday is 0, Monday is 1, analogy.

13.2. Monthnames:array, the string used by the full month name, and the default is English for month names.

13.3. Monthnamesshort:array, the string used by the month abbreviation, default is the English month name shorthand

13.4. Daynames:array, the full name of the week using the string, the default is English for the names of the week.

13.5. Daynamesshort:array, week shorthand for using the string, default is English week name shorthand

13.6. ButtonText and Alldaytext have been introduced in the initial 2.4 and 2.9 parts.

14. Date Tools

14.1. Formatted Date: $.fullcalendar.formatdate (date, formatstring[, Options]), formats a date by the specified format, and returns a string. The options option is an object that sets the value of the property supported by the localization variable. For example {monthNames: [' January ', ' February ', ...], dayNames: [' Sunday ', ' Monday ', ...]}

14.2. Once formatted two dates: $.fullcalendar.formatdate (date1, Date2, formatstring[, Options]): Similar to the last formatted date, except that Here in formatstring, use curly braces {...} To describe how a second date is formatted.

14.3. Parse Date: $.fullcalendar.parsedate (String): Formats a string into a JavaScript date object, which can be ISO8601, IETF, Unix timestamp three formats.

14.4. parseISO8601: $fullCalendar. parseISO8601 (string[, Ignoretimezone]) converts a ISO8601 string into a JavaScript date object.

15. Connect your schedule with Google's schedule management.

15.1. Need to introduce another JS file: gcal.js

15.2 Events: $.fullcalendar.gcalfeed (' own Google Calendar feed address ', {editable:false, className: ' Gcal-events ', CurrentTimeZone: ' The time zone you set up on Google Calendar '} is a way to hook up the schedule on your Google Calendar with your app.

15.3. Here's the code for my own Google Calendar:

$ (document). Ready (function () {

$ (' #calendar '). Fullcalendar ({

DefaultView: ' Agendaweek ',

Events: $.fullcalendar.gcalfeed (

' Http://www.google.com/calendar/feeds/lgg860911%40yahoo.com.cn/private-184462b11481a96cf9835fbb6486dbe6/basic ' ,

{

Eidtable:true,

ClassName: ' Gcal-events ',

CurrentTimeZone: ' asia/chongqing '

CurrentTimeZone: ' Asia/tokyo '

}

)

});

});

16. Summary:

16.1. When using, download the release version instead of the development version

16.2. Documents to be introduced:

<!-This CSS can be based on their own situation, change into their favorite style.  500 lines of CSS, the amount of modification is not very large. The main reason is to clarify the relationship. -

<link rel= ' stylesheet ' type= ' text/css ' href= '. /fullcalendar.css '/>

<script type= ' text/javascript ' src= '. /jquery/jquery.js ' ></script>

<!-the following 4 JS files are jquery-ui related packages, you can use the Fullcalendar in the self-contained, you can also own to the jquery UI of the official library itself to subscribe to a suitable use of the Min version, then you will get a choice,  A single JS file that has been compressed. The efficiency is relatively high. -

<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> <!-need to be introduced if you need to use Google's sync account. -

17. Key Concepts:

17.1. Calendar: The div for the entire calendar control, which is our $ (' #calendar '). Fullcalendar This is used when the ID is the calendar container.

17.2. Schedule event: A schedule record, for example: November 16, 2009 Monday 11:11 11 seconds 111 milliseconds, the event title: "Selfimpr, need to do a certain job." E-mail: lgg860911@yahoo.com.cn, blog:http://blog.csdn.net/lgg201 "

17.3. Trigger action: JavaScript event after jquery encapsulation ....

17.4. JSEvent: The original JavaScript event.

17.5. Since JavaScript is a dynamic language, for Calevent objects or any other object, you want to save some data and set it up directly, for example, if you want to save your girlfriend's name in Calevent, you can Calevent.girl_ Friend_name = ' beautiful girl ', when you use it, you can get it directly .... When used, it's best to use this: My_girl_friend_name = Calevent.girl_friend_name | |  "Another beautiful Girl"; This way, when you save your girlfriend in Calevent because the middle operation is lost, or you do not have a save on the time you do not know, you can get another beautiful girl, without getting nothing, and even causing some unnecessary trouble (browser warning, Say you tried to invoke a property of a undefined object).

18. Domain Model: hehe, according to his own understanding of the painting, hope can help you understand the concept of the schedule management.