Displaying Calendar Items"

From Documentation
Line 4: Line 4:
 
In the component perspective, Calendars is designed in MVC pattern:
 
In the component perspective, Calendars is designed in MVC pattern:
  
* <tt>Calendars</tt> (Controller): render a calendar to the client-side with <tt>ContentRenderer</tt>, receive UI events then call the corresponding event listeners, receives events from <tt>CalendarModel</tt> then render a calendar for changed <tt>CalendarItem</tt>
+
* [https://www.zkoss.org/javadoc/latest/zkcal/org/zkoss/calendar/Calendars.html <tt>Calendars</tt>] (Controller): render a calendar to the client-side with <tt>ContentRenderer</tt>, receive UI events then call the corresponding event listeners, receives events from <tt>CalendarModel</tt> then render a calendar for changed [https://www.zkoss.org/javadoc/latest/zkcal/org/zkoss/calendar/api/CalendarItem.html <tt>CalendarItem</tt>]
* <tt>CalendarModel</tt> (Model): stores <tt>CalendarItem</tt>
+
* [http://www.zkoss.org/javadoc/latest/zkcal/org/zkoss/calendar/impl/SimpleCalendarModel.html <tt>CalendarModel</tt>] (Model): stores <tt>CalendarItem</tt>
 
* <tt>ContentRenderer</tt> (View): renders a calender-related data to the client-side upon <tt>CalendarModel</tt>
 
* <tt>ContentRenderer</tt> (View): renders a calender-related data to the client-side upon <tt>CalendarModel</tt>
  

Revision as of 08:23, 29 January 2021


DocumentationZK Calendar EssentialsDisplaying Calendar Items
Displaying Calendar Items



Component in MVC Pattern

In the component perspective, Calendars is designed in MVC pattern:

  • Calendars (Controller): render a calendar to the client-side with ContentRenderer, receive UI events then call the corresponding event listeners, receives events from CalendarModel then render a calendar for changed CalendarItem
  • CalendarModel (Model): stores CalendarItem
  • ContentRenderer (View): renders a calender-related data to the client-side upon CalendarModel

Create a CalendarModel

Since 3.0.0

Base on the above architecture, if you want to show some items on a Calendar, you need to create some CalendarItem objects, put them into a CalendarModel, and assign the model to Calendars. The default implementation, DefaultCalendarItem and SimpleCalendarModel, are sufficient for most requirements.

You can instantiate a SimpleCalendarModel with a collection of DefaultCalendarItem or add a DefaultCalendarItem after instantiation.

private SimpleCalendarModel model;
...
    model = new SimpleCalendarModel(CalendarItemGenerator.generateList());
    DefaultCalendarItem calendarItem = new DefaultCalendarItem("my title",
                "my content",
                null,
                null,
                false,
                LocalDateTime.now().truncatedTo(ChronoUnit.HOURS),
                LocalDateTime.now().truncatedTo(ChronoUnit.HOURS).plusHours(2)
    model.add(calendarItem);

Assign the Model to Calendars

After creating a SimpleCalendarModel, we need to associate a component with the model, so that Calendar will render items to a browser.

public class DisplayComposer extends SelectorComposer {

    @Wire("calendars")
    private Calendars calendars;
    private SimpleCalendarModel model;

    @Override
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        initModel();
        calendars.setModel(model);
    }



The example project is at Github


Last Update : 2021/01/29

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.