From Documentation

Jump to: navigation, search






Contents

Laying out ZK Calendar

ZK Calendar has several options built in which enables us to specify how we want our information to be displayed. ZK Calendar also enables us to embed a Toolbar as a child component into the calendar to provide users with a more interactive experience.


The easiest way to control the look and performance of ZK Calendar is by changing its attributes.


ZK Calendar Attributes

The following table details ZK Calendar’s attributes and their usage.

AttributeUsageDefault Value
readonly Sets whether it is readonly false
firstDayOfWeek Sets what the first day of the week is; e.g., SUNDAY in the U.S., MONDAY in France system default, values- SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, and SATURDAY. Case insensitive
currentDate Sets the current date today (depend on which timezone the system is using)
days Sets the days, that is, how many column should be displayed on the default mold 7 (i.e. one week)
dateFormatter Sets the date formatter. In fact, there are five places in the calendar must have different date display SimpleDateFormatter
model Sets the calendar model null
mold Sets the calendar mold default

The best way to understand how attributes work is to follow an example. In this example we will concentrate on the "mold" attribute.

An Example: The Mold Attribute

The mold attribute dictates what view the user will see. There are two molds, default and month.

The Default Mold

In the default mold the content of the calendar is separated into two parts. The main component area is where date time events are displayed and the top of the Calendar component is used to display the daylong event.

ZKCalEss Default mold.jpg


The Month Mold

In the month mold the date time event has no background color, the text is colored and the daylong event has a background color with white text. When utilising the month mold, each row represents one week.

ZKCalEss Month mold.jpg

By just changing one attribute ZK affords us exceptional power. But how do we change this attribute? The next section explains how.

Setting attributes

We are able to set attributes in a zul file or Java file. The following examples outline how to do this.

In ZUL Files

<calendars id="calendar" height="80%" firstDayOfWeek="Sunday"
                   timeZone="California=PDT-8" mold="default" readonly="true" />


In Java Files

calendar.setMold("default");
calendar.setTimeZone("California=PDT-8");
calendar.setFirstDayOfWeek("Sunday");
calendar.setReadonly(true);



The example project is at Github



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