Fullcalendar official documentation translation 3

1. Connect to Google Calendar. Do not forget to add <SCRIPT type = 'text/JavaScript 'src = 'js/Gcal. js'/>

Events: $. fullcalendar. gcalfeed
("Http://www.google.com/calendar/feeds/xuqi86@gmail.com/private-660ae86cc26345cff3430480e8eea4bb/basic ",

{
Classname: 'gcal-event ',
Editable: True,

Currenttimezone: 'Asia/Shanghai'
}
)

2. header information
Agenda has a specific time Grid
Month, basicweek, basicday, agendaweek, and agendaday are five different views.
Difference between spaces and

Header :{
Left:
'Month, basicweek, basicday, agendaweek, agendaday ',
Center: 'title ',
Right: 'prevyear, Prev, today, next, nextyear'
}

3. Whether to use the jquery Topic (I use the start topic)
<Link type = "text/CSS"
Href = "CSS/start/jquery-ui-1.7.2.custom.css" rel = "stylesheet"
/>
<SCRIPT type = "text/JavaScript"
Src = "JS/jquery-ui-1.7.2.custom.min.js"> </SCRIPT>

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

Theme: True

4.
Buttontext :{
PREV:
'Yesterday ',
Next:
'Tomorrow ',
Prevyear: 'last year ',
Nextyear: 'Year ',
Today:
'Today ',
Month:
'Month ',
Week:
'Week ',
Day:
'Day'
}

5. Which day is the first day of each week?
Sunday = 0, Monday = 1, Tuesday = 2, etc.

Firstday: 1

6. The date is displayed from right to left... I don't know when it will be used.
Isrtl: false

7. Whether the weekend is displayed
Weekends: True

8. The Weekly view mode is displayed in the monthly view. The monthly view height may vary depending on the number of weeks per month.
Fixed fixed display 6 weeks high, the height remains unchanged forever
The liquid is not fixed by the number of weeks, and the weekly height can be changed.
Variable is not fixed, but its height is fixed.

Weekmode: 'fixed'

9. Calendar height, including the header
Height: 850
Content height, excluding the header
Contentheight: 600

10. Ratio of cell width to height
Note: This attribute cannot coexist with the calendar height

Aspectratio 1.35

11. operations to be performed when switching the view
View is an object. The specific attributes will be described later.

Viewdisplay: function (View ){}

12. operations performed when the window size changes
Windowresize: function (View ){}

13. Bind the calendar to an ID.
$ ('# Id'). fullcalendar ('render ');

14. Destroy the ID calendar
After the calendar is restored to the initialization, all elements, time, and initialization data are deleted.
$ ('# Id'). fullcalendar ('deststroy ');

15. View displayed by default. Note the quotation marks.
Defaultview: 'month'

16. view object attributes
Name: including month, basicweek, basicday, agendaweek, agendaday
Title: Title content (for example, "September 2009" or "Sep 7-13 2009 ")
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 month
In the 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, week
View, which is usually the same as start.
Visend: date type, the last accessible day

17. Set the initialization value in a centralized manner.
Configurable attributes include dragopacity, titleformat, columnformat, and
Timeformat
The view to be applied has
{

Month:
// Month View

Week:
// Basicweek & agendaweek views

Day:
// Basicday & agendaday views

Agenda:
// Agendaday & agendaweek views

Agendaday: // agendaday View
Agendaweek:
// Agendaweek View

Basic:
// Basicweek & basicday views

Basicweek: // basicweek View

Basicday: // basicday
View

'':
// (An empty string) when no other properties match
}

18. Retrieve view objects
. Fullcalendar ('getview')-> View object

VaR view = $ ('# calendar'). fullcalendar ('getview ');
Alert ("the view's title is" + view. Title );

19. Change the current view
. Fullcalendar ('changeview', viewname)

The following attributes in section 20.20 work in the agenda view.
In the View starting with agenda, whether to display the top all-day Column
Alldayslot: True

Default text:
Alldaytext: 'Today's task'

The time format of the column on the left:
Axisformat: 'H (: Mm) tt'
() Indicates that the content is not displayed on the hour.

Supported formatting placeholders
1. S: seconds
2. SS: Second, two digits
3. M: minutes
4. MM: minute, two digits
5. h: hour, in 12-hour format
6. hh: hour, 12-hour, two
7. h: hour, in 24-hour format
8. hh: hour, in 24-hour format, two
9. D: Date Number
10. DD: Date Number, two digits
11. DDD: Date name, abbreviation
12. dddd: Date name, full name
13. M: number of months
14. MM: number of months, two digits
15. Mmm: name of the month, abbreviated
16. Mmmm: month name, full name
17. YY: two year
18. yyyy: 4-digit year
19. T: Add a or P in the afternoon.
20. TT: Add am or PM in the upper afternoon
21. T: Add a or P in the afternoon.
22. TT: Add am or PM in the upper afternoon
23. U: iso8601 format
24. S: add the suffix St, Nd, RD, th to the date, which indicates the day

