locked down examples/tests for 1.4, some minor bugfixes

This commit is contained in:
Adam Shaw 2009-10-19 05:33:14 +00:00
parent a52ce8f40d
commit 067481b774
21 changed files with 768 additions and 538 deletions

View file

@ -1,4 +1,22 @@
version 1.4 (10/19/09)
- agendaWeek and agendaDay views !!!
- added some options for agenda views:
- allDaySlot
- allDayText
- firstHour
- slotMinutes
- defaultEventMinutes
- axisFormat
- modified some existing options/triggers to work with agenda views:
- dragOpacity and timeFormat can now accept a "View Hash" (a new concept)
- dayClick now has an allDay parameter
- eventDrop now has an an allDay parameter
(this will affect those who use revertFunc, adjust parameter list)
- added 'prevYear' and 'nextYear' for buttons in header
- minor change for theme users, ui-state-hover not applied to active/inactive buttons
- added event-color-changing example in docs
version 1.3.2 (10/13/09) version 1.3.2 (10/13/09)
- Bugfixes (please upgrade from 1.3.1!) - Bugfixes (please upgrade from 1.3.1!)
- squashed potential infinite loop when addMonths and addDays - squashed potential infinite loop when addMonths and addDays

59
docs/colors-and-theming.txt Executable file
View file

@ -0,0 +1,59 @@
Changing Event Colors
=====================
You can modify the default color that affects *all* events by adding some
css in the following form:
.. code-block:: css
.fc-event,
.fc-agenda .fc-event-time,
.fc-event a {
background-color: black; /* background color */
border-color: black; /* border color (often same as background-color) */
color: red; /* text color */
}
You can also change the color for *certain* events by using the ``className`` property
of each :ref:`CalEvent Object <CalEvent>`. Here is an example of the CSS you would write
if your className was ``"holiday"``:
.. code-block:: css
.holiday,
.fc-agenda .holiday .fc-event-time,
.holiday a {
background-color: green; /* background color */
border-color: green; /* border color (often same as background-color) */
color: yellow; /* text color */
}
If you are using the "default" and "className" techniques together,
make sure the CSS for the "default" technique *comes first*.
Theming
=======
FullCalendar can be used with jQuery UI themes. Themes provide a more stylized
look for the calendar and can easily be created using the
`jQuery UI ThemeRoller <http://jqueryui.com/themeroller/>`_.
In order for themes to work, you must include the theme's CSS file and
*fullcalendar.css* on the current page. You must also enable the ``theme`` option.
Here is the full list of theme-related options:
**theme**: Boolean, *Default*: ``false``
Enables/disables use of jQuery UI themes
**buttonIcons**: Object
Determines which icons appear within header buttons. If a button
does not have an entry, it falls back to using ``buttonText``.
Here is the default value for ``buttonIcons``::
{
prev: 'circle-triangle-w',
next: 'circle-triangle-e'
}

View file

