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,
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:
- jQuery UI core
- [Draggable](http://jqueryui.com/demos/draggable/) (the Droppable module is **not** required)
- [Resizable](http://jqueryui.com/demos/resizable/)
These modules can be conveniently bundled/compressed/downloaded at the jQuery UI
[downloads page](http://jqueryui.com/download).
They are also included in the FullCalendar download in the "jquery" directory,
though as uncompressed files.
They are also included in the FullCalendar download in "jquery/jquery-ui-custom.js",
all bundled and compressed into one file.
After you have gathered the dependencies, **you still need to enable dragging/resizing**
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.
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.**
You will use the `$.fullCalendar.gcalFeed` function with the `events` option, like so:

View file

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