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:
  
* [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>]
+
* [https://www.zkoss.org/javadoc/latest/zkcal/org/zkoss/calendar/Calendars.html <tt>Calendars</tt>] (Controller): call <tt>ContentRenderer</tt> to render a calendar to the client-side, dispatch UI events to the corresponding event listeners, receives events from <tt>CalendarModel</tt> then render a calendar upon changed [https://www.zkoss.org/javadoc/latest/zkcal/org/zkoss/calendar/api/CalendarItem.html <tt>CalendarItem</tt>]
 
* [http://www.zkoss.org/javadoc/latest/zkcal/org/zkoss/calendar/impl/SimpleCalendarModel.html <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 10:19, 2 February 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): call ContentRenderer to render a calendar to the client-side, dispatch UI events to the corresponding event listeners, receives events from CalendarModel then render a calendar upon 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/02/02

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