3 Replies Latest reply on May 25, 2009 8:30 AM by liumin hu

    Creating a scheduler using rich:calendar

    Riccardo Serafin Newbie


      we are trying to create a schedule application with a monthly view of appointments and we were thinking at using the calendar component. For this, we have created an appropriate data model and in the CalendarDataModelItem getData() method of each day we return an array of appointments (that are all JSON serializable).

      Everything works fine if we access the data in the xtml page using something like {data[0].title}. Our problem is that we need to display an unknown number of items for each day, so we'd like to be able to iterate over this collection and for each appointment define an xhtml snippet with this structure. We have tried to use the a4j:repeat for doing this but it doesn't work.

      Our guess is that rich:calendar is performing some kind of text substitution when it is parsing it's content (the custom facet) and that the data variable is not accessible as a normal element iterator (like the var in data table). The fact that we must not use #{} to access it but rather just {} was the clue.

      So, the question is how can we iterate over this array in the xhtml?

      Moreover, we were trying to use the a4j:support on element we create within the calendar, but it doesn't seem to work. Any idea why?

      More in general, has anyone ever used the calendar component to create a schedule application? If so, how did you do that?

      Moreover, thinking at a generic schedule application, the calendar component does not have a day or week view. If someone has developed a schedule application with richfaces, how did you do that? Which component have you used? (We are looking for something like the tomahawk schedule component, but that could be used with richfaces and easily ajaxed).

      Thanks a lot,

      PS: the following is the snippet of code we were trying to use:

      <rich:calendar id="calendar"
       popup="false" showApplyButton="false"
       cellWidth="100px" cellHeight="100px"
       boundaryDatesMode="none" showWeeksBar="false"
       dataModel="#{calendarDataModel}" >
       <a4j:repeat value="{data}" var="app"/>
       <a4j:outputPanel layout="block" id="cell" style="height: 100%;">
       <h:outputText value="#{app.time}" style="align:center"/>
       <h:outputText value="#{app.title}"/>
       <a4j:support event="onclick" action="#{calendarController.select(app)}" reRender="calendar"/>

      While this is the snippet from the CalendarDataModelItem implementation:
      public Object getData() {
       Appointment[] apps = new Appointment[] { new Appointment("16:00","Test"), new Appointment("18:00","Test2") };
       return apps;