zk calendar essentials
TRANSCRIPT
-
7/24/2019 ZK Calendar Essentials
1/28
PDF generated using the open source mwlib toolkit. See http://code.pediapress.com/ for more information.
PDF generated at: Mon, 22 Mar 2010 08:53:13 CET
ZK Calendar EssentialsThe essentials of ZK Calendar
-
7/24/2019 ZK Calendar Essentials
2/28
Contents
Articles
ZK Calendar Essentials 1
ZK Calendar Essentials/Introduction 1
ZK Calendar Essentials/Getting Started with ZK Calendar 2
ZK Calendar Essentials/Getting Started with ZK Calendar/Setting Up ZK Calendar 2
ZK Calendar Essentials/Getting Started with ZK Calendar/The ZK Calendar Component 4
ZK Calendar Essentials/Working with ZK Calendar 6
ZK Calendar Essentials/Working with ZK Calendar/Initializing View Attributes 6
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data 9
ZK Calendar Essentials/ Working with ZK Calendar/ Displaying ZK Calendar Event Data/
Managing Event Data 9
ZK Calendar Essentials/ Working with ZK Calendar/ Displaying ZK Calendar Event Data/
Managing Event Data/SimpleCalendarEvent 11
ZK Calendar Essentials/ Working with ZK Calendar/ Displaying ZK Calendar Event Data/
Managing Event Data/Date Formatting 12
ZK Calendar Essentials/ Working with ZK Calendar/ Displaying ZK Calendar Event Data/
Managing Event Data/Multiple Timezones 13
ZK Calendar Essentials/ Working with ZK Calendar/ Displaying ZK Calendar Event Data/
Storing Event Data in Memory 14
ZK Calendar Essentials/ Working with ZK Calendar/ Displaying ZK Calendar Event Data/
Presenting Event Data 15
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners 17
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/
Introducing ZK MVC 18
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/
Declaring Events 20
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/
The CalendarsEvent Object 21
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/
Devising an Input Method 22
References
Article Sources and Contributors 25
Image Sources, Licenses and Contributors 26
-
7/24/2019 ZK Calendar Essentials
3/28
ZK Calendar Essentials 1
ZK Calendar Essentials
Documentation:Books/ZK_Calendar_Essentials
ZK Calendar Essentials/IntroductionZK Calendar is a Google Calendar like Ajax component that integrates rich and intuitive scheduling functionality
into enterprise web applications using pure Java. One of the main benefits of ZK Calendar is it can be embedded into
existing Java applications with minimal effort. The calendar facilitates interaction with other Ajax components and
the ability to customize functionality and styling.
ZK Calendar boasts all the advanced features of a modern day calendar such as daily, weekly, and monthly views,
drag-n-drop, multiple time zones, and permission control.
http://books.zkoss.org/index.php?title=File:ZKCalEss_CalendarIntroduction.png -
7/24/2019 ZK Calendar Essentials
4/28
ZK Calendar Essentials/Getting Started with ZK Calendar 2
ZK Calendar Essentials/Getting Started with ZK
Calendar
This sections aims to walk through setting up ZK Calendar and provide a brief overview on the main essentials of
ZK Calendar.
ZK Calendar Essentials/Getting Started with ZK
Calendar/Setting Up ZK Calendar
To enable use of ZK Calendar there are a few prerequisites.
Prerequisites
Downloaded ZK 5 CE (or higher) from [1]
Downloaded ZK Calendar 2.0 from [2]
Installing the libraries
Depending on your IDE the steps will differ, however the most important part is both ZK Calendar and ZKs JAR
files are included in your project. The project should be a ZK Project or a Web Application Project depending on
what environment you are using.
The easiest way to create a compatible project is to use ZK Studio
[3]
and then include calendar.jar as a library.
A Very Basic Application
Having set-up ZK and ZK Calendar in the environment we need to create an index.zul file. We can then place the
following code into it.
This gives us our very first ZK Calendar application. When the code is started, navigate to index.zul and the
following page should be displayed.
http://www.zkoss.org/download/zkstudio.dsphttp://www.zkoss.org/download/zkcalendar.dsphttp://www.zkoss.org/download/zk.dsp -
7/24/2019 ZK Calendar Essentials
5/28
ZK Calendar Essentials/Getting Started with ZK Calendar/Setting Up ZK Calendar 3
Congratulations! That is all it takes to embed ZK Calendar within your ZK application.
References
[1] http://www.zkoss.org/download/zk.dsp
[2] http://www.zkoss.org/download/zkcalendar.dsp
[3] http://www.zkoss.org/download/zkstudio.dsp
http://www.zkoss.org/download/zkstudio.dsphttp://www.zkoss.org/download/zkcalendar.dsphttp://www.zkoss.org/download/zk.dsphttp://books.zkoss.org/index.php?title=File:ZKCalEss_Simple_calendar_application.png -
7/24/2019 ZK Calendar Essentials
6/28
ZK Calendar Essentials/Getting Started with ZK Calendar/The ZK Calendar Component 4
ZK Calendar Essentials/Getting Started with ZK
Calendar/The ZK Calendar Component
The ZK Calendar Component
In this section, a brief overview is given on how developers work with the ZK Calendar component.
The Bare Calendar Component
ZK Calendar is a single ZK component. Developers could declare it within any ZK container components, such as
Window, tabs, groupbox, etc.
For example:
which renders:
The
bare declaration takes the following default values:
http://books.zkoss.org/index.php?title=File:BareCalendar.png -
7/24/2019 ZK Calendar Essentials
7/28
ZK Calendar Essentials/Getting Started with ZK Calendar/The ZK Calendar Component 5
Calendar Component Attributes
Developers customize the calendars component by declaring its attributes, for example:
the first day of week to be displayed on the calendar, by default: firstDayOfWeek="Sunday"
the default mold (mold="default") displays a "date-time" format in which it displays hours of the day and days of
a week ; the monthly mold (mold="monthly") displays the days in a month
the time zone, for example: timeZone="Finland=GMT+2"
size of the calendar component, for example: width="400px" height="600px"
Triggered Calendar Events
The calendar component triggers three events when users select time slots on ZK Calendar:
onEventCreate
onEventEdit
onEventUpdate
Developers implement the corresponding event listeners to allow writing, editing, and updating (time updates) of
calendar events (appointments) to data models. These methods pass the object to the event listeners and information
such as begin date and end date of the selected time slot.
Calendar Event Data Objects
Developers implement the org.zkoss.calendar.api.CalendarEvent interface, or
use the default implementation org.zkoss.calendar.impl.SimpleCalendarEvent to set
information just as begin date and end date to the event data object after retrieving such information from the
org.zkoss.calendar.event.CalendarsEvent.
Calendar Event Date Model
Developers implement the org.zkoss.calendar.api.CalendarModel interface, or
use the default implementation org.zkoss.calendar.impl.SimpleCalendarModel to store event
data objects
-
7/24/2019 ZK Calendar Essentials
8/28
ZK Calendar Essentials/Working with ZK Calendar 6
ZK Calendar Essentials/Working with ZK
Calendar
This section details all the methods to know how to build substantial applications which make use of Zk Calendar s
many features.
ZK Calendar Essentials/Working with ZK
Calendar/Initializing View Attributes
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 Calendars attributes and their usage.
Attribute Usage Default 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
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
org.zkoss.calendar.impl.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.
-
7/24/2019 ZK Calendar Essentials
9/28
ZK Calendar Essentials/Working with ZK Calendar/Initializing View Attributes 7
An Example: The Mold Attribute
The mold attribute dictates what view the user will see. There are two molds, the default and
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.
http://books.zkoss.org/index.php?title=File:ZKCalEss_Default_mold.jpg -
7/24/2019 ZK Calendar Essentials
10/28
ZK Calendar Essentials/Working with ZK Calendar/Initializing View Attributes 8
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.
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
In Java Files
calendar.setMold("default");
calendar.setTimeZone("California=PDT-8");
calendar.setFirstDayOfWeek("Sunday");
calendar.setReadonly(true);
http://books.zkoss.org/index.php?title=File:ZKCalEss_Month_mold.jpg -
7/24/2019 ZK Calendar Essentials
11/28
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data 9
ZK Calendar Essentials/Working with ZK
Calendar/Displaying ZK Calendar Event Data
The most important part of a scheduling application is to handle and display data. This sections walks through how
to manage, store and ultimately display data.
ZK Calendar Essentials/Working with ZK
Calendar/Displaying ZK Calendar Event Data/
Managing Event Data
The CalendarEvent interface
It is important when working with the calendar to effectively manage the event data of the calendar. The event data
is contained in a class which implements org.zkoss.calendar.api.CalendarEvent.
An implementing Object should provide the following functions:
Method Usage
getBeginDate Returns the beginning date of the calendar event.
getEndDate Returns the end date of the calendar event.(exclusive)
getTitle Returns the title of the calendar event.
getContent Returns the content of the calendar event.
getHeaderColor Returns the color of the header in the calendar event. Only allows the value being recognized by CSS.
getContentColor Returns the color of the content in the calendar event. Only allows the value being recognized by CSS.
getZclass Returns the zclass of the calendar event.
isLocked Returns whether the calendar event is locked or not.
A CalendarEvent implementation
The code snippet below details a basic class which would fulfill the contract of the org.zkoss.calendar.api.CalendarEvent interface.
importjava.util.Date;
importorg.zkoss.calendar.api.CalendarEvent ;
/**
* A non functional implementation of the CalendarEvent
*
*/
publicclassMyCalendarEventimplementsCalendarEvent {
-
7/24/2019 ZK Calendar Essentials
12/28
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data/Managing Event Data 10
publicDate getBeginDate(){
returnnewDate();
}
publicDate getEndDate(){
returnnewDate();
}
publicString getTitle(){
return"";
}
publicString getContent(){
return"";
}
publicString getHeaderColor(){
return"";
}
publicString getContentColor(){
return"";
}
publicString getZclass(){
return""; }
publicbooleanisLocked(){
returnfalse;
}
}
In a real implementation the above class is useless as it does not contain any meaningful data. We could expand on
the class so it could save state information. However, ZK Calendar already provides a class named
org.zkoss.calendar.impl.SimpleCalendarEvent which provides the relevant functionality for
you. This class is discussed here.
-
7/24/2019 ZK Calendar Essentials
13/28
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data/Managing Event
Data/SimpleCalendarEvent 11
ZK Calendar Essentials/Working with ZK
Calendar/Displaying ZK Calendar Event Data/
Managing Event Data/SimpleCalendarEvent
The org.zkoss.calendar.impl.SimpleCalendarEvent is an implementation of the interface
org.zkoss.calendar.api.CalendarEvent. It provides us with a readily available
class which we can use directly in ZK Calendar applications.
How to use SimpleCalendarEvent
Using org.zkoss.calendar.impl.SimpleCalendarEvent is a simple affair. The code below
demonstrates how to construct an instance and provide it with necessary data.
SimpleCalendarEvent sce =newSimpleCalendarEvent();
sce.setBeginDate(newDate());
sce.setEndDate(newDate());
//The color Strings should only be colors
//that CSS accept
sce.setContentColor("red");
sce.setHeaderColor("red");
sce.setContent("This is the content of the event");
sce.setTitle("This is the title of the event");
//is this event locked?
sce.setLocked(false);
Most of the values described above are self explanatory. However, we do need to pay particularly close attention to
setContentColor and setHeaderColor which only accept String values which represent valid
CSS colors. These can be hex or named strings as both are accepted by the CSS specification.
-
7/24/2019 ZK Calendar Essentials
14/28
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data/Managing Event Data/Date
Formatting 12
ZK Calendar Essentials/Working with ZK
Calendar/Displaying ZK Calendar Event Data/
Managing Event Data/Date Formatting
To enable us to format dates how we require them ZK Calendar provides the interface org.zkoss.calendar.api.DateFormatter.
The DateFormatter interface
The org.zkoss.calendar.api.DateFormatter interface requires 5 methods to be
implemented. These are as follows:
Method Usage
getCaptionByDayOfWeek Returns the caption of the day of week.
getCaptionByTimeOfDay Returns the caption of the time of day.
getCaptionByDate Returns the caption of the date.
getCaptionByDateOfMonth Returns the caption of the date of month.
getCaptionByPopup Returns the caption of the popup title.
Each function enables us to customize the appearance of the calendar at any opportunity. Implementing an interface
such as this is excellent if you require fine grained control. If you do not require such level of control then ZK
Calendar provides you with an implementation.
The SimpleDateFormatter Class
ZK Calendar provides us with the org.zkoss.calendar.impl.SimpleDateFormatter class which
enables rapid development of ZK Calendar applications. The implementation is used by default within ZK Calendar.
In some circumstances you may require a more powerful implementation and therefore need to create a
customization.
Using a Customized DateFormatter Implementation
To make use of a customized org.zkoss.calendar.api.DateFormatter
implementation we need to inform ZK Calendar that we are using our own implementation of org.zkoss.calendar.api.DateFormatter. To do this we make use of a custom
implementation we call the setDateFormatter on ZK Calendar, for example:
calendar.setDateFormatter(newMyDateFormatter());
-
7/24/2019 ZK Calendar Essentials
15/28
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data/Managing Event Data/Multiple
Timezones 13
ZK Calendar Essentials/Working with ZK
Calendar/Displaying ZK Calendar Event Data/
Managing Event Data/Multiple Timezones
In ZK Calendar the default time zone is the first timezone which was added. If no time zone was entered then the
systems time zone is taken as default. All the dates in the Calendar component use UTC coordinated universal time[1]
. If you wish to show the date and time with regard to your settings you need to use the function
getDefaultTimeZone() to retrieve the local time and use that to format your date and time.
For example:
SimpleDateFormat create_sdf =newSimpleDateFormat("HH:mm");
create_sdf.setTimeZone(calendars.getDefaultTimeZone());
Calendar cal =
Calendar.getInstance(org.zkoss.util.Locales.getCurrent());
String[]times =create_sdf.format(evt.getBeginDate()).split(":");
inthours =Integer.parseInt(times[0])*2;
intmins =Integer.parseInt(times[1]);
if(mins >=30)hours++;
createEvent.getFellow("ppbt").setSelectedIndex(hours);
The above example is used to display the correct time of day in a Listbox.
References[1] http://en.wikipedia.org/wiki/UTC
http://en.wikipedia.org/wiki/UTChttp://en.wikipedia.org/wiki/UTC -
7/24/2019 ZK Calendar Essentials
16/28
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data/Storing Event Data in Memory 14
ZK Calendar Essentials/Working with ZK
Calendar/Displaying ZK Calendar Event Data/
Storing Event Data in Memory
It is easy to store scheduled data in memory and can be done by using the
org.zkoss.calendar.impl.SimpleCalendarModel. This model provides functions to add and
remove org.zkoss.calendar.api.CalendarEvents.
The following code demonstrates how to generate and store a few random events in the
org.zkoss.calendar.impl.SimpleCalendarModel.
SimpleCalendarModel scm =newSimpleCalendarModel();
publicvoidaddToModel(CalendarEvent ce){
scm.add(ce);
}
publicCalendarEvent createRandomEvent(){
SimpleCalendarEvent sce =newSimpleCalendarEvent();
Random generator =newRandom();
longtimeNow =newDate().getTime();
longroundedTime =timeNow -(timeNow %1000);
Calendar cal =Calendar.getInstance();
cal.setTimeInMillis(roundedTime);
cal.add(Calendar.HOUR,-(generator.nextInt(3)+2));
sce.setBeginDate(cal.getTime());
System.out.println(cal.getTime());
cal.setTimeInMillis(roundedTime);
cal.add(Calendar.HOUR,generator.nextInt(3)+1);
sce.setEndDate(cal.getTime());
System.out.println(cal.getTime());
//The color Strings should only be colors
//that CSS accept
sce.setContentColor("red");
sce.setHeaderColor("red");
sce.setContent("This is the content of the event");
sce.setTitle("This is the title of the event");
//is this event locked?
sce.setLocked(false);
-
7/24/2019 ZK Calendar Essentials
17/28
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data/Storing Event Data in Memory 15
returnsce;
}
publicvoidcreateData(){
scm =newSimpleCalendarModel();
for(inti=0;i SimpleCalendarModel scm =newSimpleCalendarModel();
publicvoidaddToModel(CalendarEvent ce){
scm.add(ce);
}
publicCalendarEvent createRandomEvent(){
SimpleCalendarEvent sce =new
SimpleCalendarEvent();
Random generator =newRandom();
longtimeNow =newDate().getTime();
longroundedTime =timeNow -(timeNow %1000);
java.util.Calendarcal =
java.util.Calendar.getInstance();
cal.setTimeInMillis(roundedTime);
-
7/24/2019 ZK Calendar Essentials
18/28
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data/Presenting Event Data 16
cal.add(java.util.Calendar.HOUR,
-(generator.nextInt(3)+2));
sce.setBeginDate(cal.getTime());
System.out.println(cal.getTime());
cal.setTimeInMillis(roundedTime);
cal.add(java.util.Calendar.HOUR,
generator.nextInt(3)+1);
sce.setEndDate(cal.getTime());
System.out.println(cal.getTime());
//The color Strings should only be colors
//that CSS accept
sce.setContentColor("red");
sce.setHeaderColor("red");
sce.setContent("This is the content of the event");
sce.setTitle("This is the title of the event");
//is this event locked?
sce.setLocked(false);
returnsce;
}
publicvoidcreateData(){ scm =newSimpleCalendarModel();
for(inti=0;i
The above code's output is shown below.
-
7/24/2019 ZK Calendar Essentials
19/28
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data/Presenting Event Data 17
ZK Calendar Essentials/Working with ZK
Calendar/
Implementing ZK Calendar EventListeners
In this section, we'll discuss:
the events triggered on the ZK Calendar component
the ZK MVC approach to handling events
how to devise an input dialog to create, edit, and update events on ZK Calendar
http://books.zkoss.org/index.php?title=File:ZKCalEss_MemoryModelResult.png -
7/24/2019 ZK Calendar Essentials
20/28
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/Introducing ZK MVC 18
ZK Calendar Essentials/Working with ZK
Calendar/Implementing ZK Calendar Event
Listeners/Introducing ZK MVC
Introducing ZK Calendar MVC
ZK MVC pattern is an adaptation of the popular Model-View-Controller architecture in the ZK framework. The
ability to separate concerns in multifaceted web applications is a key advantage of employing a server-driven Ajax
framework. In this section, we'll walk through a basic ZK MVC application that generates your lucky numbers for
the next round of lotto mayhem.
The View
In ZK MVC pattern, Developers construct "view" by declaring ZK components in a ZUL file.
For our lotto example:view.zul
Where we declare a Window component as a container for other widgets, a Vbox to stack up components vertically,
and a button to generate the lotto numbers. It is imperative to assign the Button component and the Vbox component
identification strings (id = " ") so that auto-wiring is possible.
The Model
"Model" in a ZK MVC application is no different from other MVC implementations. Under the ZK MVC approach,
developers work with the data manipulations in Java, not in ZUL.
Model.java
packageorg.zkoss.mvc;
importjava.util.ArrayList;
publicclassModel{
publicstaticArrayListgenLottoList(){
ArrayListnumList =newArrayList();
while(numList.size()
-
7/24/2019 ZK Calendar Essentials
21/28
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/Introducing ZK MVC 19
publicstaticintgetNum(){
intnum =((int)(Math.random()*49))+1;
returnnum;
}
}
The Controller
ZK provides a convenient pattern for the MVC practice, in the "controller" class we need to:
extend the helper class org.zkoss.zk.ui.util.GenericForwardComposer so that events would
be forwarded to the corresponding event handlers
declare the ZK component fields for auto-wiring, in this example: Button getBtn; Vbox view;
name the event listeners, the event listener's name is in the format of "onEvent$ID", where "onEvent" is the event
fired, and "ID" is the ID of the ZK component triggered the event. In this example the event fired is "onClick" and
the ZK component that triggered the onClick event is the button with the ID "getBtn"
Controller.java
packageorg.zkoss.mvc;
importorg.zkoss.zk.ui.util.GenericForwardComposer ;
importorg.zkoss.zul.Button;
importorg.zkoss.zul.Textbox;
importorg.zkoss.zul.Vbox;
publicclassControllerextendsGenericForwardComposer {
privateButton genBtn;
privateVbox view;
publicvoidonClick$genBtn(){
Textbox text =newTextbox();
text.setWidth("180px");
text.setValue(""+Model.genLottoList());
text.setParent(view);
}
}
With these three essentials steps done, we can now turn our attention to implementing the event listeners. In theevent listener, we create a text box to contain the randomly generated lotto numbers, and set its width to 180 pixels.
We then call getLottoList() to obtain the lotto numbers and set them as the text box's value. Finally, we
set the Vbox (id = "view") as the text box's parent so that each text box generated will line up vertically. Please note
that the object Button and Vbox are automatically instantiated when the ZUL file (view.zul ) is parsed by ZK.
-
7/24/2019 ZK Calendar Essentials
22/28
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/Introducing ZK MVC 20
Running this example gives us:
This section demonstrated a simple way to implement the ZK MVC pattern, in the next, we'll see how this technique
is adapted in making a ZK Calendar.
ZK Calendar Essentials/Working with ZK
Calendar/Implementing ZK Calendar Event
Listeners/Declaring Events
Declaring Events
The ZK Calendar Event Listeners
The ZK Calendar component recognizes three events:
onEventCreate
This event is triggered when a user clicks an empty cell in the time schedule grid.
onEventEdit
This event is triggered when a user clicks on a cell in the time schedule grid that is already occupied by a scheduled
event.
onEventUpdate
This event is triggered when a user modifies a scheduled event's span, or when the scheduled event is dragged and
dropped to a different date.
Developers implement these event listeners either in a Java file, or in a ZUL file.
Implementation in Java
Consider the brief example below; we first specify the ID of the Calendar component in the ZUL file:
...
...
then create a class that extends org.zkoss.zk.ui.util.GenericForwardComposer to engage data
binding and forward the triggered event (org.zkoss.calendar.event.CalendarsEvent object) to its
corresponding event listeners:
privateorg.zkoss.zul.CalendarcalendarID;
http://books.zkoss.org/index.php?title=File:LottoMVC.png -
7/24/2019 ZK Calendar Essentials
23/28
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/Declaring Events 21
publicvoidonEventCreate$calendarID (CalendarsEvent event){
//invoke event scheduling input method
...
...
}
Implementation in ZUL
As an example declaring event listeners in ZUL:
CalendarsEvent evnt = (CalendarsEvent) event;
]]>
...
...
ZK Calendar Essentials/Working with ZK
Calendar/Implementing ZK Calendar Event
Listeners/The CalendarsEvent Object
The CalendarsEvent Object
The org.zkoss.calendar.event.CalendarsEvent object is passed to the event handler when
onCreateEvent, onEditEvent, and onUpdateEvent is triggered by creating, editing, and updating event data on ZK
Calendar, respectively.
Developers could use the methods outlined below to retrieve information about the event being triggered.
Method Usage
stopClearGhost Stops to clear the dragging ghost command
clearGhost Clears the dragging ghost
getBeginDate Returns the updated beginning date. If the event name is onEventEdit, null is assumed
getEndDate Returns the updated end date. If the event name is onEventEdit, null is assumed
getCalendarEvent Returns the calendar event. If the event name is onEventCreate, null is assumed
getX Returns the x coordination of the mouse pointer relevant to the component
getY Returns the y coordination of the mouse pointer relevant to the component
getDesktopWidth Returns the pixel width of the client's desktop
getDesktopHeight Returns the pixel height of the client's desktop
-
7/24/2019 ZK Calendar Essentials
24/28
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/Devising an Input
Method 22
ZK Calendar Essentials/Working with ZK
Calendar/Implementing ZK Calendar Event
Listeners/Devising an Input Method
Devising an Input Dialog
When a user selects a time slot on ZK Calendar, an input dialog is necessary for users to enter certain information for
that particular appointment; for example, the event title, the description, choosing a distinctive color to mark the
event, etc. We could accomplish this by creating a customized ZK component, called a ZK Macro Component, that
allows users to input the appointment related information. The information entered may then be displayed on ZK
Calendar and persisted in storage.
Making an Input Dialog
Constructing a Book-Event-Dialog
Consider implementing an input dialog for booking an appointment on ZK Calendar as an example. Here we make
the premise that a ZK Calendars component, with id = "cal", is already declared in a ZUL file named "calendar.zul"
-
7/24/2019 ZK Calendar Essentials
25/28
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/Devising an Input
Method 23
Submit:
In calendar.zul,
define a ZK macro component named "BookEventDialog" and specify its corresponding ZUL file's URI, in this
case, just "bookEvent.zul"
in calendar.zul, declare the macro component and assign an ID
In CalendarCtrl.java (the controller class that extends
org.zkoss.zk.ui.util.GenericForwardComposer)
declare the event booking window and the Calendars component
privateWindow bookEventWin;
privateCalendars cal;
in the current execution, create the macro component "bookEvent.zul" and assign it to the declared Window,
bookEventWin.
bookEventWin =(Window)Executions.createComponents("bookEvent.zul",
win,null);
from there, we set the event booking window visible in our event Listener (onEventCreate$cal to
bring it to view when a user selects a time slot on calendar
bookEventWin.setVisible(true);
Positioning the Input Dialog
The CalendarsEvent provides the methods getX(), getY(), getDesktopWidth() and getDesktopHeight(). You canutilize these API to calculate where the calendar event should be placed.
For example:
publicvoidonEventCreate$cal(CalendarsEvent event){
intleft =evt.getX();
inttop =evt.getY();
if(top +245>event.getDesktopHeight())
top =event.getDesktopHeight()-245;
if(left +410>event.getDesktopWidth())
left =event.getDesktopWidth()-410;
-
7/24/2019 ZK Calendar Essentials
26/28
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/Devising an Input
Method 24
bookEventWin.setLeft(left +"px");
bookEventWin.setTop(top +"px");
In this sample the values 245 and410 are dependent on the height and width of your component.
-
7/24/2019 ZK Calendar Essentials
27/28
Article Sources and Contributors 25
Article Sources and ContributorsZK Calendar Essentials Source: http://books.zkoss.org/index.php?oldid=112 Contributors: Tmillsclare, Zkwikiadmin
ZK Calendar Essentials/Introduction Source: http://books.zkoss.org/index.php?oldid=218 Contributors: Tmillsclare, Zkwikiadmin
ZK Calendar Essentials/Getting Started with ZK Calendar Source: http://books.zkoss.org/index.php?oldid=277 Contributors: Tmillsclare, Zkwikiadmin
ZK Calendar Essentials/Getting Started with ZK Calendar/Setting Up ZK Calendar Source: http://books.zkoss.org/index.php?oldid=258 Contributors: Tmillsclare, Zkwikiadmin
ZK Calendar Essentials/Getting Started with ZK Calendar/The ZK Calendar Component Source: http://books.zkoss.org/index.php?oldid=302 Contributors: Sphota, Tmillsclare,
Zkwikiadmin
ZK Calendar Essentials/Working with ZK Calendar Source: http://books.zkoss.org/index.php?oldid=279 Contributors: Tmillsclare
ZK Calendar Essentials/Working with ZK Calendar/Initializing View Attributes Source: http://books.zkoss.org/index.php?oldid=263 Contributors: Tmillsclare, Zkwikiadmin
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data Source: http://books.zkoss.org/index.php?oldid=280 Contributors: Tmillsclare, Zkwikiadmin
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data/Managing Event Data Source: http://books.zkoss.org/index.php?oldid=184 Contributors:
Tmillsclare, Zkwikiadmin
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data/Managing Event Data/SimpleCalendarEvent Source:
http://books.zkoss.org/index.php?oldid=187 Contributors: Tmillsclare, Zkwikiadmin
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data/Managing Event Data/Date Formatting Source: http://books.zkoss.org/index.php?oldid=191
Contributors: Tmillsclare, Zkwikiadmin
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data/Managing Event Data/Multiple Timezones Source:
http://books.zkoss.org/index.php?oldid=193 Contributors: Tmillsclare, Zkwikiadmin
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data/Storing Event Data in Memory Source: http://books.zkoss.org/index.php?oldid=202
Contributors: Tmillsclare, Zkwikiadmin
ZK Calendar Essentials/Working with ZK Calendar/Displaying ZK Calendar Event Data/Presenting Event Data Source: http://books.zkoss.org/index.php?oldid=291 Contributors:
Tmillsclare, Zkwikiadmin
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners Source: http://books.zkoss.org/index.php?oldid=281 Contributors: Sphota, Tmillsclare
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/Introducing ZK MVC Source: http://books.zkoss.org/index.php?oldid=304
Contributors: Sphota, Tmillsclare, Zkwikiadmin
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/Declaring Events Source: http://books.zkoss.org/index.php?oldid=290 Contributors:
Sphota
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/The CalendarsEvent Object Source: http://books.zkoss.org/index.php?oldid=221
Contributors: Sphota
ZK Calendar Essentials/Working with ZK Calendar/Implementing ZK Calendar Event Listeners/Devising an Input Method Source: http://books.zkoss.org/index.php?oldid=283
Contributors: Sphota
-
7/24/2019 ZK Calendar Essentials
28/28
Image Sources, Licenses and Contributors 26
Image Sources, Licenses and ContributorsFile:ZKCalEss_CalendarIntroduction.png Source: http://books.zkoss.org/index.php?title=File:ZKCalEss_CalendarIntroduction.png License: unknown Contributors: Zkwikiadmin
File:ZKCalEss_Simple_calendar_application.png Source: http://books.zkoss.org/index.php?title=File:ZKCalEss_Simple_calendar_application.png License: unknown Contributors:
Tmillsclare
Image: bareCalendar.png Source: http://books.zkoss.org/index.php?title=File:BareCalendar.png License: unknown Contributors: Sphota
File:ZKCalEss_Default_mold.jpg Source: http://books.zkoss.org/index.php?title=File:ZKCalEss_Default_mold.jpg License: unknown Contributors: Zkwikiadmin
File:ZKCalEss_Month_mold.jpg Source: http://books.zkoss.org/index.php?title=File:ZKCalEss_Month_mold.jpg License: unknown Contributors: Tmillsclare
File:ZKCalEss_MemoryModelResult.png Source: http://books.zkoss.org/index.php?title=File:ZKCalEss_MemoryModelResult.png License: unknown Contributors: Zkwikiadmin
Image: lottoMVC.png Source: http://books.zkoss.org/index.php?title=File:LottoMVC.png License: unknown Contributors: Sphota