Requested features from customer:

• localization of tab descriptions;
• tab change event;
• set differente colors in events;
• Add events directly inside component;
• option to make invisibile tabs;
• local timezone settings, in ex. 0-24 Hours format;

r49039: initial commit

Attached test app.

The test app allows the user to configure the data and the behaviour of an event calendar, using CLNDR.js (http://kylestetz.github.io/CLNDR/).

At the moment the component only has a temporary 'configuration' attribute, which is used for everything. Eventually, this attribute will be replaced by more specific and user-friendly attributes. The Renderer class will only be concerned with producing a correct JSON object, translating all the configuration from JSF attributes to the CLNDR.js settings format. It will also render the template used to produce the calendar. The actual elements to build a calendar (e.g. navigating through all the months and days in a year) are created dynamically in the client by CLNDR.js and the template engine Underscore.js. There also exists the possibility of not using the template engine and use custom rendering, if we want to have more flexibility. At the moment, a day that has an event will simply be underlined and the events are listed to the right, but it will be possible to render these events in different ways, inside the day square itself, etc.

Starting with a commit made for ICE-9482 in ICEfaces 4 trunk continuous Jenkins Build 2036, the showcase demo is not displayed properly. See attached screen shot.

Another regression has been found starting with commits for ICE-9482. All showcase demos using sliders are failing due to slider value after dragging not being updated to the value expected. All values are off by about 8, although start and end values are correct. The tests would appear to pass manually but are failing with our selenium test apps which expect precise values.

r49102: removing contents of schedule.css as they were interfering with the showcase application; these stylings were only temporary, for the purposes of an initial proof of concept, and will be replaced by Themeroller classes

Please re-test the slider issues as well, as I haven't been able to reproduce them manually, and they may have been caused only by CSS

Tested with ICEfaces 4 trunk r49102. The styling issues and slider issue are no longer found.

The JSF API will not map directly to the JS API, except in a few cases. The JS API is very low level. We will use those low level JS functions to provide more JSF-like features.

r49163: added ScheduleEvent class to model events; added support for value attribute and removed temporary configuration attribute; simplified CSS and added Themeroller support; modified template for Themeroller support, for showing events in day squares, for highlighting today's day square, and other improvements

Attaching updated POC application.

r49208: added support for showing a dialog with event details when clicking on an event tag; added support to use a custom template; refactored the way templates are handled; added various attributes; modified ScheduleEvent model; modified CSS definitions to separate template stylings; made other visual improvements

Updated POC app to show new changes.

r49300: restructured the CSS scheme to avoid using float styling; added 'sideBar' attribute to specify the location of the side bar or to hide it; added 'displayEventDetails' attribute to specify whether to show the event details in the sidebar, in a popup, in a tooltip or to disable this functionality

r49317: transformed ace:schedule into a UIData descendant; added support for lazy loading mode

Updated app with lazy-loading demo. Load http://localhost:8080/AceSchedule/lazySchedule.jsf to see it.

The app generates random events for each month of 2016, which are loaded on a month-per-month basis, as the user navigates the months in the calendar, as opposed to loading all events in the year at the same time and every time the component is updated dynamically.

r49325: added built-in support for adding, editing and deleting events; made various CSS scheme changes

FYI I tried the latest demo build attached above from Sept. 27th. Couple issues:

• Saving edits didn't seem to do anything, including not closing the edit dialog.
• If you navigate to a month with no events the calendar cols collapse and misalign with the top/bottom.

Yes, I'm aware of that CSS issue. The component will undergo more CSS changes now that I'm adding support for Week and Day views, So that will get fixed once there's more certainty about how the final CSS scheme will be.

When the app was updated last time it was only to show the new lazy loading mode. The edit controls hadn't been finished yet. They were committed yesterday, so just update the ace jar to see the Add, Edit and Delete controls working.

r49346: added support for a week view; made various internal changes to the component code to support different view modes

Updated demo app to show week view in lazy mode.

r49349: added support for the day view to the lazy and non-lazy modes and finished support for the week view in the non-lazy mode; moved from using a template approach for rendering the component in the client to using rendering functions in the client; did some more refactoring

Updated demo app to dynamically change between month, week and day views. Increased the number of random events in the lazy mode to appreciate these views better. There are still some rough edges in usability and off-by-one errors, but the functionality is now working.

Updated demo app to show the scrollable body in the week and day views.

Art, the latest demo .war from yesterday is failing with:

Error Parsing /welcomeICEfaces.xhtml: Error Traced[line: 33] The value of attribute "scrollHeight" associated with an element type "ace:schedule" must not contain the '<' character.

Sorry, missing double quotes on the initial page. App is updated now. Anyway, I recommend loading http://localhost:8080/AceSchedule/lazySchedule.jsf because it has more events, so it's easier to appreciate the new features.

r49440: added ace:ajax support to ace:schedule and 8 different ajax event types; added styleClass attribute to individual events; made the events in the month view only use one line of text; now the sidebar displays only the events of the week in the week view and the events of the day in the day view; added highlight CSS class to today's day in week view; changed the next and previous buttons to use FontAwesome arrows; other fixes and refactoring

Updated demo app.
http://localhost:8080/AceSchedule/lazySchedule.jsf
http://localhost:8080/AceSchedule/ajaxExample.jsf

Tested attached AceSchedule.war using tomcat 8, FF 47, Chrome 53, IE 11.
When using the /lazySchedule.jsf and the /welcomeICEfaces.jsf apps there is a console error when attempting to add, modify and save, or delete an event.

TypeError: behaviors is undefined
http://localhost:8080/AceSchedule/javax.faces.resource/schedule/schedule.js.jsf?ln=icefaces.ace&v=4_2_0_161012
Line 241

When using the /ajaxExample.jsf there is a String index out of range -1 page and server error when attempting to add a new event.

09-Nov-2016 15:46:05.465 SEVERE [http-apr-8080-exec-7] com.sun.faces.context.Aja
xExceptionHandlerImpl.handlePartialResponseError java.lang.StringIndexOutOfBound
sException: String index out of range: -1
        at java.lang.String.substring(String.java:1911)
        at org.icefaces.ace.component.schedule.ScheduleRenderer.convertDateTimeT
oServerFormat(ScheduleRenderer.java:253)
        at org.icefaces.ace.component.schedule.ScheduleRenderer.buildScheduleEve
ntFromRequest(ScheduleRenderer.java:282)
        at org.icefaces.ace.component.schedule.ScheduleRenderer.decodeAdd(Schedu
leRenderer.java:56)
        at org.icefaces.ace.component.schedule.ScheduleRenderer.decode(ScheduleR
enderer.java:46)
        at javax.faces.component.UIComponentBase.decode(UIComponentBase.java:832
)
        at javax.faces.component.UIData.processDecodes(UIData.java:1177)
        at com.sun.faces.context.PartialViewContextImpl$PhaseAwareVisitCallback.
visit(PartialViewContextImpl.java:573)
        at com.sun.faces.component.visit.PartialVisitContext.invokeVisitCallback
(PartialVisitContext.java:183)
        at javax.faces.component.UIData.visitTree(UIData.java:1426)
        at javax.faces.component.UIComponent.visitTree(UIComponent.java:1700)
        at javax.faces.component.UIForm.visitTree(UIForm.java:371)
        at javax.faces.component.UIComponent.visitTree(UIComponent.java:1700)
        at javax.faces.component.UIComponent.visitTree(UIComponent.java:1700)
        at com.sun.faces.context.PartialViewContextImpl.processComponents(Partia
lViewContextImpl.java:403)
        at com.sun.faces.context.PartialViewContextImpl.processPartial(PartialVi
ewContextImpl.java:266)
        at javax.faces.context.PartialViewContextWrapper.processPartial(PartialV
iewContextWrapper.java:219)
        at org.icefaces.impl.context.DOMPartialViewContext.processPartial(DOMPar
tialViewContext.java:324)
        at javax.faces.context.PartialViewContextWrapper.processPartial(PartialV
iewContextWrapper.java:219)
        at javax.faces.component.UIViewRoot.processDecodes(UIViewRoot.java:927)
        at com.sun.faces.lifecycle.ApplyRequestValuesPhase.execute(ApplyRequestV
aluesPhase.java:78)
        at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
        at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:198)

        at javax.faces.webapp.FacesServlet.service(FacesServlet.java:658)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(Appl
icationFilterChain.java:292)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationF
ilterChain.java:207)
        at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52
)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(Appl
icationFilterChain.java:240)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationF
ilterChain.java:207)
        at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperV
