Displaying Calendar Items"

From Documentation
m (replace tt with code (via JWB))
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): 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>]
+
* [https://www.zkoss.org/javadoc/latest/zkcal/org/zkoss/calendar/Calendars.html <code>Calendars</code>] (Controller): call <code>ContentRenderer</code> to render a calendar to the client-side, dispatch UI events to the corresponding event listeners, receives events from <code>CalendarModel</code> then render a calendar upon changed [https://www.zkoss.org/javadoc/latest/zkcal/org/zkoss/calendar/api/CalendarItem.html <code>CalendarItem</code>]
* [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 <code>CalendarModel</code>] (Model): stores <code>CalendarItem</code>
* <tt>ContentRenderer</tt> (View): renders a calender-related data to the client-side upon <tt>CalendarModel</tt>
+
* <code>ContentRenderer</code> (View): renders a calender-related data to the client-side upon <code>CalendarModel</code>
  
 
= Create a CalendarModel =
 
= Create a CalendarModel =
 
{{versionSince| 3.0.0}}
 
{{versionSince| 3.0.0}}
  
Base on the above architecture, if you want to show some items on a Calendar, you need to create some <tt>CalendarItem</tt> objects, put them into a <tt>CalendarModel</tt>, and assign the model to <tt>Calendars</tt>. The default implementation, [https://www.zkoss.org/javadoc/latest/zkcal/org/zkoss/calendar/impl/DefaultCalendarItem.html <tt>DefaultCalendarItem</tt>] and [https://www.zkoss.org/javadoc/latest/zkcal/org/zkoss/calendar/impl/SimpleCalendarModel.html <tt>SimpleCalendarModel</tt>], are sufficient for most requirements.
+
Base on the above architecture, if you want to show some items on a Calendar, you need to create some <code>CalendarItem</code> objects, put them into a <code>CalendarModel</code>, and assign the model to <code>Calendars</code>. The default implementation, [https://www.zkoss.org/javadoc/latest/zkcal/org/zkoss/calendar/impl/DefaultCalendarItem.html <code>DefaultCalendarItem</code>] and [https://www.zkoss.org/javadoc/latest/zkcal/org/zkoss/calendar/impl/SimpleCalendarModel.html <code>SimpleCalendarModel</code>], are sufficient for most requirements.
  
You can instantiate a <tt>SimpleCalendarModel</tt> with a collection of <tt>DefaultCalendarItem</tt> or add a <tt>DefaultCalendarItem</tt> after instantiation.
+
You can instantiate a <code>SimpleCalendarModel</code> with a collection of <code>DefaultCalendarItem</code> or add a <code>DefaultCalendarItem</code> after instantiation.
  
 
<source lang='java'>
 
<source lang='java'>
Line 31: Line 31:
 
= Assign the Model to Calendars=
 
= Assign the Model to Calendars=
  
After creating a <tt>SimpleCalendarModel</tt>, we need to associate a component with the model, so that Calendar will render items to a browser.
+
After creating a <code>SimpleCalendarModel</code>, we need to associate a component with the model, so that Calendar will render items to a browser.
  
 
<source lang='java' high='11'>
 
<source lang='java' high='11'>

Revision as of 09:04, 17 January 2022


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 : 2022/01/17

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