@ -61,10 +61,10 @@ Basic Options
Text that will be displayed on buttons of the header. Default:: Text that will be displayed on buttons of the header. Default::
{ {
prev: '&nbsp;&#9668;&nbsp;', // left triangle prev: '&nbsp;&#9668;&nbsp;', // left triangle
next: '&nbsp;&#9658;&nbsp;', // right triangle next: '&nbsp;&#9658;&nbsp;', // right triangle
prevYear: 'prev year', prevYear: '&nbsp;&lt;&lt;&nbsp;', // <<
nextYear: 'next year', nextYear: '&nbsp;&gt;&gt;&nbsp;', // >>
today: 'today', today: 'today',
month: 'month', month: 'month',
week: 'week', week: 'week',
@ -103,7 +103,7 @@ Basic Options
**allDaySlot**: Boolean, *Default*: ``true`` **allDaySlot**: Boolean, *Default*: ``true``
In the agenda views, determines if the "all-day" slot is displayed at the top In the agenda views, determines if the "all-day" slot is displayed at the top
of the calendar. When hidden with ``false``, all-day events will not be displayed of the calendar. When hidden with ``false``, all-day events will not be displayed
at all. in agenda views.
**allDayText**: Boolean, *Default*: ``'all-day'`` **allDayText**: Boolean, *Default*: ``'all-day'``
In the agenda views, the text titling the "all-day" slot at the top of the calendar. In the agenda views, the text titling the "all-day" slot at the top of the calendar.
@ -147,7 +147,7 @@ Event Editing
The opacity of an event when it is being dragged. Values range The opacity of an event when it is being dragged. Values range
from 0.0 to 1.0. from 0.0 to 1.0.
Specify a single number to affect all views, or an Specify a single number to affect all views, or a
:ref:`ViewHash` to target specific views. Here is the default :ref:`ViewHash` to target specific views. Here is the default
(a View Hash):: (a View Hash)::

View file

@ -1,25 +0,0 @@
Theming
=======
FullCalendar can be used with jQuery UI themes. Themes provide a more stylized
look for the calendar and can easily be created using the
`jQuery UI ThemeRoller <http://jqueryui.com/themeroller/>`_.
In order for themes to work, you must include the theme's CSS file and
*fullcalendar.css* on the current page. You must also enable the ``theme`` option.
Here is the full list of theme-related options:
**theme**: Boolean, *Default*: ``false``
Enables/disables use of jQuery UI themes
**buttonIcons**: Object
Determines which icons appear within header buttons. If a button
does not have an entry, it falls back to using ``buttonText``.
Here is the default value for ``buttonIcons``::
{
prev: 'circle-triangle-w',
next: 'circle-triangle-e'
}

View file

@ -23,9 +23,15 @@ always available (:ref:`more below <view-object>`).
``this`` is set to the main element. ``this`` is set to the main element.
**dayClick**: function(*dayDate, view*) **dayClick**: function(*dayDate, allDay, jsEvent, view*)
Triggered when the user clicks on a day. ``dayDate`` is a Date object with Triggered when the user clicks on a day. ``dayDate`` is a Date object holding the
it's time set to 00:00:00. current date and time (if in an agenda view) of the clicked area.
``allDay`` will be ``true`` when the user clicks on a day in month-view
or the "all-day" slot in the agenda views. It will be ``false`` when the user
clicks on a slot in the agenda views.
``jsEvent`` is the native javascript event (with information about click position, etc).
``this`` is set to the TD element of the clicked day. ``this`` is set to the TD element of the clicked day.
@ -50,26 +56,30 @@ always available (:ref:`more below <view-object>`).
the event's URL. the event's URL.
**eventDragStart**, **eventDragStop**: function(*calEvent, jsEvent, ui, view*) **eventDragStart**, **eventDragStop**: function(*calEvent, jsEvent, ui, view*)
Triggered before/after an event is dragged (but not necessarily moved to a new day). Triggered before/after an event is dragged (but not necessarily moved to a new day/time).
``calEvent`` holds that event's information (date, title, etc). ``calEvent`` holds that event's information (date, title, etc).
``jsEvent`` holds the native javascript event (with information about click position, etc). ``jsEvent`` holds the native javascript event (with information about click position, etc).
``ui`` holds the jQuery UI object. ``ui`` holds the jQuery UI object.
``this`` is set to the event's element ``this`` is set to the event's element
**eventDrop**: function(*calEvent, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view*) **eventDrop**: function(*calEvent, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view*)
Triggered when dragging stops and the event has moved to a *different* day. Triggered when dragging stops and the event has moved to a *different* day/time.
``dayDelta`` holds the number of days the event was moved forward (a positive number) ``dayDelta`` holds the number of days the event was moved forward (a positive number)
or backwards (a negative number). or backwards (a negative number).
``minuteDelta`` will always be ``0`` and is reserved for a future release ``minuteDelta`` holds the number of minutes the event was moved forward (a positive number)
of FullCalendar where there will be an agenda view. or backwards (a negative number). Only applies to the agenda views.
``dayDelta`` and ``minuteDelta`` are elegant for dealing with multi-day and ``dayDelta`` and ``minuteDelta`` are elegant for dealing with multi-day and
repeating events. If updating a remote database, just add these values to the repeating events. If updating a remote database, just add these values to the
start and end times of all events with the given ``calEvent.id`` start and end times of all events with the given ``calEvent.id``
``allDay`` is ``true`` if the event has been dropped on a day in month-view or the
"all-day" slot in the agenda views. It will be ``false`` if dropped on a slot
in the agenda views.
``revertFunc`` is a function that, if called, reverts the event's start/end date to ``revertFunc`` is a function that, if called, reverts the event's start/end date to
the values *before* the drag. This is useful if an ajax call should fail. the values *before* the drag. This is useful if an ajax call should fail.
@ -87,8 +97,9 @@ always available (:ref:`more below <view-object>`).
``dayDelta`` holds the number of days the event's end time was moved ``dayDelta`` holds the number of days the event's end time was moved
forward (a positive number) or backwards (a negative number). forward (a positive number) or backwards (a negative number).
``minuteDelta`` will always be ``0`` and is reserved for a future release ``minuteDelta`` holds the number of minutes the event's end time was moved
of FullCalendar where there will be an agenda view. forward (a positive number) or backwards (a negative number).
Only applies to the agenda views.
``revertFunc`` is a function that, if called, reverts the event's start/end date to ``revertFunc`` is a function that, if called, reverts the event's start/end date to
the values *before* the drag. This is useful if an ajax call should fail. the values *before* the drag. This is useful if an ajax call should fail.

114
examples/agenda-views.html Executable file
View file

@ -0,0 +1,114 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!--<src>-->
<link rel='stylesheet' type='text/css' href='../src/css/main.css' />
<link rel='stylesheet' type='text/css' href='../src/css/grid.css' />
<link rel='stylesheet' type='text/css' href='../src/css/agenda.css' />
<script type='text/javascript' src='../src/jquery/jquery.js'></script>
<script type='text/javascript' src='../src/jquery/ui.core.js'></script>
<script type='text/javascript' src='../src/jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../src/jquery/ui.resizable.js'></script>
<script type='text/javascript' src='../src/main.js'></script>
<script type='text/javascript' src='../src/grid.js'></script>
<script type='text/javascript' src='../src/agenda.js'></script>
<script type='text/javascript' src='../src/view.js'></script>
<script type='text/javascript' src='../src/util.js'></script>
<!--</src>-->
<!--
<dist>
<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
<script type='text/javascript' src='../jquery/jquery.js'></script>
<script type='text/javascript' src='../jquery/ui.core.js'></script>
<script type='text/javascript' src='../jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../jquery/ui.resizable.js'></script>
<script type='text/javascript' src='../fullcalendar.min.js'></script>
</dist>
-->
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
});
</script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

80
examples/views.html → examples/basic-views.html Executable file → Normal file
View file

