updates for docs, including selectable/droppable
This commit is contained in:
parent
288fede2af
commit
ddd7430d11
23
dropping/drop.txt
Normal file
23
dropping/drop.txt
Normal 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
40
dropping/dropAccept.txt
Normal 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
46
dropping/droppable.txt
Normal 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
9
dropping/index.txt
Normal 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>
|
|
@ -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>
|
||||||
|
|
|
@ -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`.
|
||||||
|
|
|
@ -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:
|
||||||
|
|
||||||
|
|
28
index.txt
28
index.txt
|
@ -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 & 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 & 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
14
selection/index.txt
Normal 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>
|
19
selection/selectHelper.txt
Normal file
19
selection/selectHelper.txt
Normal 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.
|
22
selection/select_callback.txt
Normal file
22
selection/select_callback.txt
Normal 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)
|
9
selection/select_method.txt
Normal file
9
selection/select_method.txt
Normal 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
25
selection/selectable.txt
Normal 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>
|
11
selection/unselectAuto.txt
Normal file
11
selection/unselectAuto.txt
Normal 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`.
|
19
selection/unselectCancel.txt
Normal file
19
selection/unselectCancel.txt
Normal 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"`.
|
24
selection/unselect_callback.txt
Normal file
24
selection/unselect_callback.txt
Normal 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)
|
9
selection/unselect_method.txt
Normal file
9
selection/unselect_method.txt
Normal 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>
|
Loading…
Reference in a new issue