Interval of each line
Slotminutes: 10

Scroll to start time
Firsthour: 7

Start from every day
Mintime: 7
Mintime: '7: 30'
If the interval is set to minutes

The end of each day
Maxtime: 24
Maxtime: '23: 10'

Default event execution duration
Defaulteventminutes: 120
At this time, if the event object does not specify the execution duration, the default execution duration is two hours.

21. Current date
Year: it must be a four-digit number. If not specified, it is the current year.
Month: the current month, starting from 0. If the current year and month are not specified, the month is displayed as January.
Date: The month of the date. This attribute is only related to the weekly view and daily view. If this attribute is not specified and the year and month are not specified, the first day of the month is displayed.

The following 8 methods about the operation date:
. Fullcalendar ('prev') is returned to the previous year, month, and day, which is related to the view type.
. Fullcalendar ('Next ')
. Fullcalendar ('prevyear ')
. Fullcalendar ('nextyear ')
. Fullcalendar ('today ')
. Fullcalendar ('gotodate', year [, month, [date]
) Note that the month starts from 0.
. Fullcalendar ('crementdate', years [, months, [days])
. Fullcalendar ('getdate')-> date get a date object

$ ('# My-button'). Click (function (){
VaR d =
$ ('# Calendar'). fullcalendar ('getdate ');
Alert ("
Current date of the calendar is "+ D );
});

22. Specify the default time format
Timeformat: H (: Mm) TT

23. Specify the default column format

Columnformat :{
Month:
'Ddd ',//
Mon
Week: 'ddd
M/d', // mon 9/7
Day: 'dddd
M/d' // Monday 9/7
}

24. Title formatting
Titleformat :{
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
}

25. Monthly display name
Monthnames: ['january ', 'february', 'march', '0000l', 'may', 'june ',
'July ',
'August ', 'September', 'October ', 'November', 'december ']

Monthnames: ['August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 11 ',
'Octoken', 'octoken']

Abbreviated monthly name
Monthnamesshort: ['Jan ', 'feb', 'mar', 'apr', 'may', 'jun'
'Jul', 'aug', 'sept', 'oct', 'nov', 'dec ']

26. name displayed in the week
Daynames: ['sunday', 'monday', 'tuesday', 'wednesday ',
'Thursday', 'Friday', 'saturday']

Daynames: ['sunday', 'monday', 'tuesday', 'weday ',
'Thurs', 'Friday', 'satur']

Abbreviation of the week name
Daynamesshort: ['sun', 'mon ', 'tue', 'wed', 'thu', 'fri ',
'Sat ']

27.4 mouse callback Methods
This operation is triggered when you click a day.
Dayclick: function (date, allday, jsevent, view ){}

Dayclick: function (date, allday, jsevent, view ){

If (allday ){

Alert ('clicked on the entire day: '+ date );

} Else {

Alert ('clicked on the slot: '+ date );

}

Alert ('coordinates: '+ jsevent. pagex +', '+ jsevent. Pagey );

Alert ('current view: '+ view. Name );

// Change the day's background color just for fun

Background (this).css ('background-color', 'red ');

}

This operation is triggered when an event is clicked.
Eventclick: function (event, jsevent, view ){}

Eventclick: function (calevent, jsevent, view ){

Alert ('event: '+ calevent. Title );

Alert ('coordinates: '+ jsevent. pagex +', '+ jsevent. Pagey );

Alert ('view: '+ view. Name );

// Change the border color just for fun

Border (this).css ('border-color', 'red ');

}

This operation is triggered when you move the cursor over an event.
Eventmouseover: function (event, jsevent, view ){}

This operation is triggered when you move the mouse away from an event
Eventmouseout: function (event, jsevent, view ){}

28. event object
Fullcalendar is a standard object used to store calendar event information.
In the following attributes, only title and start are required.

ID: String/INTEGER (optional)
Title: String
Allday: true or false (optional) Specifies whether it is a full-day event
Start: Date Event start time, in the following format:
IETF format (ex: "wed, 18 Oct 2009 13:00:00 est ")
Iso8601 format (ex: "2009-11-05t13: 15: 30z ")
End: Date (optional) event end time
If the event is a full-day event, the end time is included.
If the event is not a full-day event and the end time is 0: 00, the second day of the end time is not included.
URL: string (optional) the URL that will be accessed when the user clicks
Classname: the CSS class name used for the string/Array (optional) event.
Editable: true or false (optional) event editable
Source: array/string/function (automatically populated)
Event source, automatically specified
In addition to the preceding attributes, you can specify the attributes and values.

29. Event array events (as an array)
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

}
]

Event JSON source events (as a JSON feed)
Events: "/myfeed. php" this URL returns a calendar event group in JSON or array format,
The get parameter depends on startparam and endparam options.
This event is triggered when the user changes the view. fullcalendar uses the get method to pass Parameters to determine which calendar data is required.
/Myfeed. php? Start = 1262332800 & End = 1265011200 & _ = 1263178646

Startparam: 'start' name of the Start Parameter
Endparam: 'end' end parameter name
Cacheparam: '_' name of the cache Parameter
Lazyfetching: true: data is obtained only when required. Data is read from the cache first.

_ Parameters are automatically added to prevent reading cached content

Calendar Event Events (as a function)
Events: function (START, end, callback ){}

events: function (START, end, callback) {
$. ajax ({
URL: 'myxmlfeed. PHP ',
datatype: 'xml',
data: {
// our hypothetical 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 (){

Event. Push ({

Title: $ (this). ATTR ('title '),

Start: $ (this). ATTR ('start') // will be parsed

});

});

Callback (events );

}

});
}