alve.java:212)
        at org.apache.catalina.core.StandardContextValve.invoke(StandardContextV
alve.java:106)
        at org.apache.catalina.authenticator.AuthenticatorBase.invoke(Authentica
torBase.java:502)
        at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.j
ava:141)
        at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.j
ava:79)
        at org.apache.catalina.valves.AbstractAccessLogValve.invoke(AbstractAcce
ssLogValve.java:616)
        at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineVal
ve.java:88)
        at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.jav
a:522)
        at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp
11Processor.java:1095)
        at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(
AbstractProtocol.java:672)
        at org.apache.tomcat.util.net.AprEndpoint$SocketProcessor.doRun(AprEndpo
int.java:2500)
        at org.apache.tomcat.util.net.AprEndpoint$SocketProcessor.run(AprEndpoin
t.java:2489)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.
java:1145)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor
.java:615)
        at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskTh
read.java:61)
        at java.lang.Thread.run(Thread.java:745)

r49546: added time zone support; fixed errors when triggering certain events when there is no corresponding ajax behaviour

Tested attached AceSchedule.war using icefaces libs from r49546. I am now able to modify/save/delete events successfully.
I am still not able to add an event in any of the test apps. I get the class java.lang.StringIndexOutOfBoundsException as seen in my previous comment.
I also get the exception when modifying an event and entering an incorrect value such as "x" into a date or time field.

Some new review notes based on the code from svn rvn# 49562:

• In Month view, clicking on empty whitespace, or day of month header region should not open a new event dialog, but used to set the date cursor that will be used if the Week or Day view is selected. In Week view, same thing.
• Double click in whitespace should open the Add event dialog (not single click).
• Weekly view:
  • Later events should clip earlier ones in the schedule, so you can always see the top/start of the later event (see attached pic). Ideally, the overlapping events would indent slightly (be less wide) so the total duration of the previous event can be seen as well.