@ -29,56 +29,62 @@
$(document).ready(function() { $(document).ready(function() {
var d = new Date(); var date = new Date();
var y = d.getFullYear(); var d = date.getDate();
var m = d.getMonth(); var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({ $('#calendar').fullCalendar({
editable: true,
header: { header: {
left: 'title', left: 'prev,next today',
center: 'month,agendaWeek,basicWeek,agendaDay,basicDay', center: 'title',
right: 'today prev,next' right: 'month,basicWeek,basicDay'
},
buttonText: {
agendaWeek: 'agendaWeek',
basicWeek: 'basicWeek',
agendaDay: 'agendaDay',
basicDay: 'basicDay'
}, },
editable: true,
events: [ events: [
{ {
id: 1, title: 'All Day Event',
title: "Long Event", start: new Date(y, m, 1)
start: new Date(y, m, 6, 14, 0), },
end: new Date(y, m, 11), {
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false allDay: false
}, },
{ {
id: 2, id: 999,
title: "Repeating Event", title: 'Repeating Event',
start: new Date(y, m, 2), start: new Date(y, m, d+4, 16, 0),
allDay: true
},
{
id: 2,
title: "Repeating Event",
start: new Date(y, m, 9),
allDay: true
},
{
id: 3,
title: "Meeting",
start: new Date(y, m, 20, 9, 0),
allDay: false allDay: false
}, },
{ {
id: 4, title: 'Meeting',
title: "Click for Facebook", start: new Date(y, m, d, 10, 30),
start: new Date(y, m, 27, 16), allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29), end: new Date(y, m, 29),
url: "http://facebook.com/", url: 'http://google.com/'
allDay: false
} }
] ]
}); });

66
examples/basic.html → examples/default.html Normal file → Executable file
View file

@ -29,45 +29,57 @@
$(document).ready(function() { $(document).ready(function() {
var d = new Date(); var date = new Date();
var y = d.getFullYear(); var d = date.getDate();
var m = d.getMonth(); var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({ $('#calendar').fullCalendar({
editable: true, editable: true,
events: [ events: [
{ {
id: 1, title: 'All Day Event',
title: "Long Event", start: new Date(y, m, 1)
start: new Date(y, m, 6, 14, 0), },
end: new Date(y, m, 11), {
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false allDay: false
}, },
{ {
id: 2, id: 999,
title: "Repeating Event", title: 'Repeating Event',
start: new Date(y, m, 2), start: new Date(y, m, d+4, 16, 0),
allDay: true
},
{
id: 2,
title: "Repeating Event",
start: new Date(y, m, 9),
allDay: true
},
{
id: 3,
title: "Meeting",
start: new Date(y, m, 20, 9, 0),
allDay: false allDay: false
}, },
{ {
id: 4, title: 'Meeting',
title: "Click for Facebook", start: new Date(y, m, d, 10, 30),
start: new Date(y, m, 27, 16), allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29), end: new Date(y, m, 29),
url: "http://facebook.com/", url: 'http://google.com/'
allDay: false
} }
] ]
}); });

View file

@ -37,8 +37,11 @@
}, },
loading: function(bool) { loading: function(bool) {
if (bool) $('#loading').show(); if (bool) {
else $('#loading').hide(); $('#loading').show();
}else{
$('#loading').hide();
}
} }
}); });

View file