30. Event Source

Eventsources stores array objects, which can be arrays/functions/URLs

Eventsources :[

$. Fullcalendar. gcalfeed ("http://www.google.com/feed1 "),

$. Fullcalendar. gcalfeed ("http://www.google.com/feed2 ")
]

31. The calendar is a full-day calendar by default.
Alldaydefault: True

32. When reading Ajax data
Loading: function (isloading, view)
It is true when reading is started, and false when reading is completed

33. Change calendar events
Updateevent:

Eventclick: function (event, element ){

Event. Title = "clicked! ";

$ ('# Calendar'). fullcalendar ('updateevent', event );

}
The Calendar Object can be obtained through the callback function, such as the eventclick or clientevents method.

34. Retrieve the calendar objects stored in the client memory
Clientevents
. Fullcalendar ('clientevents' [, idorfilter])->
Array returns an array of calendar objects.
If idorfilter is not written, an array of calendar objects stored on the client is output.
If it is an ID, all objects with this ID are returned.
You can also accept a Calendar Object for a filter function. If true is returned, this value is included in the client object group China.

35. Delete calendar from calendar
Removeevents parameters are the same as above

36. Get the schedule again
. Fullcalendar ('refetchevents') from all sources and re-rendered to the screen

37. Add a log Source
. Fullcalendar ('addeventsource', source)
The source can be array/URL/function, and the obtained data can be immediately displayed on the calendar.

38. delete an event Source
. Fullcalendar ('removeeventsource', source)

39. Schedule binding
Eventrender. function (event, element, view ){}
Event is the calendar object to be rendered.
Element
Is a newly created jquery <div> used for rendering. It has been created at the right time.

Eventrender
The return function can modify the element and return a new Dom element to replace the rendered element or return false to prohibit rendering.

40. Events after calendar Rendering
Eventafterrender: function (event, element, view ){}

41. Rendering events
. Fullcalendar ('renderevent', event [, stick])
Generally, once the calendar gets the date source again, the original calendar disappears. When stick is set to true, the calendar will be permanently saved to the calendar.

42. rerender all events
Rerenderevents
. Fullcalendar ('rerenderevents ')

43. Can I drag and drop or change the size?
Editable: True

44. Do not drag or change the size
Disabledragging: false
Disableresizing: false

45. How long will it take if the drag operation fails?
Dragrevertduration: 500 in milliseconds

46. Drag opacity
Dragopacity :{
Agenda:. 5 // For agenda Attempt
'': 1.0 // other views
}

47. Required JS package
<SCRIPT type = 'text/JavaScript'
Src = 'js/UI. Core. js'/>
<SCRIPT type = 'text/JavaScript'
Src = 'js/UI. draggable. js'/>
<SCRIPT type = 'text/JavaScript'
Src = 'js/UI. resizable. js'/>
Pay attention to the order. Put jquery. js in front of the three packages.

48. operations caused by drag events
Eventdragstart: function (event, jsevent, UI, view ){}
Eventdragstop: function (event, jsevent, UI, view ){}

49. When the dragging is completed and the time changes
Eventdrop: function (event, daydelta, minutedelta, allday,
Revertfunc, jsevent, UI, view ){}

Daydelta: how many days have the calendar been moved 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.

Eventdrop: function (event, daydelta, minutedelta, allday, revertfunc)
{

Alert (

Event. Title + "was moved" +

Daydelta + "Days and" +

Minutedelta + "Minutes ."

);

If (allday ){

Alert ("event is now all-day ");

} Else {

Alert ("event has a time-of-day ");

}

If (! Confirm ("are you sure about this change? ")){

Revertfunc ();

}

}

50. Operations triggered by the event of changing the size
Eventresizestart: function (event, jsevent, UI, view ){}
Eventresizestop: function (event, jsevent, UI, view ){}
Eventresize: function (event, daydelta, minutedelta, revertfunc,
Jsevent, UI, view ){}