• Events list:
  • Sidebar should be user collapsible/expandable and resizable.
  • Styling for sidebar should highlight every other event (like dataTable can).
  • Future Enh:
    • Event listing in sidebar should be user expandable to show/optionally edit details directly in sidebar listing.
• Attribute to define event create/modify stepping for time entry (1 min, 5 min, 15 min, 30 min, etc.)
• Attribute to define default event end-time (start time + 30 mins, + 60 mins, etc.)

r49573: converted the sidebar into a expandable/collapsible panel, in order to only display the content of the event list or of the event details at a time

Review of the to-do list posted on October 18.

These are the items that have already been completed:

+ Add listeners in time cells to add events at that time that day.
+ Add the date to the sidebar events listing, only the day.
+ Make the month navigation buttons look more like buttons.
+ Add the id and arbitrary data to the rendered ScheduleEvent's in the client. [This idea was dismissed, instead I added the styleClass property to individual events]
+ Add ajax event/hook for when clicking on an event (for custom dialogs, show demo on how to do this).
+ Add other ajax events ass appropriate.
+ Completely remove templating functionality.
+ Make z-index event divs (week and day views) only use one line of text, clipped.
+ Add timezone support.
+ Transform the sidebar into a basic jQuery UI accordion panel. [Ended up not using jQuery UI, just custom logic and listeners]
? Change the contents of the sidebar in week and day views?

These are the items that should be completed before the 4.2 release:

+ Create ajax event object with the day, event id, etc.
+ Modify lazy loading method to take start and end dates, year, month, day.
+ Validate that the end date must be greater than the start date.
+ Add validation for all the inputs in the event details dialog.
+ Add exception handling in the server side code for cases when inputs aren't complete or valid and for other date-related issues.
+ In every add, remove, edit operation also send to the server the current year, month, day, etc. to return to that place when the response comes back (and possibly causes the component to re-render in the client).
+ Add component resources (schedule.js, etc.) to the compress target in build.xml.
+ Support rendering events that span several days.
+ Implement startDate attribute (Only apply it if there's no previous state indicating what is the current month, etc.).

These are the items that can be done for the next EE release:

+ Refactor days of the month, leap year code.
+ Add localization support.
+ Add built-in Month-Week-Day view controls.
+ Write an unload() function and handling.
+ Improve performance of lookup of event objects in the client, taking into account week and day views.

? What about time formats in the event boxes? Add an attribute to change them?
? Add reset button in edit controls ?
? Adding mechanism to sort events by chronological order in the scheduler value, so that they are rendered in order to the client.
? Maybe add option to gray out certain time slots or to avoid displaying them altogether?
? Adding option to start calendar on monday or sunday?
? Warning if there are overlapping events?
? Add an attribute to colour the time rows in alternative colours?
? Remove dependency on CLNDR?

Updated demo app.

r49577: added AjaxBehaviorEvent subclasses for all supported ajax events, containing useful event data for the event listeners

r49582: added ability to horizontally resize the sidebar and the window, while keepinf the event divs in place; added highlighting of every other event in the events list on the sidebar; added listeners to events on the sidebar to also trigger the event details popup or to display the event details panel in the sidebar; fixed off-by-one error in the week view date range in the title

Updated demo app

r49589: modified the LazyScheduleEventList class to take a start date and an end date, rather than only taking year and month values; fixed issues in week view related to not showing events for certain days (first day of the week, last day of the week, weeks that spans two different months); fixed day header repeating the day number for two week days of the day when DST changes come into effect; fixes and refactoring for correctness concerning the accuracy of dates and UTC; made the text bold for the main title and the titles of the events list and the event details

r49590: removed horizontal padding in headers; removed call to rebuild data model during decoding, since it's not necessary; other minor adjustments

r49591: added ace:schedule overview demo to showcase app

Also updated demo app with changes to produce a different list of random events per user and not just having a single static set. Modified the bean to produce events for the current, previous and next year.

ICEfaces4 trunk r49614 - showcase > ace:schedule testing:

• Wiki Documentation and tlddoc pages are not accessible from showcase.

• a StringIndexOutOfBoundsException server error and popup occur if trying to add a new event, without completing the End Time field:
  Dec 01, 2016 11:37:04 AM com.sun.faces.context.PartialViewContextImpl processPartial
  INFO: java.lang.StringIndexOutOfBoundsException: String index out of range: -1
  java.lang.StringIndexOutOfBoundsException: String index out of range: -1
  at java.lang.String.substring(String.java:1954)
  at org.icefaces.ace.component.schedule.ScheduleUtils.convertDateTimeToServerFormat(ScheduleUtils.java:94)
  at org.icefaces.ace.component.schedule.ScheduleUtils.buildScheduleEventFromRequest(ScheduleUtils.java:128)
  at org.icefaces.ace.component.schedule.ScheduleRenderer.decodeAdd(ScheduleRenderer.java:56)
  at org.icefaces.ace.component.schedule.ScheduleRenderer.decode(ScheduleRenderer.java:46)
  at javax.faces.component.UIComponentBase.decode(UIComponentBase.java:832)
  at javax.faces.component.UIData.processDecodes(UIData.java:1177)
  at com.sun.faces.context.PartialViewContextImpl$PhaseAwareVisitCallback.visit(PartialViewContextImpl.java:573)
  at com.sun.faces.component.visit.PartialVisitContext.invokeVisitCallback(PartialVisitContext.java:183)
  at javax.faces.component.UIData.visitTree(UIData.java:1426)
  at javax.faces.component.UIComponent.visitTree(UIComponent.java:1700)
  at javax.faces.component.UIForm.visitTree(UIForm.java:371)
  at javax.faces.component.UIComponent.visitTree(UIComponent.java:1700)
  at javax.faces.component.UIComponent.visitTree(UIComponent.java:1700)
  ...........

Some additional showcase review notes:

• Event Add/Edit dialog, button(s) not using theme styling, buttons should be on right bottom corner, not left.
• Demo needs a section of txt that gives at least a basic description of the components capabilities.
• Demo configs need to nicely styled with white space between them.
• Make it so single click inside a blank schedule section sets a cursor that is used when the user switches from Month/Week/Day view. Only a Double Click should open the new task dialog. The idea is a user can single click, say, on a day inside the month view, then switch to the day view and it will view that date. Another example, if on week view, user single click on open area in a given day, when switching to day view it would view that specific date that the user had clicked on. This is how any calendar app that I've used works.
• Src code view in showcase, wrap the ace:schedule tag so it is visible without horiz. scrolling
• Add new Wiki topic page for ace:schedule (since 4.2) and link to the docs in showcase demo.

r49618: added defaultDuration attribute to set the default duration (in minutes) of events, if the user doesn't specify an end date and/or end time; added code to use the current date as the default start date if it was not specified by the user and the next hour as the start time if it was not specified by the user as well

Tested with ICEfaces 4 trunk r49618, FF 50/47, Chrome 53, IE 11

• When using the app in IE 11, 10, 9, 8 and FF there are no date or time pickers available when selecting a date or time. Time and date must be typed in manually
• There seems to be no validation, an end date can be set to occur before a start date. When using browsers with no date/time pickers, invalid input such as xxx can be entered into the date and time fields which result in a class.java.lang.StringIndexOutOfBounds Exception.
• When hovering over a calendar date that you want to edit or add it would be nice if there were some sort of highlighting or styling (different from the current date) applied.

r49622: moved buttons in the Event Details dialog to the lower right corner and added theme classes; changed the date and time inputs to work across browsers by using the basic jQuery UI Datepicker instead of the native date input and by using custom select menus to specify the minutes instead of the native time picker

r49634: added functionality for selecting individual days in the month and week views to display such day when changing the view to week view or day view, respectively; added currentDate attribute to specify a date to show in the schedule; did major refactoring to consolidate the logic to handle the lazy and non-lazy modes in the client; changed the styling of events to the default styling, instead of the hover styling, to avoid confusion with the new selection functionality.

r49636: added logic to be able to deselect days and to override the highlight (today's) styling with the active and hover stylings

r49637: added ability to set current date programmatically via the currentDate attribute

r49642: fixed misalignment issue with the cancel deletion button in the event details dialog on Edge browser; fixed issue with displaying the previous month when adding a new event in day view; replace dayClick and timeClick events for dblclick ajax events dayDblclick and timeDblclick; added CSS padding:0 to td elements in the grid; added year in the main header in the week view; add month name in week view sidebar events list, for weeks that encompass two months; added code to close event details popup on save, in cases where there are no changes; added component javascript resources to the compress target in build.xml; added copyright notice to Javascript resource

r49647: expanded the section of text that gives general description of the components capabilities; replaced the configuration controls for ace components, so they get displayed with the theme styling, and also added more whitespace and better alignment; edited the ace:schedule tag so it is visible without horizontal scrolling in the source code view

This is really coming together!

Review notes:

1. When viewing the Week or Day view, if multiple events overlap, there is currently no easy way to see how long the earlier event lasts as it is completely obscured by the later event(s). It would be good if the later overlapping events where slightly indented (and narrower) so that you could still see when the earlier event ends at a glance. See attached "overlap.png" pic.
2. When a day has been selected by the user via a mouse click, switching to day view works as as expected. However, subsequently switching to a week or month view, then back to the day view loses the previously selected date, and defaults to the first day of the week that was viewed instead. It should remember the last user date selected. Once a date/day has been selected by the user, it should remain selected in all views unless the user changes it. Note that if the user navigates to view a new day, week, or month via the header arrow buttons, that also should change the selected date to the first date in the new view (but not if they simply view the week or month that the selected date already falls inside).
3. When the Add/Edit popup dialog is open, pressing ESC key should cancel it.
4. The showcase demo should default new events to be 1 hour in duration, so the user doesn't always have to select the end time.
5. Entering or editing an event to span across multiple dates fails.
6. It's not clear what the 2 different colours (yellow and grey) used for the events represents?
7. The alternate-row highlighting on the sidebar is a little too subtle.
8. Would be nice if the "sideBar" and "displayEventDetails" attributes could also be dynamically configured in the demo.

r49660: revised the TLD documentation and added ajax event descriptions

Created the Wiki page for the component: http://www.icesoft.org/wiki/display/ICE/Schedule

Note that the TLD documentation page won't be ready until after the release, when it's published on the icesoft.org website.

At this point all of the tasks that had been planned for the beta release have been completed. The following items in the to-do lists I've posted above and some new ones are still pending for the final release, besides the new review notes above:

+ Validate that the end date must be greater than the start date.
+ Add validation for all the inputs in the event details dialog.
+ Add exception handling in the server side code for cases when inputs aren't complete or valid and for other date-related issues.
+ Support rendering events that span several days.
+ support for all-day events
+ escape HTML characters in add/edit dialogs
+ add resizableSideBar attribute
+ add unload function
+ IE8 issue
? remove dependency on CLNDR.js and moment.js

As for the review notes number 7 above, that's just the default theme's highlight styling. I can anticipate that some themes have colour schemes that might not be the best for this component. However, all those stylings can be easily overridden with custom CSS rules. The whole CSS scheme for this component was designed to make these changes easy.

r49663: added controls to configure the sideBar and displayEventDetails attributes; modified the row highlight colour in the side bar events list; added explanation regarding custom styling and pointed out that meeting events are styled in a different way

This commit addresses points 6, 7, and 8 above.

r49666: removed rounded corners from events in week and day views and improved positioning to cover the entire time cell(s) the event spans

r49667: added ability to close the event details popup dialog when pressing the Esc key

(Point 3 of review notes above.)

r496668: modified behaviour of date selection functionality to persist the selection when changing the view mode, only clearing it when pressing the next/previous buttons

(Point 2 of review notes above.)

r49670: added logic to apply the default duration to new events in the Event Details dialog when the time hasn't been set yet by the user.

This is a change at the component level. Note that the default duration is 60 minutes by default. Previously, the default duration was added in the server if the user didn't specify an end time.

(Point 4 of review notes above.)

r496668: modified behaviour of date selection functionality to persist the selection when changing the view mode, only clearing it when pressing the next/previous buttons
(Point 2 of review notes above.)

This is working well with the exception of:

• When switching back to a Month view, the month never updates to view the month that the last selected date is in. If you move the date out a couple of months, then the month view updates to a month earlier then the current month. The other two views work as expected.
• Any user interaction with a specific date should update the internal date "cursor". Right now, the user must click on a whitespace area of a date to set the cursor, but clicking on, or editing an existing task should also set the "cursor" to that date as well.

• 1212-1: Noticed that when using the Tooltip mode for task details there doesn't seem to be a way to edit the tasks? Is this expected?
• 1212-2: When editing a task using the Sidebar mode, saving the edited task moves it to 12:00pm regardless of what the entered values are.
• 1212-3: After adding or editing any task, the view scrolls to the top of the calendar region, if anything, it should scroll to show the edited/added task in the viewport.
• 1212-4: I don't think we need to highlight the date when a user clicks on a date to "select it". I think the selection can be implied and not represented visually. This is also more consistent when they use the arrow keys to navigate to a new week / day / month which also changes the currently selected date (without highlighting it).

r49678: fixed issue with not submitting times when editing/adding events in the sidebar

(fixes 1212-2)

1212-1: yes, this is expected, the tooltip just works as a regular tooltip, quickly appearing and disappearing, showing some additional information, without much user interaction. Perhaps, we could create another attribute to enable or disable the tooltip, so that adding/editing events is still possible with the popup or the sidebar.

r49679: added ability to be able to select the "cursor" date by clicking on an existing event as well; removed active styling for selected dates; removed rule of clearing the selected date when performing a navigation event

This addresses the selection functionality behaviour mentioned in 1212-4 and the previous comment. The selected date is no longer styled, however the hover styling is still there, as suggested by Liana. Dates can now also be selected by clicking on an existing event on that day, not just when clicking on whitespace.

r49680: reverted the removal of the rule for clearing the selected date when performing a navigation event, after clarification

Regarding this comment:

When switching back to a Month view, the month never updates to view the month that the last selected date is in. If you move the date out a couple of months, then the month view updates to a month earlier then the current month. The other two views work as expected.

I haven't reproduced this issue. Perhaps what you saw was this: if you're in the week view, and you navigate backward or forward and you currently are viewing a week that encompasses two months, when switching to the month view, the month that will be displayed will be the month of the first day of the week. For example, if you're viewing the week of November 27 to December 3, when you switch to month view, you will see the month of November being displayed, and if you're viewing the week of December 4 to December 10, when switching to month view, you will see December. Is this the behaviour you mean Ken?

r49682: added code to maintain the scroll position in the week and day views after adding, editing or deleting an event (when scrollable=true) (1212-3)

Yes, there's a brief blinking, but there's no other way around it, as the whole component is re-rendered after a change in the events.

Review Notes:

• 1213-1: The Month view is still not reflecting the selected date properly. If you go to the Day view, move ahead using the arrows into the middle of the next month, go to the month view, it stays on the old month. Same if you use the Week view to move into a future or past month.
• 1213-2: Re: removing the styling for the user "selected" date. After reviewing this with Carmen I think that there may be room for a more subtle styling to indicate the currently "selected" date. My suggestion is that on the Week view, the top header for the date column is styled to reflect the currently selected date, and on the Month view, the top row of the date box including the date digits are styled to reflect the selected date. This styling by default should be subtle and not overly pronounced. The Day view does not require styling as the selected date is obviously the one being viewed currently. Also note that there should always be a selected date. If the selected date is changed via navigating with the arrow buttons, it should also be indicated, just as if the user had clicked on white space on a date, etc.

r49689: modified styling of selected dates to simply underline the day digits in month view and the day header in week view; added logic to always have a selected/cursor date

This commit addresses 1213-2.

As for 1213-1, I still haven't been able to reproduce that issue, before and after this fix. Perhaps with this fix it won't be occurring anymore. If it still occurs, please list specific, concrete steps to reproduce the issue.

1214-1: The component value needs to default to an internal list to hold the event objects when the app developer didn't bind a Collection to the value of the component.
1214-2: It would be more useful to separate the tooltip feature from the 'displayEventDetails' attribute, creating a new attribute to enable or disable the tooltip, in order to be able to show the tooltip while also being able to edit the event details in the popup or in the sidebar, since the tooltip doesn't display editing controls.

r49696: separated the 'displayEventDetails' attribute into 'eventDetails' and 'displayTooltip'
r49697: updated showcase demo
(1214-2)

Testing Notes: The 'displayEventDetails' was separated into 'eventDetails' to specify a popup or sidebar or to disable the feature, and into 'displayTooltip' to enable or disable the use of the tooltip (defaults to disabled). The demo has been updated. If there was a test app already using 'displayEventDetails' please update.

showcase ace:schedule demo, ICEfaces 4 trunk r49692.
Scenario - when first loading the demo the month view with December 2016 is displayed.
Firefox 47/50 - When advancing the month view calendar via the right arrow, the next month to display is a blank December 2016 calendar, followed by a blank January 2017 calendar and so on. No events can be added to these months.
IE 11 - When advancing the month view calendar via the right arrow the calendar is removed from the page. Console error seen in IE 11:
SCRIPT5007: Unable to get property 'date' of undefined or null reference
File: showcase.jsf, Line: 340, Column: 7
These issues are not present with Chrome or MS Edge.

r 49697: existing events can be only edited in 'Side Bar' mode.
When using 'Pop-up' event details mode, trying to edit/save an existing event moves the event at Start Time=current system time, regardless of what fields have been edited; trying to edit/save again the event is not permitted, the pop-up dialog won't close.

r49700: removed dependency on clndr.js and moment.js and removed those resources from the library; fixed issues with previous name changes in the API

This commit fixes the issues on FF and IE, as well as the issue in the comment above.

r49701: fixed issue with previous commit, not rendering the dates correctly in month view, causing server exceptions when changing the view in some cases and not displaying certain events

r49705: fixed issues with javascript errors when resizing the window and improved the window resize listener to avoid registering it multiple times; fixed issue with the title not updating in day view when the day has no events; added improvements to the user event details interface that were missing in the sidebar mode; fixed tooltip positioning; modified layout of buttons in the sidebar event details dialog to avoid displaying misaligned buttons due to not having enough width; added styling to prevent text selection when double clicking on a day in month view to add a new event; refactored methods to set navigation and resize listeners

Regarding the second point above, the scroll height can be edited. You just have to make sure that scrolling is enabled first. Note that scrolling is only applicable to the Week and Day views.

r49711: improvement to show the horizontal scroll bar of the sidebar event details section right below the buttons instead of at the bottom of the sidebar

Regarding the point 'a' in the comment above, If the event details inputs in the sidebar seem cropped is simply because there's not enough space on the schowcase demo to display them in full. If the schedule component is able to occupy the entire width of the viewport, then all inputs are fully visible on the sidebar (assuming an HD resolution or better). For the same reasons, the sidebar itself is resizable in order to allow the user view the entire content. Now, with this fix, the horizontal scrollbar will appear (if necessary) right below the buttons in the sidebar event details section to make this lack of space more intuitive if there's one. As for the Save and Delete buttons in the sidebar, now they will be rendered vertically one after the other, instead of horizontally as in the popup dialog. This is due to the same possible lack of space scenarios that caused the yes-no buttons of the Delete operation appear misaligned (if there wasn't enough width).

r49962: added indentation for overlapping events; added code to sort the events in chronological order before sending them to the client so that later events are rendered on top of earlier events if they overlap

Notes:

• Events that span multiple days aren't yet supported so, some events might show an indentation even if there doesn't seem to be an earlier event overlapping it.
• This logic still needs to be integrated with the resizing functionality, at the moment, the indentations are lost when resizing.
• A good future improvement would be making the event borders darker, so that their durations are more easily appreciated when events are overlapping. Since this is really theme-dependent, some other kind of cue could be used instead.

The test app attached to this JIRA was updated to generate more events and thus more easily appreciate the indentations for overlapping events. Navigate to http://localhost:8080/AceSchedule/lazySchedule.jsf

r49994: integrated indentation for overlapping events with resizing functionality

r50008: added support for rendering events that span multiple days, in month, week, and day views

Review notes for svn # 50008:

Event Information

• Currently, only the event start time and the event title are rendered on all views. The following rules should be followed for the Weekly and Day views.
  • If an event Is 1/2 hour in duration, then only the event name and location are rendered on a single line.
  • If an event is 1 hour in duration (enough room for 2 lines of text), then the start time is rendered alone on the first line and the event name and location are rendered on the second line.
  • If an event > 1 hour in duration (room for 3+ lines of text), then the start time is rendered on the first line, the event name on the second line, and the location on the third line.
  • The event name should be bolded in all cases above.

Time

• Support for 12hr times vs the current 24hr times (military time) should be added.
• When rendering times for 12hr times the leading zeros should not be rendered ("4:30" vs "04:30").

Styling

• Color! It's too grey right now. Can we change the default color for events to something nice, like blue or green?
• Why are some events orange, when the rest are grey?
• The borders are not dark enough on the headers or events.
• For Day or Weekly view events, we can use a darker left border of whatever color is being used to highlight the start/end times when overlapped. See the iCalBorders.png screenshot.
• iCal also makes each overlapped layer a little darker as well, not sure if this is feasible though.

r50352: modified contents of event divs according to their durations; added twelveHourClock attribute to display times in a 12-hour format

Regarding the Styling points...

• Color! It's too grey right now. Can we change the default color for events to something nice, like blue or green?
  -> The event divs are simply using the ui-state-default CSS class from Themeroller. The colour depends on the theme. That's how it looks in the Sam theme. Because we use the hover and active classes as well, this is what made the most sense from a functional point of view. If the Sam theme is not pleasant enough, then we may consider adding more CSS styling in the ace:schedule component specifically for the Sam theme. The way things look with the other themes will depend on the themes themselves.

• Why are some events orange, when the rest are grey?
  -> Some events are orange to showcase the fact that events can have their own style classes. In the demos, the events that are generated as meetings also take a style class that makes them look orange. Something we could do would be to add another category of events in the demos, let's say Videoconferences, and we style them in a different colour, in order to make this point clear.

• The borders are not dark enough on the headers or events.
  -> Again, this depends on the theme. We may want to modify the default Sam theme.

• For Day or Weekly view events, we can use a darker left border of whatever color is being used to highlight the start/end times when overlapped. See the iCalBorders.png screenshot.
  -> Yes, we could add a left border. The colour would depend on the theme as well.

• iCal also makes each overlapped layer a little darker as well, not sure if this is feasible though.
  -> This wouldn't be very feasible for all themes, but we could add something specifically for the Sam theme.

So, in general the options we have to improve the looks of the component would be:
A) Add additional styling specifically for the Sam theme.
B) Forget about Themeroller and remove support for it and come up with an original styling. The component wouldn't change according to the theme, but users would be able to easily modify parts of this original styling.
C) Keep Themeroller as is and add a set of styling rules that will be applied to all themes but that could be easily overridden as well.