@ -30,46 +30,63 @@
$(document).ready(function() { $(document).ready(function() {
var d = new Date(); var date = new Date();
var y = d.getFullYear(); var d = date.getDate();
var m = d.getMonth(); var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({ $('#calendar').fullCalendar({
theme: true, theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true, editable: true,
events: [ events: [
{ {
id: 1, title: 'All Day Event',
title: "Long Event", start: new Date(y, m, 1)
start: new Date(y, m, 6, 14, 0), },
end: new Date(y, m, 11), {
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false allDay: false
}, },
{ {
id: 2, id: 999,
title: "Repeating Event", title: 'Repeating Event',
start: new Date(y, m, 2), start: new Date(y, m, d+4, 16, 0),
allDay: true
},
{
id: 2,
title: "Repeating Event",
start: new Date(y, m, 9),
allDay: true
},
{
id: 3,
title: "Meeting",
start: new Date(y, m, 20, 9, 0),
allDay: false allDay: false
}, },
{ {
id: 4, title: 'Meeting',
title: "Click for Facebook", start: new Date(y, m, d, 10, 30),
start: new Date(y, m, 27, 16), allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29), end: new Date(y, m, 29),
url: "http://facebook.com/", url: 'http://google.com/'
allDay: false
} }
] ]
}); });

View file

@ -63,6 +63,7 @@ function Agenda(element, options, methods) {
renderEvents: renderEvents, renderEvents: renderEvents,
rerenderEvents: rerenderEvents, rerenderEvents: rerenderEvents,
updateSize: updateSize, updateSize: updateSize,
shown: resetScroll,
defaultEventEnd: function(event) { defaultEventEnd: function(event) {
var start = cloneDate(event.start); var start = cloneDate(event.start);
if (event.allDay) { if (event.allDay) {
@ -115,7 +116,6 @@ function Agenda(element, options, methods) {
var d0 = rtl ? addDays(cloneDate(view.visEnd), -1) : cloneDate(view.visStart), var d0 = rtl ? addDays(cloneDate(view.visEnd), -1) : cloneDate(view.visStart),
d = cloneDate(d0), d = cloneDate(d0),
scrollDate = cloneDate(d0),
today = clearTime(new Date()); today = clearTime(new Date());
if (!head) { // first time rendering, build from scratch if (!head) { // first time rendering, build from scratch
@ -219,15 +219,20 @@ function Agenda(element, options, methods) {
} }
updateSize(); updateSize();
resetScroll();
scrollDate.setHours(options.firstHour);
body.scrollTop(timePosition(d0, scrollDate) + 1); // +1 for the border
fetchEvents(renderEvents); fetchEvents(renderEvents);
}; };
function resetScroll() {
var d0 = new Date(1970, 0, 1),
scrollDate = cloneDate(d0);
scrollDate.setHours(options.firstHour);
body.scrollTop(timePosition(d0, scrollDate) + 1); // +1 for the border
}
function updateSize() { function updateSize() {
bodyTable.width(''); bodyTable.width('');

View file

@ -244,10 +244,11 @@ table.fc-header {
/* Use the 'className' CalEvent property and the following /* Use the 'className' CalEvent property and the following
* example CSS to change event color on a per-event basis: * example CSS to change event color on a per-event basis:
* *
* .my-event-class, * .myclass,
* .my-event-class a { * .fc-agenda .myclass .fc-event-time,
* border-color: black; * .myclass a {
* background-color: black; * background-color: black;
* border-color: black;
* color: red; * color: red;
* } * }
*/ */

View file

@ -12,9 +12,9 @@ var defaults = {
defaultView: 'month', defaultView: 'month',
aspectRatio: 1.35, aspectRatio: 1.35,
header: { header: {
left: 'prev,next today', left: 'title',
center: 'title', center: '',
right: 'month,agendaWeek,agendaDay' right: 'today prev,next'
}, },
// editing // editing
@ -54,8 +54,8 @@ var defaults = {
buttonText: { buttonText: {
prev: '&nbsp;&#9668;&nbsp;', prev: '&nbsp;&#9668;&nbsp;',
next: '&nbsp;&#9658;&nbsp;', next: '&nbsp;&#9658;&nbsp;',
prevYear: 'prev year', prevYear: '&nbsp;&lt;&lt;&nbsp;',
nextYear: 'next year', nextYear: '&nbsp;&gt;&gt;&nbsp;',
today: 'today', today: 'today',
month: 'month', month: 'month',
week: 'week', week: 'week',
@ -74,13 +74,15 @@ var defaults = {
// right-to-left defaults // right-to-left defaults
var rtlDefaults = { var rtlDefaults = {
header: { header: {
left: 'agendaDay,agendaWeek,month', left: 'next,prev today',
center: 'title', center: '',
right: 'today next,prev' right: 'title'
}, },
buttonText: { buttonText: {
prev: '&nbsp;&#9658;&nbsp;', prev: '&nbsp;&#9658;&nbsp;',
next: '&nbsp;&#9668;&nbsp;' next: '&nbsp;&#9668;&nbsp;',
prevYear: '&nbsp;&gt;&gt;&nbsp;',
nextYear: '&nbsp;&lt;&lt;&nbsp;'
} }
}; };
@ -180,6 +182,9 @@ $.fn.fullCalendar = function(options) {
} }
if (viewInstances[v]) { if (viewInstances[v]) {
(view = viewInstances[v]).element.show(); (view = viewInstances[v]).element.show();
if (view.shown) {
view.shown();
}
}else{ }else{
view = viewInstances[v] = $.fullCalendar.views[v]( view = viewInstances[v] = $.fullCalendar.views[v](
$("<div class='fc-view fc-view-" + v + "'/>").appendTo(content), $("<div class='fc-view fc-view-" + v + "'/>").appendTo(content),
@ -569,7 +574,10 @@ $.fn.fullCalendar = function(options) {
buttonClick = publicMethods[buttonName]; buttonClick = publicMethods[buttonName];
} }
else if (views[buttonName]) { else if (views[buttonName]) {
buttonClick = function() { changeView(buttonName) }; buttonClick = function() {
button.removeClass(tm + '-state-hover');
changeView(buttonName)
};
} }
if (buttonClick) { if (buttonClick) {
if (prevButton) { if (prevButton) {
@ -594,17 +602,24 @@ $.fn.fullCalendar = function(options) {
} }
}) })
.mousedown(function() { .mousedown(function() {
button.addClass(tm + '-state-down'); button
.not('.' + tm + '-state-active')
.not('.' + tm + '-state-disabled')
.addClass(tm + '-state-down');
}) })
.mouseup(function() { .mouseup(function() {
button.removeClass(tm + '-state-down'); button.removeClass(tm + '-state-down');
}) })
.hover( .hover(
function() { function() {
button.addClass(tm + '-state-hover'); button
.not('.' + tm + '-state-active')
.not('.' + tm + '-state-disabled')
.addClass(tm + '-state-hover');
}, },
function() { function() {
button.removeClass(tm + '-state-hover') button
.removeClass(tm + '-state-hover')
.removeClass(tm + '-state-down'); .removeClass(tm + '-state-down');
} }
) )

View file

@ -7,56 +7,62 @@
$(document).ready(function() { $(document).ready(function() {
var d = new Date(); var date = new Date();
var y = d.getFullYear(); var d = date.getDate();
var m = d.getMonth(); var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({ $('#calendar').fullCalendar({
header: { header: {
left: 'prev,next today', left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,basicWeek,agendaDay,basicDay' right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
}, },
editable: true, editable: true,
events: [ events: [
{ {
id: 1, title: 'All Day Event',
title: "Long Event", start: new Date(y, m, 1)
start: new Date(y, m, 6, 14, 0),
end: new Date(y, m, 11)
//allDay: false
}, },
{ {
id: 2, title: 'Long Event',
title: "Repeating Event111", start: new Date(y, m, d-5),
start: new Date(y, m, 8), end: new Date(y, m, d-2)
allDay: true
}, },
{ {
id: 2, id: 999,
title: "Repeating Event222", title: 'Repeating Event',
start: new Date(y, m, 9, 5, 0), start: new Date(y, m, d-3, 16, 0),
allDay: false allDay: false
}, },
{ {
id: 345, id: 999,
title: "Hey Hey", title: 'Repeating Event',
start: new Date(y, m, 9, 4, 0), start: new Date(y, m, d+4, 16, 0),
allDay: false,
className: 'adam shaw'
},
{
id: 3,
title: "Meeting",
start: new Date(y, m, 20, 9, 0),
allDay: false allDay: false
}, },
{ {
id: 4, title: 'Meeting',
title: "Click for Facebook", start: new Date(y, m, d, 10, 30),
start: new Date(y, m, 27, 16), allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 5),
end: new Date(y, m, d, 14, 43),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29), end: new Date(y, m, 29),
url: "http://facebook.com/", url: 'http://google.com/'
allDay: false
} }
] ]
}); });

View file

@ -4,13 +4,16 @@
<script type='text/javascript' src='loader.js'></script> <script type='text/javascript' src='loader.js'></script>
<script type='text/javascript'> <script type='text/javascript'>
var d = new Date(); var date = new Date();
var y = d.getFullYear(); var d = date.getDate();
var m = d.getMonth(); var m = date.getMonth();
var y = date.getFullYear();
$(document).ready(function() { $(document).ready(function() {
$('#calendar').fullCalendar({ $('#calendar').fullCalendar({
header: { header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,basicWeek,agendaDay,basicDay' right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
}, },
editable: true, editable: true,
@ -30,53 +33,48 @@
),*/ ),*/
[ [
{ {
id: 1, title: 'All Day Event',
title: "Long Event", start: new Date(y, m, 1)
start: new Date(y, m, 6),
end: new Date(y, m, 10)
}, },
{ {
id: 2, title: 'Long Event',
title: "Repeating", start: new Date(y, m, d-5),
start: new Date(y, m, 2) end: new Date(y, m, d-2)
}, },
{ {
id: 2, id: 999,
title: "Repeating", title: 'Repeating Event',
start: new Date(y, m, 9) start: new Date(y, m, d-3, 16, 0),
},
{
id: 3,
title: "Meeting",
start: new Date(y, m, 20, 9, 0),
end: new Date(y, m, 20, 10, 0),
allDay: false allDay: false
}, },
{ {
id: 4, id: 999,
title: "Click for Facebook", title: 'Repeating Event',
start: new Date(y, m, 27), start: new Date(y, m, d+4, 16, 0),
end: new Date(y, m, 28),
url: "http://facebook.com/"
},
{
id: 5,
title: "timed event1",
start: new Date (y, m, 31, 17, 30),
allDay: false allDay: false
}, },
{ {
id: 6, title: 'Meeting',
title: "timed event1", start: new Date(y, m, d, 10, 30),
start: new Date (y, m+1, 2, 14, 15),
allDay: false allDay: false
}, },
{ {
id: 7, title: 'Lunch',
title: "timed event1", start: new Date(y, m, d, 12, 0),
start: new Date (y, m+1, 4, 15, 00), end: new Date(y, m, d, 14, 0),
end: new Date(y, m+1, 4, 17, 00),
allDay: false allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
} }
] ]
] ]
@ -87,9 +85,11 @@
<style> <style>
.holiday, .holiday,
.fc-agenda .holiday .fc-event-time,
.holiday a { .holiday a {
background: green; background: green;
border-color: green; border-color: green;
color: yellow;
} }
.maddog, .maddog,

View file

@ -4,15 +4,17 @@
<script type='text/javascript' src='loader.js'></script> <script type='text/javascript' src='loader.js'></script>
<script type='text/javascript'> <script type='text/javascript'>
var d = new Date(); var date = new Date();
var y = d.getFullYear(); var d = date.getDate();
var m = d.getMonth(); var m = date.getMonth();
var y = date.getFullYear();
$(document).ready(function() { $(document).ready(function() {
$('#calendar').fullCalendar({ $('#calendar').fullCalendar({
header: { header: {
left: 'month,agendaWeek,basicWeek,agendaDay,basicDay' center: 'month,agendaWeek,basicWeek,agendaDay,basicDay',
left: 'nextYear,next,prev,prevYear today'
}, },
editable: true, editable: true,
@ -25,12 +27,10 @@
dayNames: ['zondag', 'maandag', 'dinsdag', 'woensdag','donderdag', 'vrijdag', 'zaterdag'], dayNames: ['zondag', 'maandag', 'dinsdag', 'woensdag','donderdag', 'vrijdag', 'zaterdag'],
dayNamesShort: ["zo", "ma", "di", "wo", "do", "vr", "za", "zo"], dayNamesShort: ["zo", "ma", "di", "wo", "do", "vr", "za", "zo"],
timeFormat: 'H(:mm)t', //timeFormat: 'H(:mm)t',
weekMode: 'variable', weekMode: 'variable',
// TODO: add drag & resize tests
dayClick: function(dayDate, view) { dayClick: function(dayDate, view) {
console.log('dayClick - ' + dayDate + ' - ' + view.title); console.log('dayClick - ' + dayDate + ' - ' + view.title);
}, },
@ -51,53 +51,48 @@
events: [ events: [
{ {
id: 1, title: 'All Day Event',
title: "Long Event", start: new Date(y, m, 1)
start: new Date(y, m, 6),
end: new Date(y, m, 10)
}, },
{ {
id: 2, title: 'Long Event',
title: "Repeating", start: new Date(y, m, d-5),
start: new Date(y, m, 2) end: new Date(y, m, d-2)
}, },
{ {
id: 2, id: 999,
title: "Repeating", title: 'Repeating Event',
start: new Date(y, m, 9) start: new Date(y, m, d-3, 16, 0),
},
{
id: 3,
title: "Meeting",
start: new Date(y, m, 20, 9, 0),
end: new Date(y, m, 20, 10, 0),
allDay: false allDay: false
}, },
{ {
id: 4, id: 999,
title: "Click for Facebook", title: 'Repeating Event',
start: new Date(y, m, 27), start: new Date(y, m, d+4, 16, 0),
end: new Date(y, m, 28),
url: "http://facebook.com/"
},
{
id: 5,
title: "timed event1",
start: new Date (y, m, 31, 17, 30),
allDay: false allDay: false
}, },
{ {
id: 6, title: 'Meeting',
title: "timed event1", start: new Date(y, m, d, 10, 30),
start: new Date (y, m+1, 2, 14, 15),
allDay: false allDay: false
}, },
{ {
id: 7, title: 'Lunch',
title: "timed event1", start: new Date(y, m, d, 12, 0),
start: new Date (y, m+1, 4, 15, 00), end: new Date(y, m, d, 14, 0),
end: new Date(y, m+1, 4, 17, 00),
allDay: false allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
} }
] ]
}); });

View file

@ -4,17 +4,19 @@
<script type='text/javascript' src='loader.js'></script> <script type='text/javascript' src='loader.js'></script>
<script type='text/javascript'> <script type='text/javascript'>
var cal; var cal, staticEvents;
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth();
var staticEvents; var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$(document).ready(function() { $(document).ready(function() {
cal = $('#calendar').fullCalendar({ cal = $('#calendar').fullCalendar({
editable: true, editable: true,
header: { header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,basicWeek,agendaDay,basicDay' right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
}, },
loading: function(bool) { loading: function(bool) {
@ -26,60 +28,56 @@
}, },
events: staticEvents = [ events: staticEvents = [
{ {
id: 1, title: 'All Day Event',
title: "Long Event", start: new Date(y, m, 1)
start: new Date(y, m, 6),
end: new Date(y, m, 10)
}, },
{ {
id: 2, title: 'Long Event',
title: "Repeating", start: new Date(y, m, d-5),
start: new Date(y, m, 2) end: new Date(y, m, d-2)
}, },
{ {
id: 2, id: 999,
title: "Repeating", title: 'Repeating Event',
start: new Date(y, m, 9) start: new Date(y, m, d-3, 16, 0),
},
{
id: 3,
title: "Meeting",
start: new Date(y, m, 20, 9, 0),
end: new Date(y, m, 21, 0, 0),
allDay: false allDay: false
}, },
{ {
id: 4, id: 999,
title: "Click for Facebook", title: 'Repeating Event',
start: new Date(y, m, 27), start: new Date(y, m, d+4, 16, 0),
end: new Date(y, m, 28),
url: "http://facebook.com/"
},
{
id: 5,
title: "timed event1",
start: new Date (y, m, 31, 17, 30),
allDay: false allDay: false
}, },
{ {
id: 6, title: 'Meeting',
title: "timed event1", start: new Date(y, m, d, 10, 30),
start: new Date (y, m+1, 2, 14, 15),
allDay: false allDay: false
}, },
{ {
id: 7, id: 777,
title: "timed event1", title: 'Lunch',
start: new Date (y, m+1, 4, 15, 00), start: new Date(y, m, d, 12, 0),
end: new Date(y, m+1, 4, 17, 00), end: new Date(y, m, d, 14, 0),
allDay: false allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
} }
] ]
}); });
}); });
function updateEventStart() { function updateEventStart() {
var event = cal.fullCalendar('clientEvents', 3)[0]; var event = cal.fullCalendar('clientEvents', 777)[0];
event.start = new Date(y, m, 25, 10, 30); event.start = new Date(y, m, 25, 10, 30);
event.end = new Date(y, m, 26); event.end = new Date(y, m, 26);
//event.allDay = true; //event.allDay = true;
@ -87,7 +85,7 @@
} }
function updateRepeatingEvent() { function updateRepeatingEvent() {
var event = cal.fullCalendar('clientEvents', 2)[0]; var event = cal.fullCalendar('clientEvents', 999)[0];
event.start = new Date(y, m, 4, 13, 30); event.start = new Date(y, m, 4, 13, 30);
event.end = new Date(y, m, 5, 2, 0); event.end = new Date(y, m, 5, 2, 0);
event.allDay = false; event.allDay = false;
@ -136,10 +134,10 @@
<br /> <br />
<button onclick="cal.fullCalendar('removeEvents')">remove all</button> <button onclick="cal.fullCalendar('removeEvents')">remove all</button>
<button onclick="cal.fullCalendar('removeEvents', 2)">remove repeating events</button> <button onclick="cal.fullCalendar('removeEvents', 999)">remove repeating events</button>
<button onclick="cal.fullCalendar('removeEvents', function(e){return !e.allDay})">remove timed events</button> <button onclick="cal.fullCalendar('removeEvents', function(e){return !e.allDay})">remove timed events</button>
<button onclick="console.log(cal.fullCalendar('clientEvents'))">log events</button> <button onclick="console.log(cal.fullCalendar('clientEvents'))">log events</button>
<button onclick="console.log(cal.fullCalendar('clientEvents', '2'))">log repeating events</button> <button onclick="console.log(cal.fullCalendar('clientEvents', '999'))">log repeating events</button>
<button onclick="console.log(cal.fullCalendar('clientEvents', function(e){return e.allDay}))">log all-day events</button> <button onclick="console.log(cal.fullCalendar('clientEvents', function(e){return e.allDay}))">log all-day events</button>
<br /> <br />

View file

@ -4,9 +4,10 @@
<script type='text/javascript' src='loader.js'></script> <script type='text/javascript' src='loader.js'></script>
<script type='text/javascript'> <script type='text/javascript'>
var d = new Date(); var date = new Date();
var y = d.getFullYear(); var d = date.getDate();
var m = d.getMonth(); var m = date.getMonth();
var y = date.getFullYear();
$(document).ready(function() { $(document).ready(function() {
$('#calendar').fullCalendar({ $('#calendar').fullCalendar({
@ -23,18 +24,26 @@
header: { header: {
left: 'title', left: 'title',
center: 'prev,month,agendaWeek,basicWeek,agendaDay,basicDay,next', center: 'month,agendaWeek,basicWeek,agendaDay,basicDay',
right: 'today' right: 'today prevYear,prev,next,nextYear'
}, },
editable: true, editable: true,
//disableDragging: true, //disableDragging: true,
//disableResizing: true, //disableResizing: true,
dragOpacity: .5, dragOpacity: .5,
//dragOpacity: { agendaWeek: .1 },
dragRevertDuration: 100, dragRevertDuration: 100,
weekMode: 'variable', weekMode: 'variable',
//allDaySlot: false,
allDayText: 'ALLDAY',
firstHour: 10,
slotMinutes: 15,
defaultEventMinutes: 30,
//axisFormat: "Hmm",
//allDayDefault: false, //allDayDefault: false,
/* /*
@ -48,56 +57,53 @@
}, },
timeFormat: "h(:mm)[T]{ - h(:mm)T}", timeFormat: "h(:mm)[T]{ - h(:mm)T}",
//timeFormat: { agendaWeek: "'YO'" },
events: [ events: [
{ {
id: 1, title: 'All Day Event',
title: "Long Event", start: new Date(y, m, 1)
start: new Date(y, m, 6),
end: new Date(y, m, 10)
}, },
{ {
id: 2, title: 'Long Event',
title: "Repeating", start: new Date(y, m, d-5),
start: new Date(y, m, 2) end: new Date(y, m, d-2)
}, },
{ {
id: 2, id: 999,
title: "Repeating", title: 'Repeating Event',
start: new Date(y, m, 9) start: new Date(y, m, d-3, 16, 0),
},
{
id: 3,
title: "Meeting",
start: new Date(y, m, 20, 9, 0),
end: new Date(y, m, 20, 10, 0),
allDay: false allDay: false
}, },
{ {
id: 4, id: 999,
title: "Click for Facebook", title: 'Repeating Event',
start: new Date(y, m, 27), start: new Date(y, m, d+4, 16, 0),
end: new Date(y, m, 28),
url: "http://facebook.com/"
},
{
id: 5,
title: "timed event1",
start: new Date (y, m, 31, 17, 30),
allDay: false allDay: false
}, },
{ {
id: 6, title: 'Meeting',
title: "timed event1", start: new Date(y, m, d, 10, 30),
start: new Date (y, m+1, 2, 14, 15),
allDay: false allDay: false
}, },
{ {
id: 7, id: 777,
title: "timed event1", title: 'Lunch',
start: new Date (y, m+1, 4, 15, 00), start: new Date(y, m, d, 12, 0),
end: new Date(y, m+1, 4, 17, 00), end: new Date(y, m, d, 14, 0),
allDay: false allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
} }
] ]
}); });

View file

@ -5,9 +5,11 @@
<script type='text/javascript'> <script type='text/javascript'>
var cal; var cal;
var d = new Date();
var y = d.getFullYear(); var date = new Date();
var m = d.getMonth(); var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var gcalFeed = $.fullCalendar.gcalFeed("http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic"); var gcalFeed = $.fullCalendar.gcalFeed("http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic");
@ -15,57 +17,51 @@
var staticEvents = [ var staticEvents = [
{ {
id: 1, title: 'All Day Event',
title: "Long Event", start: new Date(y, m, 1)
date: new Date(y, m, 6), //!
end: new Date(y, m, 10),
className: 'red-event'
}, },
{ {
id: 2, title: 'Long Event',
title: "Repeating", start: new Date(y, m, d-5),
start: new Date(y, m, 2) end: new Date(y, m, d-2)
}, },
{ {
id: 2, id: 999,
title: "Repeating", title: 'Repeating Event',
start: new Date(y, m, 9) start: new Date(y, m, d-3, 16, 0),
allDay: false
}, },
{ {
id: 3, id: 999,
title: "Meeting", title: 'Repeating Event',
start: new Date(y, m, 20, 9, 0), start: new Date(y, m, d+4, 16, 0),
end: new Date(y, m, 21, 0, 0), allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
id: 777,
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false, allDay: false,
//className: 'yellow-event black-text-event', //className: 'yellow-event black-text-event',
className: ['yellow-event', 'black-text-event'], className: ['yellow-event', 'black-text-event']
editable: true
}, },
{ {
id: 4, title: 'Birthday Party',
title: "Click for Facebook", start: new Date(y, m, d+1, 19, 0),
start: new Date(y, m, 27), end: new Date(y, m, d+1, 22, 30),
end: new Date(y, m, 28),
url: "http://facebook.com/"
},
{
id: 5,
title: "timed event1",
start: new Date (y, m, 31, 17, 30),
allDay: false allDay: false
}, },
{ {
id: 6, title: 'Click for Google',
title: "timed event1", start: new Date(y, m, 28),
start: new Date (y, m+1, 2, 14, 15), end: new Date(y, m, 29),
allDay: false url: 'http://google.com/'
},
{
id: 7,
title: "timed event1",
start: new Date (y, m+1, 4, 15, 00),
end: new Date(y, m+1, 4, 17, 00),
allDay: false
} }
]; ];
@ -86,6 +82,8 @@
cal = $('#calendar').fullCalendar({ cal = $('#calendar').fullCalendar({
editable: true, editable: true,
header: { header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,basicWeek,agendaDay,basicDay' right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
}, },
//events: staticEvents, //events: staticEvents,

View file

@ -5,9 +5,10 @@
<script type='text/javascript' src='loader.js'></script> <script type='text/javascript' src='loader.js'></script>
<script type='text/javascript'> <script type='text/javascript'>
var d = new Date(); var date = new Date();
var y = d.getFullYear(); var d = date.getDate();
var m = d.getMonth(); var m = date.getMonth();
var y = date.getFullYear();
$(document).ready(function() { $(document).ready(function() {
$('#calendar').fullCalendar({ $('#calendar').fullCalendar({
@ -18,6 +19,8 @@
//isRTL: true, //isRTL: true,
header: { header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,basicWeek,agendaDay,basicDay' right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
}, },
@ -29,53 +32,51 @@
events: [ events: [
{ {
id: 1, title: 'All Day Event',
title: "Long Event", start: new Date(y, m, 1)
start: new Date(y, m, 6),
end: new Date(y, m, 10)
}, },
{ {
id: 2, title: 'Long Event',
title: "Repeating", start: new Date(y, m, d-5),
start: new Date(y, m, 2) end: new Date(y, m, d-2)
}, },
{ {
id: 2, id: 999,
title: "Repeating", title: 'Repeating Event',
start: new Date(y, m, 9) start: new Date(y, m, d-3, 16, 0),
},
{
id: 3,
title: "Meeting",
start: new Date(y, m, 20, 9, 0),
end: new Date(y, m, 20, 10, 0),
allDay: false allDay: false
}, },
{ {
id: 4, id: 999,
title: "Click for Facebook", title: 'Repeating Event',
start: new Date(y, m, 27), start: new Date(y, m, d+4, 16, 0),
end: new Date(y, m, 28),
url: "http://facebook.com/"
},
{
id: 5,
title: "timed event1",
start: new Date (y, m, 31, 17, 30),
allDay: false allDay: false
}, },
{ {
id: 6, title: 'Meeting',
title: "timed event1", start: new Date(y, m, d, 10, 30),
start: new Date (y, m+1, 2, 14, 15),
allDay: false allDay: false
}, },
{ {
id: 7, id: 777,
title: "timed event1", title: 'Lunch',
start: new Date (y, m+1, 4, 15, 00), start: new Date(y, m, d, 12, 0),
end: new Date(y, m+1, 4, 17, 00), end: new Date(y, m, d, 14, 0),
allDay: false,
//className: 'yellow-event black-text-event',
className: ['yellow-event', 'black-text-event']
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
} }
] ]
}); });

View file

@ -4,13 +4,16 @@
<script type='text/javascript' src='loader.js'></script> <script type='text/javascript' src='loader.js'></script>
<script type='text/javascript'> <script type='text/javascript'>
var d = new Date(); var date = new Date();
var y = d.getFullYear(); var d = date.getDate();
var m = d.getMonth(); var m = date.getMonth();
var y = date.getFullYear();
$(document).ready(function() { $(document).ready(function() {
$('#calendar').fullCalendar({ $('#calendar').fullCalendar({
header: { header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,basicWeek,agendaDay,basicDay' right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
}, },
editable: true, editable: true,
@ -31,17 +34,18 @@
dayClick: function(dayDate, allDay, ev, view) { dayClick: function(dayDate, allDay, ev, view) {
console.log('dayClick - ' + dayDate + ', allDay:' + allDay + ' - ' + view.title); console.log('dayClick - ' + dayDate + ', allDay:' + allDay + ' - ' + view.title);
//console.log(ev);
//console.log(this); //console.log(this);
}, },
eventRender: function(event, element, view) { eventRender: function(event, element, view) {
if (event.id == 555) { if (event.id == 888) {
return false; return false;
} }
else if (event.id == 666) { else if (event.id == 777) {
return $("<div style='background:green'/>").text(event.title); return $("<div style='background:green'/>").text(event.title);
} }
else if (event.id == 1) { else if (event.id == 999) {
element.css('border-color', 'red'); element.css('border-color', 'red');
//console.log('renderEvent (' + event.title + ') - ' + view.title); //console.log('renderEvent (' + event.title + ') - ' + view.title);
} }
@ -77,10 +81,11 @@
console.log('DRAG STOP ' + event.title); console.log('DRAG STOP ' + event.title);
//console.log(this); //console.log(this);
}, },
eventDrop: function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) { eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
console.log('DROP ' + event.title); console.log('DROP ' + event.title);
console.log(dayDelta + ' days'); console.log(dayDelta + ' days');
console.log(minuteDelta + ' minutes'); console.log(minuteDelta + ' minutes');
console.log('allday: ' + allDay);
/*setTimeout(function() { /*setTimeout(function() {
revertFunc(); revertFunc();
}, 2000);*/ }, 2000);*/
@ -113,64 +118,49 @@
events: [ events: [
{ {
id: 555, title: 'All Day Event',
title: "Rejected Event", start: new Date(y, m, 1)
start: new Date(y, m, 5)
}, },
{ {
id: 666, title: 'Long Event',
title: "Homemade Elm Event", start: new Date(y, m, d-5),
start: new Date(y, m, 6) end: new Date(y, m, d-2)
}, },
{ {
id: 1, id: 999,
title: "Long Event", title: 'Repeating Event',
start: new Date(y, m, 6), start: new Date(y, m, d-3, 16, 0),
end: new Date(y, m, 10)
},
{
id: 2,
title: "Repeating",
start: new Date(y, m, 2)
},
{
id: 2,
title: "Repeating",
start: new Date(y, m, 9),
end: new Date(y, m, 10)
},
{
id: 3,
title: "Meeting",
start: new Date(y, m, 20, 9, 0),
end: new Date(y, m, 20, 10, 0),
allDay: false allDay: false
}, },
{ {
id: 4, id: 999,
title: "Click for Google", title: 'Repeating Event',
start: new Date(y, m, 27), start: new Date(y, m, d+4, 16, 0),
end: new Date(y, m, 28),
url: "http://google.com/"
},
{
id: 5,
title: "timed event1",
start: new Date (y, m, 31, 17, 30),
allDay: false allDay: false
}, },
{ {
id: 6, id: 888,
title: "timed event1", title: 'Meeting',
start: new Date (y, m+1, 2, 14, 15), start: new Date(y, m, d, 10, 30)
},
{
id: 777,
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false allDay: false
}, },
{ {
id: 7, title: 'Birthday Party',
title: "timed event1", start: new Date(y, m, d+1, 19, 0),
start: new Date (y, m+1, 4, 15, 00), end: new Date(y, m, d+1, 22, 30),
end: new Date(y, m+1, 4, 17, 00),
allDay: false allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
} }
] ]
}); });