wassname/fullcalendar
1
0
Fork 0
mirror of https://github.com/wassname/fullcalendar.git synced 2026-08-15 12:25:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

bunch of docs changes that were never committed over the past few released

Browse Source
This commit is contained in:
Adam Shaw
2012-02-28 18:42:57 -08:00
parent ddd7430d11
commit 42278500c8
24 changed files with 770 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
display/buttonIcons.txt
+3
View File
@@ -20,3 +20,6 @@ The icon strings determine the CSS class that will be used on the button. For ex
string `'circle-triangle-w'` will result in the class `'ui-icon-triangle-w'`.
If a button does not have an entry, it falls back to using [buttonText](../text/buttonText).
If you are using a jQuery UI theme and would prefer not to display any icons and would rather
use `buttonText` instead, you can set the `buttonIcons` option to `false`.
dropping/drop.txt
+1 -1
View File
@@ -20,4 +20,4 @@ function( *date*, *allDay*, *jsEvent*, *ui* ) { }
`this` holds the DOM element that has been dropped.
To see this callback function in action, view the [droppable]() article or look at
[this example](/js/fullcalendar/examples/external-dragging.html).
[this example](/js/fullcalendar/demos/external-dragging.html).
dropping/droppable.txt
+1 -1
View File
@@ -36,7 +36,7 @@ dragged onto the calendar.
While the `droppable` option deals with generic jQuery UI draggables and is not specifically
tailored to adding events, it is possible to achieve this with a few lines of code.
Follow the **external-dragging.html** example in FullCalendar's download. You can also
view the [example online](/js/fullcalendar/examples/external-dragging.html).
view the [example online](/js/fullcalendar-1.5.2/demos/external-dragging.html).
In short, you must call [renderEvent](../event_rendering/renderEvent) yourself
in the [drop]() callback.
event_data/Event_Object.txt
+168 -50
View File
@@ -2,65 +2,183 @@
Event Object
============
A standard object that FullCalendar uses to store information about a calendar event.
A standard JavaScript object that FullCalendar uses to store information about a calendar event.
Here are its properties:
An Event Object has a number of properties. When passing new Event Objects to
`events` and `eventSources`, only the `title` and `start` properties are required.
Here is the full list of properties:
**id**: String/Integer (optional)
: Uniquely identifies the given event. Different instances of repeating events should all have the same `id`.
**title**: String
: The text on an event's element
<table>
<!-- ------------------- -->
<tr>
<th>
id
</th>
<td markdown='block'>
String/Integer. Optional
**allDay**: `true` or `false` (optional)
: Whether an event occurs at a specific time-of-day. This property affects whether an event's time is shown.
Also, in the agenda views, determines if it is displayed in the "all-day" section.
**Don't include quotes** around your `true`/`false`. This value is not a string!
When specifying Event Objects for `events` or `eventSources`,
omitting this property will make it inherit from
[allDayDefault](), which is normally `false`.
**start**: Date
: A JavaScript Date object indicating the date/time an event begins.
Uniquely identifies the given event. Different instances of repeating events should all have the same `id`.
</td>
</tr>
<!-- ------------------- -->
<tr>
<th>
title
</th>
<td markdown='block'>
String. *Required*.
When specifying Event Objects for `events` or `eventSources`,
you may specify a string in IETF format (ex: "Wed, 18 Oct 2009 13:00:00 EST"),
a string in ISO8601 format (ex: "2009-11-05T13:15:30Z") or a UNIX timestamp.
**end**: Date (optional)
: A Javascript Date object indicating the date/time an event ends.
As with `start`, you may specify it in IETF, ISO8601, or UNIX timestamp format.
**If an event is all-day**...
The text on an event's element
</td>
</tr>
<!-- ------------------- -->
<tr>
<th>
allDay
</th>
<td markdown='block'>
`true` or `false`. Optional.
the end date is inclusive. This means an event with `start` Nov 10 and
`end` Nov 12 will span 3 days on the calendar.
Whether an event occurs at a specific time-of-day. This property affects whether an event's time is shown.
Also, in the agenda views, determines if it is displayed in the "all-day" section.
**If an event is NOT all-day**...
**Don't include quotes** around your `true`/`false`. This value is not a string!
the end date is exclusive. This is only a gotcha when your `end` has time 00:00.
It means your event ends on midnight, and it will not span through the next day.
**url**: String (optional)
: A URL that will be visited when this event is clicked by the user.
For more information on controlling this behavior, see the [eventClick](../mouse/eventClick) callback.
**className**: String/Array (optional)
: A CSS class (or array of classes) that will be attached to this event's element.
When specifying Event Objects for `events` or `eventSources`,
omitting this property will make it inherit from
[allDayDefault](), which is normally `true`.
</td>
</tr>
<!-- ------------------- -->
<tr>
<th>
start
</th>
<td markdown='block'>
Date. *Required*.
**editable**: `true` or `false` (optional)
: Overrides the master [editable](../event_ui/editable) option for this single event.
The date/time an event begins.
**source**: Array/String/Function (automatically populated)
: A reference to the event source (as specified in `events` or `eventSources`)
that this event came from.
Do not worry about populating this value, FullCalendar will do this automatically.
When specifying Event Objects for `events` or `eventSources`,
you may specify a string in IETF format (ex: "Wed, 18 Oct 2009 13:00:00 EST"),
a string in ISO8601 format (ex: "2009-11-05T13:15:30Z") or a UNIX timestamp.
</td>
</tr>
<!-- ------------------- -->
<tr>
<th>
end
</th>
<td markdown='block'>
Date. Optional.
The date/time an event ends.
As with `start`, you may specify it in IETF, ISO8601, or UNIX timestamp format.
**If an event is all-day**...
the end date is inclusive. This means an event with `start` Nov 10 and
`end` Nov 12 will span 3 days on the calendar.
**If an event is NOT all-day**...
the end date is exclusive. This is only a gotcha when your `end` has time 00:00.
It means your event ends on midnight, and it will not span through the next day.
</td>
</tr>
<!-- ------------------- -->
<tr>
<th>
url
</th>
<td markdown='block'>
String. Optional.
A URL that will be visited when this event is clicked by the user.
For more information on controlling this behavior, see the [eventClick](../mouse/eventClick) callback.
</td>
</tr>
<!-- ------------------- -->
<tr>
<th>
className
</th>
<td markdown='block'>
String/Array. Optional.
A CSS class (or array of classes) that will be attached to this event's element.
</td>
</tr>
<!-- ------------------- -->
<tr>
<th>
editable
</th>
<td markdown='block'>
`true` or `false`. Optional.
Overrides the master [editable](../event_ui/editable) option for this single event.
</td>
</tr>
<!-- ------------------- -->
<tr>
<th>
source
</th>
<td markdown='block'>
[Event Source Object](). Automatically populated.
A reference to the event source that this event came from.
</td>
</tr>
<!-- ------------------- -->
<th colspan='2' id='color-options'>
New options have been added in version 1.5 to change an event's colors:
</th>
<!-- ------------------- -->
<tr>
<th>
color
</th>
<td markdown='block'>
Sets an event's background *and* border color just like
the calendar-wide [eventColor](../event_rendering/eventColor) option.
</td>
</tr>
<!-- ------------------- -->
<tr>
<th>
backgroundColor
</th>
<td markdown='block'>
Sets an event's background color just like
the calendar-wide [eventBackgroundColor](../event_rendering/eventBackgroundColor) option.
</td>
</tr>
<!-- ------------------- -->
<tr>
<th>
borderColor
</th>
<td markdown='block'>
Sets an event's border color just like the
the calendar-wide [eventBorderColor](../event_rendering/eventBorderColor) option.
</td>
</tr>
<!-- ------------------- -->
<tr>
<th>
textColor
</th>
<td markdown='block'>
Sets an event's text color just like
the calendar-wide [eventTextColor](../event_rendering/eventTextColor) option.
</td>
</tr>
</table>
Non-standard Fields
-------------------
In addition to the fields above, you may also include your own non-standard fields
in each Event Object. FullCalendar will not modify or delete these fields.
event_data/Event_Source_Object.txt
+131
View File
@@ -0,0 +1,131 @@
Event Source Object
===================
An "event source" is anything that provides FullCalendar with data about
events. It can be a <a href='events_array'>simple array</a>,
an <a href='events_function'>event-generating function</a> that you define,
a <a href='events_json_feed'>URL to a json feed</a>,
or a <a href='../google_calendar'>Google Calendar feed</a>.
Since version 1.5, Event Objects can have "options" associated with them.
However, before you can start specifying options, you must write an Event Object in its
*extended form*. It must be a traditional JavaScript object with properties.
Here are the extended forms for each type of Event Source:
Array of events:
{
events: [
{
title: 'Event1',
start: '2011-04-04'
},
{
title: 'Event2',
start: '2011-05-05'
}
// etc...
],
color: 'yellow', // an option!
textColor: 'black' // an option!
}
Event-generating function:
{
events: function(start, end, callback) {
// ...
},
color: 'yellow', // an option!
textColor: 'black' // an option!
}
JSON feed:
{
url: '/myfeed.php',
color: 'yellow', // an option!
textColor: 'black' // an option!
}
Google Calendar feed:
{
url: 'http://www.google.com/your_feed_url/',
color: 'yellow', // an option!
textColor: 'black' // an option!
}
Event Source Options
--------------------
<table id='options'>
<tr>
<th>
color
</th>
<td markdown='1'>
Sets every <a href='Event_Object'>Event Object's</a> `color` for this source.
</td>
</tr>
<tr>
<th>
backgroundColor
</th>
<td markdown='1'>
Sets every <a href='Event_Object'>Event Object's</a> `backgroundColor` for this source.
</td>
</tr>
<tr>
<th>
borderColor
</th>
<td markdown='1'>
Sets every <a href='Event_Object'>Event Object's</a> `borderColor` for this source.
</td>
</tr>
<tr>
<th>
textColor
</th>
<td markdown='1'>
Sets every <a href='Event_Object'>Event Object's</a> `textColor` for this source.
</td>
</tr>
<tr>
<th>
className
</th>
<td markdown='1'>
Sets every <a href='Event_Object'>Event Object's</a> `className` for this source.
</td>
</tr>
<tr>
<th>
editable
</th>
<td markdown='1'>
Sets every <a href='Event_Object'>Event Object's</a> `editable` for this source.
</td>
</tr>
<tr>
<th>
allDayDefault
</th>
<td markdown='1'>
Sets the [allDayDefault]() option, but only for this source.
</td>
</tr>
<tr>
<th>
ignoreTimezone
</th>
<td markdown='1'>
Sets the [ignoreTimezone]() option, but only for this source.
</td>
</tr>
</table>
**For JSON feeds**, [there are additional options you can set](events_json_feed#options).
event_data/eventSources.txt
+4 -12
View File
@@ -9,7 +9,10 @@ Array
</div>
This option is used instead of the `events` option.
It can take an Array of Arrays/Functions/URLs (anything that the `events` option would take).
You can put any number of [event arrays](events_array), [functions](events_function),
[JSON feed URLs](events_json_feed), or full-out [Event Source Objects](Event_Source_Object)
into the `eventSources` array.
Here is an example calendar that displays two [JSON feeds](events_json_feed):
@@ -19,14 +22,3 @@ Here is an example calendar that displays two [JSON feeds](events_json_feed):
'/feed2.php'
]
});
Here is how you would display two Google Calendars:
$('#calendar').fullCalendar({
eventSources: [
$.fullCalendar.gcalFeed("http://www.google.com/feed1"),
$.fullCalendar.gcalFeed("http://www.google.com/feed2")
]
});
More info on displaying Google Calendars can be found [here](../google_calendar).
event_data/events_array.txt
+41
View File
@@ -27,3 +27,44 @@ Here is an example of how to specify an array of events:
Make sure you do not have a comma after the last event in your array!
It will make Internet Explorer choke.
Extended Form
-------------
Since version 1.5, you are able to specify [Event Source options](Event_Source_Object#options).
This often comes in handy when you are using the [eventSources]() option to
specify multiple event sources and you want certain options to only apply to certain sources.
However, to do this, you must write things a little differently:
$('#calendar').fullCalendar({
eventSources: [
// your event source
{
events: [ // put the array in the `events` property
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09 12:30:00',
}
],
color: 'black', // an option!
textColor: 'yellow' // an option!
}
// any other event sources...
]
});
A list of available Event Source options can be found [here](Event_Source_Object#options).
event_data/events_function.txt
+31 -5
View File
@@ -20,7 +20,7 @@ responsibility to make sure `callback` is being called with an array of
[Event Objects](Event_Object).
Here is an example showing how to use an event function to fetch events from
an XML feed:
a hypothetical XML feed:
$('#calendar').fullCalendar({
events: function(start, end, callback) {
@@ -33,16 +33,13 @@ an XML feed:
end: Math.round(end.getTime() / 1000)
},
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
event.push({
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
@@ -51,3 +48,32 @@ an XML feed:
However, if you have the choice, JSON is a better idea because you can just specify a
[feed URL](events_json_feed).
Extended Form
-------------
Since version 1.5, you are able to specify [Event Source options](Event_Source_Object#options).
This often comes in handy when you are using the [eventSources]() option to
specify multiple event sources and you want certain options to only apply to certain sources.
However, to do this, you must write things a little differently:
$('#calendar').fullCalendar({
eventSources: [
// your event source
{
events: function(start, end, callback) {
// ...
},
color: 'yellow', // an option!
textColor: 'black' // an option!
}
// any other sources...
]
});
event_data/events_json_feed.txt
+122 -2
View File
@@ -17,7 +17,7 @@ The value of the parameters will always be UNIX timestamps (seconds since 1970).
Consider the following script:
$('#calendar').fullCalendar({
events: "/myfeed.php"
events: '/myfeed.php'
});
Here is a URL that FullCalendar might visit:
@@ -25,7 +25,127 @@ Here is a URL that FullCalendar might visit:
`/myfeed.php?start=1262332800&end=1265011200&_=1263178646`
The `_` parameter is automatically inserted to prevent the browser from
caching the result (see [cacheParam]()).
caching the result ([more below](#caching)).
If you need to access a feed that is in a different domain, you can use JSONP
with a `?` in your URL (see the JSONP discussion in [$.ajax](http://api.jquery.com/jQuery.ajax/)).
Extended Form
-------------
Since version 1.5, you are able to specify [Event Source options](Event_Source_Object#options).
This often comes in handy when you are using the [eventSources]() option to
specify multiple event sources and you want certain options to only apply to certain sources.
However, to do this, you must write things a little differently:
$('#calendar').fullCalendar({
eventSources: [
// your event source
{
url: '/myfeed.php', // use the `url` property
color: 'yellow', // an option!
textColor: 'black' // an option!
}
// any other sources...
]
});
A list of general Event Source options can be found [here](Event_Source_Object#options).
<span id='options'>However, there are additional options that apply specifically to JSON feeds:</span>
<table>
<tr>
<th>
startParam
</th>
<td markdown='1'>
Sets the [startParam]() option, but only for this source.
</td>
</tr>
<tr>
<th>
endParam
</th>
<td markdown='1'>
Sets the [endParam]() option, but only for this source.
</td>
</tr>
</table>
jQuery $.ajax options
---------------------
You can also specify any of the [jQuery $.ajax](http://api.jquery.com/jQuery.ajax/) options within the same object!
This allows you to easily pass additional parameters to your feed script, as well as
listen to ajax callbacks:
$('#calendar').fullCalendar({
eventSources: [
// your event source
{
url: '/myfeed.php',
type: 'POST',
data: {
custom_param1: 'something',
custom_param2: 'somethingelse'
},
error: function() {
alert('there was an error while fetching events!');
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}
// any other sources...
]
});
Here is the same example, but using the single-source `events` option instead:
$('#calendar').fullCalendar({
events: {
url: '/myfeed.php',
type: 'POST',
data: {
custom_param1: 'something',
custom_param2: 'somethingelse'
},
error: function() {
alert('there was an error while fetching events!');
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}
});
Caching
-------
<span id='caching'></span>
By default, FullCalendar will insert a `_` parameter into the URL of the request to prevent
the browser from caching the response.
FullCalendar achieves this internally by setting the $.ajax parameter to `false`.
If you would like to counteract this and prevent the `_` parameter, you can set the `cache` option to `true`:
$('#calendar').fullCalendar({
events: {
url: '/myfeed.php',
cache: true
}
});
event_data/ignoreTimezone.txt
+18
View File
@@ -0,0 +1,18 @@
ignoreTimezone *1.4.8*
======================
When parsing ISO8601 dates, whether UTC offsets should be ignored
while processing event source data.
<div class='spec' markdown='1'>
Boolean, *default*: `true`
</div>
The default is `true`, which means the UTC offset for all ISO8601 dates will be ignored.
For example, the date `"2008-11-05T08:15:30-05:00"` will be processed as
November 5th, 2008 at 8:15am *in the local offset of the browser*.
If you are using ISO8601 dates with UTC offsets, chances are you want them
processed. You must set this option to `false`. In the future, the default
for this option will probably be changed to `false`.
event_data/index.txt
+2 -1
View File
@@ -4,14 +4,15 @@ Event Data
<ul>
<li class='article'>Event Object</li>
<li class='article'>Event Source Object</li>
<li><a href='events_array'>events</a> <em>(as an array)</em></li>
<li><a href='events_json_feed'>events</a> <em>(as a json feed)</em></li>
<li><a href='events_function'>events</a> <em>(as a function)</em></li>
<li>eventSources</li>
<li>allDayDefault</li>
<li>ignoreTimezone</li>
<li>startParam</li>
<li>endParam</li>
<li>cacheParam</li>
<li>lazyFetching</li>
<li class='callback'><a href='loading'>loading</a> <em>(callback)</em></li>
<li class='method'><a href='updateEvent'>updateEvent</a> <em>(method)</em></li>
event_data/removeEventSource.txt
+7 -1
View File
@@ -8,5 +8,11 @@ Dynamically removes an event source.
.fullCalendar( 'removeEventSource', *source* )
</div>
Source must be a reference to the original Array/URL/Function.
Events from the source will immediately be removed from the calendar.
Since version 1.5, the `source` parameter has become rather relaxed.
You can provide an event source's Array/URL/Function
**or** you can specify the full [Event Source Object]().
Prior to version 1.5, things were more strict.
You must specify a reference to the original Array/URL/Function.
event_rendering/Colors.txt
+26 -2
View File
@@ -1,6 +1,30 @@
Event Colors
============
Coloring Events
===============
You can change the color of all events on the calendar using the [eventColor]() option like so:
$('#calendar').fullCalendar({
events: [
// my event data
],
eventColor: '#378006'
});
The [eventBackgroundColor](), [eventBorderColor](), and [eventTextColor]() options
can also be used for coloring events.
If you want to change the color for events in a specific Event Source,
please look at the [Event Source options](../event_data/Event_Source_Object#options) documentation.
If you want to change the color for individual events, please look at the
[Event Object color options](../event_data/Event_Object#color-options).
[deprecated] Coloring Events prior to version 1.5
=================================================
You can modify the default color that affects all events by adding some css in the following form:
event_rendering/eventBackgroundColor.txt
+15
View File
@@ -0,0 +1,15 @@
eventBackgroundColor
====================
Sets the background color for all events on the calendar.
<div class='spec' markdown='1'>
String
</div>
You can use any of the CSS color formats such `#f00`, `#ff0000`, `rgb(255,0,0)`, or `red`.
This option can be overridden on a per-source basis with the
`backgroundColor` [Event Source Object](../event_data/Event_Source_Object) option or on a per-event basis with the
`backgroundColor` [Event Object](../event_data/Event_Object) option.
event_rendering/eventBorderColor.txt
+15
View File
@@ -0,0 +1,15 @@
eventBorderColor
================
Sets the border color for all events on the calendar.
<div class='spec' markdown='1'>
String
</div>
You can use any of the CSS color formats such `#f00`, `#ff0000`, `rgb(255,0,0)`, or `red`.
This option can be overridden on a per-source basis with the
`borderColor` [Event Source Object](../event_data/Event_Source_Object) option or on a per-event basis with the
`borderColor` [Event Object](../event_data/Event_Object) option.
event_rendering/eventColor.txt
+15
View File
@@ -0,0 +1,15 @@
eventColor
==========
Sets the background *and* border colors for all events on the calendar.
<div class='spec' markdown='1'>
String
</div>
You can use any of the CSS color formats such `#f00`, `#ff0000`, `rgb(255,0,0)`, or `red`.
This option can be overridden on a per-source basis with the
`color` [Event Source Object](../event_data/Event_Source_Object) option or on a per-event basis with the
`color` [Event Object](../event_data/Event_Object) option.
event_rendering/eventTextColor.txt
+15
View File
@@ -0,0 +1,15 @@
eventTextColor
================
Sets the text color for all events on the calendar.
<div class='spec' markdown='1'>
String
</div>
You can use any of the CSS color formats such `#f00`, `#ff0000`, `rgb(255,0,0)`, or `red`.
This option can be overridden on a per-source basis with the
`textColor` [Event Source Object](../event_data/Event_Source_Object) option or on a per-event basis with the
`textColor` [Event Object](../event_data/Event_Object) option.
event_rendering/index.txt
+4
View File
@@ -4,6 +4,10 @@ Event Rendering
<ul>
<li class='article'>Colors</li>
<li>eventColor</li>
<li>eventBackgroundColor</li>
<li>eventBorderColor</li>
<li>eventTextColor</li>
<li class='callback'><a href='eventRender'>eventRender</a> <em>(callback)</em></li>
<li class='callback'><a href='eventAfterRender'>eventAfterRender</a> <em>(callback)</em></li>
<li class='method'><a href='renderEvent'>renderEvent</a> <em>(method)</em></li>
google_calendar.txt
+137 -39
View File
@@ -6,7 +6,10 @@ FullCalendar can display events from a public [Google Calendar](http://calendar.
It can serve as a backend that manages and persistently stores event data
(a feature that FullCalendar currently lacks).
**To get started, you must first make your Google Calendar public:**
Before you code...
------------------
**You must first make your Google Calendar public:**
1. In the Google Calendar interface, locate the "My Calendar" box on the left.
2. Click the arrow next to the calendar you need.
@@ -23,56 +26,84 @@ It can serve as a backend that manages and persistently stores event data
4. In the "Calendar Address" section of the screen, click the XML badge.
5. Your feed's URL will appear.
**Next, you must have all the required js/css files**. This includes the standard fullcalendar.js
Dependencies
------------
Next, you must have all the required js/css files. This includes the standard fullcalendar.js
and fullcalendar.css, **in addition to gcal.js**:
<script type='text/javascript' src='fullcalendar/gcal.js'></script>
Writing the code (version 1.5 and above)
---------------------------------------
**Now it's time to initialize your calendar in JavaScript.**
You will use the `$.fullCalendar.gcalFeed` function with the `events` option, like so:
Now it's time to initialize your calendar in JavaScript.
You can simply put your feed's URL in the `events` option:
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: 'http://www.google.com/your_feed_url/'
});
});
</script>
If you want to specify some [Event Source options](event_data/Event_Source_Object#options), you need to write things a little differently:
<script type='text/javascript'>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
events: $.fullCalendar.gcalFeed(
"http://www.google.com/your_feed_url/"
)
events: {
url: 'http://www.google.com/your_feed_url/',
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
}
});
});
If you wanted to import more than one Google Calendar, you would use the
[eventSources](event_data/eventSources) option instead.
</script>
Options
-------
You can tweak the way FullCalendar imports your Google Calendar events through these options:
- **className** - CSS class to attach to each event
- **editable** - whether to allow dragging/resizing (default: `false`)
- **currentTimezone** - a string like "America/Chicago".
Consult [http://php.net/manual/en/timezones.php](http://php.net/manual/en/timezones.php) for a full list.
Here is an example of how you'd use these options:
$('#calendar').fullCalendar({
events: $.fullCalendar.gcalFeed(
"http://www.google.com/your_feed_url/",
{
// put your options here
className: 'gcal-event',
editable: true,
currentTimezone: 'America/Chicago'
}
)
});
<table>
<tr>
<th>
currentTimezone
</th>
<td markdown='1'>
a string like "America/Chicago".
Consult [http://php.net/manual/en/timezones.php](http://php.net/manual/en/timezones.php) for a full list.
</td>
</tr>
<tr>
<th>
editable
</th>
<td markdown='1'>
whether to allow dragging/resizing (default: `false`)
</td>
</tr>
<tr>
<th>
className
</th>
<td>
CSS class to attach to each event
</td>
</tr>
<tr>
<th>
&nbsp;
</th>
<td markdown='1'>
[Any of the other Event Source options...](event_data/Event_Source_Object#options)
</td>
</tr>
</table>
Timezones Gotchas
-----------------
@@ -87,4 +118,71 @@ When both timezones are the same, you should have no problems. When they are dif
Thus, times will be different than what you see in the Google Calendar interface because they are being adjusted to the GMT of the calendar.
The solution is to use the `currentTimezone` option. If this is set to the same timezone as your Google Account, all dates should appear consistent.
Multiple Google Calendars
-------------------------
You can specify multiple Google Calendars by using the `eventSources` option:
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
eventSources: [
// source with no options
"http://www.google.com/your_feed_url1/",
// source with no options
"http://www.google.com/your_feed_url2/",
// source WITH options
{
url: "http://www.google.com/your_feed_url3/",
className: 'nice-event'
}
]
});
});
</script>
Writing the Code (prior to version 1.5)
---------------------------------------
Prior to version 1.5, Google Calendar feeds were defined differently.
This way will still continue to work until version 2.0, but it is deprecated:
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: $.fullCalendar.gcalFeed(
"http://www.google.com/your_feed_url/"
)
});
});
</script>
Here is how you'd do the same thing, but with options:
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: $.fullCalendar.gcalFeed(
"http://www.google.com/your_feed_url/",
{
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
}
)
});
});
</script>
Prior to version 1.5, the only options that are available are `className`, `currentTimezone`, and `editable`.
event_data/cacheParam.txt → removed/cacheParam.txt
+6
View File
@@ -2,6 +2,12 @@
cacheParam *1.1*
================
<div class='removed-notice' markdown='1'>
This option was removed in version 1.5.
Use the [JSON event source](../event_data/events_json_feed#caching) jQuery.ajax cache parameter
to enable/disable caching.
</div>
A GET parameter of this name will be inserted into each JSON feed's URL to prevent caching.
<div class='spec' markdown='1'>
removed/index.txt
+1
View File
@@ -2,6 +2,7 @@
Renamed/Removed
---------------
- cacheParam
- prevMonth
- nextMonth
- draggable
selection/selectable.txt
+1 -1
View File
@@ -18,7 +18,7 @@ To learn the ways in which selections can be cleared, read the docs
for the [unselect](unselect_callback) callback.
To view an example of how to create a new event based on a user's selection
see "examples/selectable.html" in the download, or [visit this page](/js/fullcalendar/examples/selectable.html).
see "demos/selectable.html" in the download, or [visit this page](/js/fullcalendar-1.5.1/demos/selectable.html).
<div class='version-info' markdown='1'>
A View Option Hash has been supported since version 1.4.7
selection/unselectCancel.txt
+1 -1
View File
@@ -15,5 +15,5 @@ This option is useful if you have a "Create an event" form
that shows up in response to the user making a selection.
When the user clicks on this form, you probably don't want to
the current selection to go away. Thus, you should add a class to your form
such as "my-form", and set the `unselectAuto` option
such as "my-form", and set the `unselectCancel` option
to `".my-form"`.
views/Available_Views.txt
+5 -5
View File
@@ -5,11 +5,11 @@ Available Views
FullCalendar has a number of different "views", or ways of displaying days and events.
The following 5 views are all built in to FullCalendar:
- **month** - [see example](/js/fullcalendar_views/month.html)
- **basicWeek** - [see example](/js/fullcalendar_views/basicWeek.html) (available since version 1.3)
- **basicDay** - [see example](/js/fullcalendar_views/basicDay.html) (available since version 1.3)
- **agendaWeek** - [see example](/js/fullcalendar_views/agendaWeek.html) (available since version 1.4)
- **agendaDay** - [see example](/js/fullcalendar_views/agendaDay.html) (available since version 1.4)
- **month** - [see example](../../views/month/)
- **basicWeek** - [see example](../../views/basicWeek/) (available since version 1.3)
- **basicDay** - [see example](../../views/basicDay/) (available since version 1.3)
- **agendaWeek** - [see example](../../views/agendaWeek/) (available since version 1.4)
- **agendaDay** - [see example](../../views/agendaDay/) (available since version 1.4)
You can define [header](../display/header) buttons to allow the user to switch between them.
You can set the initial view of the calendar with the [defaultView]() option.