r50383: added support for all-day events; made other minor styling improvements and adjustments

Updated test app to showcase and test all-day events.

The added support for all-day events seems to be the last addition in terms of features. What's left to do is making the component more robust, fixing minor issues and rough edges and making other usage improvements.

This is an updated to-do list:
+ Validate that the end date must be greater than the start date.
+ Add validation for all the inputs in the event details dialog.
+ Add exception handling in the server side code for cases when inputs aren't complete or valid and for other date-related issues.
+ escape HTML characters in add/edit dialogs
+ add resizableSideBar attribute
+ add unload function
+ IE8 issues

Currently, I'm making some changes at the server and client levels to include events that don't start in the current period (month, week, day) but that end in it. Previously, this kind of events were overlooked, but I realized of this fact while working on the support for all-day events. This will be committed soon, separately from the all-day commits in order to track possible regressions.

The visual improvements to the rendered events in the month, week, and day views will consist of an original styling that will be applied to all themes (the CSS rules will have more specificity to override theme stylings). These stylings will be easily configurable if the app developer prefers to simply use the theme stylings.

r50389: added support for rendering events that don't start in the current period but that end in it

Updated test app with modifications to the lazy load() method to include events that don't start in the current period but that end in it.

r50524: added enhanced styling feature to use a set of styling rules for optimal viewing of the event information, which remains uniform across different themes and can be easily disabled, enabled and modified

