updates for docs, including selectable/droppable

This commit is contained in:
Adam Shaw 2010-07-05 16:30:40 -07:00
parent 288fede2af
commit ddd7430d11
17 changed files with 298 additions and 15 deletions

23
dropping/drop.txt Normal file
View file

@ -0,0 +1,23 @@
drop *1.4.7*
============
Called when a valid jQuery UI draggable has been dropped onto the calendar.
<div class='spec' markdown='1'>
function( *date*, *allDay*, *jsEvent*, *ui* ) { }
</div>
`date` holds the JavaScript Date object of where the draggable was dropped.
`allDay` holds a boolean of whether the draggable was dropped on an all-day cell
(like in month view) or in a slot with a specific time (like in agenda view).
`jsEvent` holds the primitive JavaScript event, with information like mouse coordinates.
`ui` holds the jQuery UI information.
`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).

40
dropping/dropAccept.txt Normal file
View file

@ -0,0 +1,40 @@
dropAccept *1.4.7*
==================
Provides a way to filter which elements can be dropped onto the calendar.
<div class='spec' markdown='1'>
String/Function, *default*: `"*"`
</div>
By default, after setting a calendar' [droppable]() option to `true`, the calendar
will accept any draggables that are dropped onto the calendar. The `dropAccept` option
allows the calendar be more selective about which elements can/can't be dropped.
The value of `dropAccept` can be a string [jQuery selector](http://api.jquery.com/category/selectors/).
It can also be a function that accepts the draggable item as a single argument, and returns `true`
if the element can be dropped onto the calendar.
In the following example, the first draggable (with id `"draggable1"`) can be dropped on the calendar,
while the second draggable (with id `"draggable2"`) cannot:
...
<div id='calendar'></div>
<div id='draggable1' class='cool-event'></div>
<div id='draggable2'></div>
...
and here is the JavaScript:
$('#calendar').fullCalendar({
droppable: true,
dropAccept: '.cool-event',
drop: function() {
alert('dropped!');
}
});
$('#draggable1').draggable();
$('#draggable2').draggable();

46
dropping/droppable.txt Normal file
View file

@ -0,0 +1,46 @@
droppable *1.4.7*
=================
Determines if jQuery UI draggables can be dropped onto the calendar.
<div class='spec' markdown='1'>
Boolean, *default*: `false`
</div>
This option operates with jQuery UI draggables. You must [download](http://jqueryui.com/download)
the appropriate jQuery UI files and initialize a [draggable](http://jqueryui.com/demos/draggable/) element.
Additionally, you must set the calendar's `droppable` option to `true`.
Here is how you might initialize an element that can be dragged onto a calendar:
$('#my-draggable').draggable({
revert: true, // immediately snap back to original position
revertDuration: 0 //
});
$('#calendar').fullCalendar({
droppable: true,
drop: function(date, allDay) {
alert("Dropped on " + date + " with allDay=" + allDay);
}
});
How can I use this to add events???
-----------------------------------
Good question. It is a common need to have an "external list of events" that can be
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).
In short, you must call [renderEvent](../event_rendering/renderEvent) yourself
in the [drop]() callback.
<div class='version-info' markdown='1'>
Hopefully, this task will become more convenient with future API changes.
</div>

9
dropping/index.txt Normal file
View file

@ -0,0 +1,9 @@
Dropping External Elements
==========================
<ul>
<li><a href='droppable'>droppable</a></li>
<li><a href='dropAccept'>dropAccept</a></li>
<li class='callback'><a href='drop'>drop</a> <em>(callback)</em></li>
</ul>

View file

@ -16,3 +16,8 @@ The calendar will avoid fetching events because it already has this information
When set to `false`, the calendar will fetch events any time the view is switched, When set to `false`, the calendar will fetch events any time the view is switched,
or any time the current date changes (for example, as a result of the user clicking prev/next). or any time the current date changes (for example, as a result of the user clicking prev/next).
<div class='version-info' markdown='1'>
Before this option existed, FullCalendar would always do "lazy" event fetching,
as if `lazyFetching` were set to `true`.
</div>

View file

@ -4,14 +4,13 @@ Requirements for Event Dragging & Resizing
Event dragging and resizing requires the following jQuery UI modules: Event dragging and resizing requires the following jQuery UI modules:
- jQuery UI core
- [Draggable](http://jqueryui.com/demos/draggable/) (the Droppable module is **not** required) - [Draggable](http://jqueryui.com/demos/draggable/) (the Droppable module is **not** required)
- [Resizable](http://jqueryui.com/demos/resizable/) - [Resizable](http://jqueryui.com/demos/resizable/)
These modules can be conveniently bundled/compressed/downloaded at the jQuery UI These modules can be conveniently bundled/compressed/downloaded at the jQuery UI
[downloads page](http://jqueryui.com/download). [downloads page](http://jqueryui.com/download).
They are also included in the FullCalendar download in the "jquery" directory, They are also included in the FullCalendar download in "jquery/jquery-ui-custom.js",
though as uncompressed files. all bundled and compressed into one file.
After you have gathered the dependencies, **you still need to enable dragging/resizing** After you have gathered the dependencies, **you still need to enable dragging/resizing**
by settings the [editable]() option to `true`. by settings the [editable]() option to `true`.

View file

@ -23,6 +23,11 @@ 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. 4. In the "Calendar Address" section of the screen, click the XML badge.
5. Your feed's URL will appear. 5. Your feed's URL will appear.
**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>
**Now it's time to initialize your calendar in JavaScript.** **Now it's time to initialize your calendar in JavaScript.**
You will use the `$.fullCalendar.gcalFeed` function with the `events` option, like so: You will use the `$.fullCalendar.gcalFeed` function with the `events` option, like so:

View file

@ -1,13 +1,17 @@
- [Basic Usage](usage) <ul>
- [Google Calendar](google_calendar) <li><a href='usage'>Basic Usage</a></li>
- [General Display](display) <li><a href='google_calendar'>Google Calendar</a></li>
- [Views](views) <li><a href='display'>General Display</a></li>
- [Agenda Options](agenda) <li><a href='views'>Views</a></li>
- [Current Date](current_date) <li><a href='agenda'>Agenda Options</a></li>
- [Text/Time Customization](text) <li><a href='current_date'>Current Date</a></li>
- [Clicking & Hovering](mouse) <li><a href='text'>Text/Time Customization</a></li>
- [Event Data](event_data) <li><a href='mouse'>Clicking &amp; Hovering</a></li>
- [Event Rendering](event_rendering) <li><a href='selection'>Selection</a></li>
- [Event Dragging & Resizing](event_ui) <li><a href='event_data'>Event Data</a></li>
- [Utilities](utilities) <li><a href='event_rendering'>Event Rendering</a></li>
<li><a href='event_ui'>Event Dragging &amp; Resizing</a></li>
<li><a href='dropping'>Dropping External Elements</a></li>
<li><a href='utilities'>Utilities</a></li>
</ul>

14
selection/index.txt Normal file
View file

@ -0,0 +1,14 @@
<h1>Selection</h1>
<ul>
<li><a href='selectable'>selectable</a></li>
<li><a href='selectHelper'>selectHelper</a></li>
<li><a href='unselectAuto'>unselectAuto</a></li>
<li><a href='unselectCancel'>unselectCancel</a></li>
<li class='callback'><a href='select_callback'>select</a> <em>(callback)</em></li>
<li class='callback'><a href='unselect_callback'>unselect</a> <em>(callback)</em></li>
<li class='method'><a href='select_method'>select</a> <em>(method)</em></li>
<li class='method'><a href='unselect_method'>unselect</a> <em>(method)</em></li>
</ul>

View file

@ -0,0 +1,19 @@
selectHelper *1.4.6*
====================
Whether to draw a "placeholder" event while the user is dragging.
<div class='spec' markdown='1'>
Boolean/Function, *default*: `false`
</div>
**This option only applies to the agenda views.**
A value of `true` will draw a "placeholder" event while the user is dragging
(similar to what Google Calendar does for its week and day views).
A value of `false` (the default) will draw the standard highlighting over each cell.
A function can also be specified for drawing custom elements.
It will be given 2 arguments: the selection's start date and end date (Date objects).
It must return a DOM element that will be used.

View file

@ -0,0 +1,22 @@
select *1.4.6*
==============
A callback that will fire after a selection is made.
<div class='spec' markdown='1'>
function( *startDate*, *endDate*, *allDay*, *jsEvent*, *view* )
</div>
`startDate` is a Date object indicating the beginning of the selection.
`endDate` is a Date object indicating the end of the selection. It follows
the same rules as the [Event Object](../event_data/Event_Object) for inclusivity/exclusivity:
when `allDay` is `true`, `endDate` *includes* the last day.
`allDay` is a boolean indicating if entire days were selected (days in month view
or the "all-day" slot in the agenda view) or time slots were selected.
`jsEvent` holds the primitive JavaScript event with information such as mouse coordinates.
If `select` has been triggered via the [select method](select_method), `jsEvent` will be `undefined`.
(added in version 1.4.7)

View file

@ -0,0 +1,9 @@
select *1.4.6*
==============
A method for programmatically selecting a period of time.
<div class='spec' markdown='1'>
.fullCalendar( 'select', *startDate*, *endDate*, *allDay* )
</div>

25
selection/selectable.txt Normal file
View file

@ -0,0 +1,25 @@
selectable *1.4.6*
==================
Allows a user to highlight multiple days or timeslots by clicking and dragging.
<div class='spec' markdown='1'>
Boolean/[View Option Hash](../views/View_Option_Hash/), *default*: `false`
</div>
To let the user make selections by clicking and dragging,
this option must be set to `true`.
The [select](select_callback) and [unselect](unselect_callback) callbacks
will be useful for monitoring when selections are made and cleared.
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).
<div class='version-info' markdown='1'>
A View Option Hash has been supported since version 1.4.7
</div>

View file

@ -0,0 +1,11 @@
unselectAuto *1.4.6*
====================
Whether clicking elsewhere on the page will cause the current selection to be cleared.
<div class='spec' markdown='1'>
Boolean, *default*: `true`
</div>
This option can only take effect when [selectable]() is set to `true`.

View file

@ -0,0 +1,19 @@
unselectCancel *1.4.6*
======================
A way to specify elements that will ignore the [unselectAuto]() option.
<div class='spec' markdown='1'>
String, *default*: `''`
</div>
Clicking on elements that match this [jQuery selector](http://api.jquery.com/category/selectors/) will prevent the
current selection from being cleared (due to the [unselectAuto]() option).
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
to `".my-form"`.

View file

@ -0,0 +1,24 @@
unselect *1.4.6*
================
A callback that will fire when the current selection is cleared.
<div class='spec' markdown='1'>
function( *view*, *jsEvent* )
</div>
A selection might be cleared for a number of reasons:
1. The user clicks away from the current selection (doesn't happen when [unselectAuto]() is `false`).
2. The user makes a *new* selection. The `unselect` callback will be fired before the new selection occurs.
3. The user moves forward or backward in the current view, or switches to a new view.
4. The [unselect](unselect_method) method is called through the API.
`jsEvent` holds the primitive JavaScript event with information such as mouse coordinates.
If `unselect` has been triggered via the [unselect method](unselect_method), `jsEvent` will be `undefined`.
(added in version 1.4.7)

View file

@ -0,0 +1,9 @@
unselect *1.4.6*
================
A method for programmatically clearing the current selection.
<div class='spec' markdown='1'>
.fullCalendar( 'unselect' )
</div>