diff --git a/changelog.txt b/changelog.txt index cf9dd8c..3065a0d 100644 --- a/changelog.txt +++ b/changelog.txt @@ -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) - Bugfixes (please upgrade from 1.3.1!) - squashed potential infinite loop when addMonths and addDays diff --git a/docs/colors-and-theming.txt b/docs/colors-and-theming.txt new file mode 100755 index 0000000..77482a3 --- /dev/null +++ b/docs/colors-and-theming.txt @@ -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 `. 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 `_. + +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' + } \ No newline at end of file diff --git a/docs/index.txt b/docs/index.txt index bc082bf..bfa5a1d 100644 --- a/docs/index.txt +++ b/docs/index.txt @@ -61,10 +61,10 @@ Basic Options Text that will be displayed on buttons of the header. Default:: { - prev: ' ◄ ', // left triangle - next: ' ► ', // right triangle - prevYear: 'prev year', - nextYear: 'next year', + prev: ' ◄ ', // left triangle + next: ' ► ', // right triangle + prevYear: ' << ', // << + nextYear: ' >> ', // >> today: 'today', month: 'month', week: 'week', @@ -103,7 +103,7 @@ Basic Options **allDaySlot**: Boolean, *Default*: ``true`` 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 - at all. + in agenda views. **allDayText**: Boolean, *Default*: ``'all-day'`` 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 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 (a View Hash):: diff --git a/docs/theming.txt b/docs/theming.txt deleted file mode 100755 index 70e3b49..0000000 --- a/docs/theming.txt +++ /dev/null @@ -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 `_. - -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' - } \ No newline at end of file diff --git a/docs/triggered-actions.txt b/docs/triggered-actions.txt index be5433a..7097952 100755 --- a/docs/triggered-actions.txt +++ b/docs/triggered-actions.txt @@ -23,9 +23,15 @@ always available (:ref:`more below `). ``this`` is set to the main element. -**dayClick**: function(*dayDate, view*) - Triggered when the user clicks on a day. ``dayDate`` is a Date object with - it's time set to 00:00:00. +**dayClick**: function(*dayDate, allDay, jsEvent, view*) + Triggered when the user clicks on a day. ``dayDate`` is a Date object holding the + 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. @@ -50,26 +56,30 @@ always available (:ref:`more below `). the event's URL. **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). ``jsEvent`` holds the native javascript event (with information about click position, etc). ``ui`` holds the jQuery UI object. ``this`` is set to the event's element -**eventDrop**: function(*calEvent, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view*) - Triggered when dragging stops and the event has moved to a *different* day. +**eventDrop**: function(*calEvent, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view*) + 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) or backwards (a negative number). - ``minuteDelta`` will always be ``0`` and is reserved for a future release - of FullCalendar where there will be an agenda view. + ``minuteDelta`` holds the number of minutes the event was moved forward (a positive number) + or backwards (a negative number). Only applies to the agenda views. ``dayDelta`` and ``minuteDelta`` are elegant for dealing with multi-day and 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`` + ``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 the values *before* the drag. This is useful if an ajax call should fail. @@ -87,8 +97,9 @@ always available (:ref:`more below `). ``dayDelta`` holds the number of days the event's end time was moved forward (a positive number) or backwards (a negative number). - ``minuteDelta`` will always be ``0`` and is reserved for a future release - of FullCalendar where there will be an agenda view. + ``minuteDelta`` holds the number of minutes the event's end time was moved + 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 the values *before* the drag. This is useful if an ajax call should fail. diff --git a/examples/agenda-views.html b/examples/agenda-views.html new file mode 100755 index 0000000..dbdae45 --- /dev/null +++ b/examples/agenda-views.html @@ -0,0 +1,114 @@ + + + + + + + + + + + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/examples/views.html b/examples/basic-views.html old mode 100755 new mode 100644 similarity index 68% rename from examples/views.html rename to examples/basic-views.html index cad39c4..d21cf66 --- a/examples/views.html +++ b/examples/basic-views.html @@ -29,56 +29,62 @@ $(document).ready(function() { - var d = new Date(); - var y = d.getFullYear(); - var m = d.getMonth(); + var date = new Date(); + var d = date.getDate(); + var m = date.getMonth(); + var y = date.getFullYear(); $('#calendar').fullCalendar({ - editable: true, header: { - left: 'title', - center: 'month,agendaWeek,basicWeek,agendaDay,basicDay', - right: 'today prev,next' - }, - buttonText: { - agendaWeek: 'agendaWeek', - basicWeek: 'basicWeek', - agendaDay: 'agendaDay', - basicDay: 'basicDay' + left: 'prev,next today', + center: 'title', + right: 'month,basicWeek,basicDay' }, + editable: true, events: [ { - id: 1, - title: "Long Event", - start: new Date(y, m, 6, 14, 0), - end: new Date(y, m, 11), + 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: 2, - title: "Repeating Event", - start: new Date(y, m, 2), - 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), + id: 999, + title: 'Repeating Event', + start: new Date(y, m, d+4, 16, 0), allDay: false }, { - id: 4, - title: "Click for Facebook", - start: new Date(y, m, 27, 16), + 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://facebook.com/", - allDay: false + url: 'http://google.com/' } ] }); diff --git a/examples/basic.html b/examples/default.html old mode 100644 new mode 100755 similarity index 67% rename from examples/basic.html rename to examples/default.html index b8885a7..f2f3772 --- a/examples/basic.html +++ b/examples/default.html @@ -1,97 +1,109 @@ - - - - - - - - - - - - - - - - - - - - - - -
- + + + + + + + + + + + + + + + + + + + + + + +
+ \ No newline at end of file diff --git a/examples/gcal.html b/examples/gcal.html index f0eb1a9..4ada04e 100644 --- a/examples/gcal.html +++ b/examples/gcal.html @@ -37,8 +37,11 @@ }, loading: function(bool) { - if (bool) $('#loading').show(); - else $('#loading').hide(); + if (bool) { + $('#loading').show(); + }else{ + $('#loading').hide(); + } } }); diff --git a/examples/theme.html b/examples/theme.html index 2f89952..63cdfd0 100755 --- a/examples/theme.html +++ b/examples/theme.html @@ -30,46 +30,63 @@ $(document).ready(function() { - var d = new Date(); - var y = d.getFullYear(); - var m = d.getMonth(); + var date = new Date(); + var d = date.getDate(); + var m = date.getMonth(); + var y = date.getFullYear(); $('#calendar').fullCalendar({ theme: true, + header: { + left: 'prev,next today', + center: 'title', + right: 'month,agendaWeek,agendaDay' + }, editable: true, events: [ { - id: 1, - title: "Long Event", - start: new Date(y, m, 6, 14, 0), - end: new Date(y, m, 11), + 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: 2, - title: "Repeating Event", - start: new Date(y, m, 2), - 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), + id: 999, + title: 'Repeating Event', + start: new Date(y, m, d+4, 16, 0), allDay: false }, { - id: 4, - title: "Click for Facebook", - start: new Date(y, m, 27, 16), + 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://facebook.com/", - allDay: false + url: 'http://google.com/' } ] }); diff --git a/src/agenda.js b/src/agenda.js index dae62e6..822dbc1 100755 --- a/src/agenda.js +++ b/src/agenda.js @@ -63,6 +63,7 @@ function Agenda(element, options, methods) { renderEvents: renderEvents, rerenderEvents: rerenderEvents, updateSize: updateSize, + shown: resetScroll, defaultEventEnd: function(event) { var start = cloneDate(event.start); if (event.allDay) { @@ -115,7 +116,6 @@ function Agenda(element, options, methods) { var d0 = rtl ? addDays(cloneDate(view.visEnd), -1) : cloneDate(view.visStart), d = cloneDate(d0), - scrollDate = cloneDate(d0), today = clearTime(new Date()); if (!head) { // first time rendering, build from scratch @@ -219,15 +219,20 @@ function Agenda(element, options, methods) { } updateSize(); - - scrollDate.setHours(options.firstHour); - body.scrollTop(timePosition(d0, scrollDate) + 1); // +1 for the border - + resetScroll(); 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() { bodyTable.width(''); diff --git a/src/css/main.css b/src/css/main.css index cfa737c..0460f9c 100755 --- a/src/css/main.css +++ b/src/css/main.css @@ -244,10 +244,11 @@ table.fc-header { /* Use the 'className' CalEvent property and the following * example CSS to change event color on a per-event basis: * - * .my-event-class, - * .my-event-class a { - * border-color: black; + * .myclass, + * .fc-agenda .myclass .fc-event-time, + * .myclass a { * background-color: black; + * border-color: black; * color: red; * } */ diff --git a/src/main.js b/src/main.js index b94abb3..35d19f3 100755 --- a/src/main.js +++ b/src/main.js @@ -12,9 +12,9 @@ var defaults = { defaultView: 'month', aspectRatio: 1.35, header: { - left: 'prev,next today', - center: 'title', - right: 'month,agendaWeek,agendaDay' + left: 'title', + center: '', + right: 'today prev,next' }, // editing @@ -54,8 +54,8 @@ var defaults = { buttonText: { prev: ' ◄ ', next: ' ► ', - prevYear: 'prev year', - nextYear: 'next year', + prevYear: ' << ', + nextYear: ' >> ', today: 'today', month: 'month', week: 'week', @@ -74,13 +74,15 @@ var defaults = { // right-to-left defaults var rtlDefaults = { header: { - left: 'agendaDay,agendaWeek,month', - center: 'title', - right: 'today next,prev' + left: 'next,prev today', + center: '', + right: 'title' }, buttonText: { prev: ' ► ', - next: ' ◄ ' + next: ' ◄ ', + prevYear: ' >> ', + nextYear: ' << ' } }; @@ -180,6 +182,9 @@ $.fn.fullCalendar = function(options) { } if (viewInstances[v]) { (view = viewInstances[v]).element.show(); + if (view.shown) { + view.shown(); + } }else{ view = viewInstances[v] = $.fullCalendar.views[v]( $("
").appendTo(content), @@ -569,7 +574,10 @@ $.fn.fullCalendar = function(options) { buttonClick = publicMethods[buttonName]; } else if (views[buttonName]) { - buttonClick = function() { changeView(buttonName) }; + buttonClick = function() { + button.removeClass(tm + '-state-hover'); + changeView(buttonName) + }; } if (buttonClick) { if (prevButton) { @@ -594,17 +602,24 @@ $.fn.fullCalendar = function(options) { } }) .mousedown(function() { - button.addClass(tm + '-state-down'); + button + .not('.' + tm + '-state-active') + .not('.' + tm + '-state-disabled') + .addClass(tm + '-state-down'); }) .mouseup(function() { button.removeClass(tm + '-state-down'); }) .hover( function() { - button.addClass(tm + '-state-hover'); + button + .not('.' + tm + '-state-active') + .not('.' + tm + '-state-disabled') + .addClass(tm + '-state-hover'); }, function() { - button.removeClass(tm + '-state-hover') + button + .removeClass(tm + '-state-hover') .removeClass(tm + '-state-down'); } ) diff --git a/tests/basic.html b/tests/default.html similarity index 52% rename from tests/basic.html rename to tests/default.html index 2502c87..9599873 100755 --- a/tests/basic.html +++ b/tests/default.html @@ -7,56 +7,62 @@ $(document).ready(function() { - var d = new Date(); - var y = d.getFullYear(); - var m = d.getMonth(); + 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,basicWeek,agendaDay,basicDay' }, editable: true, events: [ { - id: 1, - title: "Long Event", - start: new Date(y, m, 6, 14, 0), - end: new Date(y, m, 11) - //allDay: false + title: 'All Day Event', + start: new Date(y, m, 1) }, { - id: 2, - title: "Repeating Event111", - start: new Date(y, m, 8), - allDay: true + title: 'Long Event', + start: new Date(y, m, d-5), + end: new Date(y, m, d-2) }, { - id: 2, - title: "Repeating Event222", - start: new Date(y, m, 9, 5, 0), + id: 999, + title: 'Repeating Event', + start: new Date(y, m, d-3, 16, 0), allDay: false }, { - id: 345, - title: "Hey Hey", - start: new Date(y, m, 9, 4, 0), - allDay: false, - className: 'adam shaw' - }, - { - id: 3, - title: "Meeting", - start: new Date(y, m, 20, 9, 0), + id: 999, + title: 'Repeating Event', + start: new Date(y, m, d+4, 16, 0), allDay: false }, { - id: 4, - title: "Click for Facebook", - start: new Date(y, m, 27, 16), + title: 'Meeting', + start: new Date(y, m, d, 10, 30), + 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), - url: "http://facebook.com/", - allDay: false + url: 'http://google.com/' } ] }); diff --git a/tests/gcal.html b/tests/gcal.html index f968fc0..1a1dad2 100755 --- a/tests/gcal.html +++ b/tests/gcal.html @@ -4,13 +4,16 @@