This feature works via the 'applyEnhancedStyling' attribute, and the way it works, as described in the Meta class/TLD documentation is this:

Enabling applies an original styling to the day and time girds and to the events rendered on them in the month, week, and day views. This original styling makes it easier to read the information contained in the schedule by styling the contents in additional ways not covered by Themeroller themes. This styling is always the same, regardless of the theme being applied. Other parts of the schedule such as the title, sidebar and event details dialog are not affected by this styling. Setting this attribute to false prevents this original styling from being applied, leaving only the theme styling.

The default value is true.

Updated demo app to show the new enhanced styling.

The default colour for events is blue. The "meeting" events look yellow, and "public" events look green, both use custom style classes.

r50525: added support for events that start before and end after the current period, encompassing it entirely

TLD Review Notes

I suggest we change the following Client Event and Attribute names as noted below for clarity and consistency with other components:

ClientEvent names:

• eventClick -> selectEvent
• next -> navNext
• previous -> navPrev

Attributes:

• additionControls -> enableAddEvent? (Why is this attribute a String instead of a boolean?)
• applyEnhancedStyling -> enhancedStylingEnabled
• deletionControls -> enableDeleteEvent? (Why is this attribute a String instead of a boolean?)
• currentDate -> viewDate
• editingControls -> enableEditEvent (Why is this attribute a String instead of a boolean?)
• eventDetails -> showEventDetails
• displayTooltip -> showTooltip

Showcase Demo Notes

• New Demo category “Schedule” after "Media"
  • “ace:schedule”
    • Overview (read-only schedule with tooltips for details, no sidebar)
    • Event Editing
    • Lazy Loading
    • Configuration (enh styling, scrollable, 12hr clock, tooltip, event duration, timezone).
      • Config. form on page, with “Generate Schedule” button, which opens in to a wider popup dialog. The fixed width of the current showcase demo panels is a bit limiting for showing the schedule in all it’s glory.
    • Custom Styling (show using the enhanced Styling mode, different event types using different colors).

All demos should show a diverse mix of event types and durations, with overlapping events, multiple day events, etc. But be less busy with lots of whitespace, not like the current one which is crammed with back-to-back events.

r50570: made various TLD changes: eventClick -> selectEvent, next -> navNext, previous -> navPrev, additionControls -> enableAddition, applyEnhancedStyling -> enhancedStylingEnabled, deletionControls -> enableDeletion, currentDate -> viewDate, editingControls -> enableEditing, eventDetails -> showEventDetails, displayTooltip -> showTooltip

r50571: new demo structure for ace:schedule, including basic settings for the different demos

Upon further review of the update attribute names, and consideration of other components such as ace:dataTable, I think we should change a couple of these again to avoid the use of "enabled":

• enableAddition -> addEvents
• enableDeletion -> deleteEvents
• enableEditing -> editEvents
• enhancedStyleEnabled -> enhancedStyling

Also, let's revert the selectEvent client event back to "eventClick", since it is really meant to be a low-level event intercept vector and not necessarily mapped semantically to the selection of an event, though that is the default behaviour.
Sorry Art!

r50713: made more TLD changes: selectEvent -> eventClick, enableAddition -> addEvents, enableDeletion -> deleteEvents, enableEditing -> editEvents, enhancedStyleEnabled -> enhancedStyling

r50736: added an event generator that generates a semi-random set of events with a default distribution that includes events of different durations, all day events, overlapping events and other possible rendering scenarios in the ace:schedule component; modified demos to use this default event distribution; modified configuration demo to display schedule inside a dialog; updated bean code

r50737: fix for ace:dialog to detect ace:schedule components inside of it and re-render correctly all events in week and day views, when showing the dialog, when maximizing it and when restoring it

Showcase Demo Review Notes

• Demo names should be “Event Editing”, not “ace:schedule - Event Editing”, etc.
• Let’s use the more colourful Custom Styling styling for all demos, and allow the user to user a checkbox to enable/disable custom styling on the custom styling demo.
• Overview
  • Reduce description text to: "The <ace:schedule> component displays a month, week or day view of scheduled events as well as specific details about each of them. The event details can be displayed on a popup, on the sidebar, or in a tooltip. It also has built-in functionality to add, edit and delete events."
  • (You can use the lazy loading text on that demo, custom styling text on that demo, etc.).
• Lazy Loading
  • Failing when selected with: "Property 'lazyScheduleEventList' not found on type org.icefaces.samples.showcase.example.ace.schedule.ScheduleBean class javax.el.PropertyNotFoundException"
• Configuration
  • Changing the select event details mode to sidebar doesn’t work.
  • Change the labels from “Select time zone:” to just “Timezone:”, etc.
  • Disable the maximize button on dialog, when maximized, if you open and close an event popup dialog, it changes the width of the schedule dialog for some reason. Remove the maximize button to avoid this bug for this release.
  • Center the “Generate Schedule” button in the panel.

Reminder to update the WIki page for the update client event and attribute names.

r50750: added random event generator for the lazy-loading demo; made al modifications listed in the JIRA; added detailed descriptions in each demo; cleaned up the code and added other minor improvements

This concludes the showcase work, unless more modifications are requested. The issue with not being able to display the event details in the sidebar is a bug that will be fixed at the component level.

r50756: corrected showEventDetails attribute name in configuration demo

r50768: added validation code in the client and on the server to make sure that the end date is later than the start date; added validation in the client to check for date formats; added exception handling on the server for cases when the input is not as expected and added appropriate FacesMessage's; other fixes for more robustness

This commit addresses the following points that were posted some weeks ago:
+ Validate that the end date must be greater than the start date.
+ Add validation for all the inputs in the event details dialog.
+ Add exception handling in the server side code for cases when inputs aren't complete or valid and for other date-related issues.

r50770: added code to escape HTML characters in the event boxes, in the sidebar, in the event details dialog and in the tooltip, in order to prevent malicious use