https://www.zkoss.org/_w/index.php?title=Small_Talks/2010/February/ZK_Calendar&feed=atom&action=historySmall Talks/2010/February/ZK Calendar - Revision history2024-03-28T14:50:57ZRevision history for this page on the wikiMediaWiki 1.35.1https://www.zkoss.org/_w/index.php?title=Small_Talks/2010/February/ZK_Calendar&diff=16813&oldid=prevTomyeh at 09:43, 19 January 20112011-01-19T09:43:32Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 09:43, 19 January 2011</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l26" >Line 26:</td>
<td colspan="2" class="diff-lineno">Line 26:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= Layout Structure =</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= Layout Structure =</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>The Calendar component only allows one child component named ''[<del class="diffchange diffchange-inline">http://books.zkoss.org/wiki/</del>ZK_Component_Reference/Essential_Components/Toolbar Toolbar]''. Each [[#Calendar_Event_Object|calendar event]] is manipulated by a CalendarModel, which is an interface defined to store the calendar event datum. </div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>The Calendar component only allows one child component named ''[<ins class="diffchange diffchange-inline">[</ins>ZK_Component_Reference/Essential_Components/Toolbar<ins class="diffchange diffchange-inline">| </ins>Toolbar<ins class="diffchange diffchange-inline">]</ins>]''. Each [[#Calendar_Event_Object|calendar event]] is manipulated by a CalendarModel, which is an interface defined to store the calendar event datum. </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>Tomyehhttps://www.zkoss.org/_w/index.php?title=Small_Talks/2010/February/ZK_Calendar&diff=14864&oldid=prevChar: /* Layout Structure */2010-12-14T07:24:56Z<p><span dir="auto"><span class="autocomment">Layout Structure</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 07:24, 14 December 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l26" >Line 26:</td>
<td colspan="2" class="diff-lineno">Line 26:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= Layout Structure =</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= Layout Structure =</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>The Calendar component only allows one child component named ''[http://<del class="diffchange diffchange-inline">docs</del>.zkoss.org/wiki/<del class="diffchange diffchange-inline">Developer_reference_The_XUL_Components_Components_Toolbar </del>Toolbar]''. Each [[#Calendar_Event_Object|calendar event]] is manipulated by a CalendarModel, which is an interface defined to store the calendar event datum. </div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>The Calendar component only allows one child component named ''[http://<ins class="diffchange diffchange-inline">books</ins>.zkoss.org/wiki/<ins class="diffchange diffchange-inline">ZK_Component_Reference/Essential_Components/Toolbar </ins>Toolbar]''. Each [[#Calendar_Event_Object|calendar event]] is manipulated by a CalendarModel, which is an interface defined to store the calendar event datum. </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>Charhttps://www.zkoss.org/_w/index.php?title=Small_Talks/2010/February/ZK_Calendar&diff=7757&oldid=prevElton776: moved Small Talks/ZK Calendar to Small Talks/2010/February/ZK Calendar2010-09-21T01:39:24Z<p>moved <a href="/wiki/Small_Talks/ZK_Calendar" class="mw-redirect" title="Small Talks/ZK Calendar">Small Talks/ZK Calendar</a> to <a href="/wiki/Small_Talks/2010/February/ZK_Calendar" title="Small Talks/2010/February/ZK Calendar">Small Talks/2010/February/ZK Calendar</a></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<tr class="diff-title" lang="en">
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 01:39, 21 September 2010</td>
</tr><tr><td colspan="2" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div>
</td></tr></table>Elton776https://www.zkoss.org/_w/index.php?title=Small_Talks/2010/February/ZK_Calendar&diff=6719&oldid=prevElton776: /* Live Demo */2010-09-14T04:16:34Z<p><span dir="auto"><span class="autocomment">Live Demo</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 04:16, 14 September 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l23" >Line 23:</td>
<td colspan="2" class="diff-lineno">Line 23:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>You can try the [http://zcal.zkoss.org/ live demo] online or view the Flash demo below.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>You can try the [http://zcal.zkoss.org/ live demo] online or view the Flash demo below.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><gflash width="1050" height="650"><del class="diffchange diffchange-inline">http://docs.zkoss.org/images/f/f1/</del>2009-05-08_1744.swf</gflash></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><gflash width="1050" height="650">2009-05-08_1744.swf</gflash></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= Layout Structure =</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= Layout Structure =</div></td></tr>
</table>Elton776https://www.zkoss.org/_w/index.php?title=Small_Talks/2010/February/ZK_Calendar&diff=6291&oldid=prevElton776: Created page with '{{Template:Smalltalk_Author| |author=Jumper Chen, Engineer, Potix Corporation |date=February 11, 2010 |version=Applicable to zk-3.6.0 and later. }} = Introduction = After ZK Spr…'2010-09-13T08:02:58Z<p>Created page with '{{Template:Smalltalk_Author| |author=Jumper Chen, Engineer, Potix Corporation |date=February 11, 2010 |version=Applicable to zk-3.6.0 and later. }} = Introduction = After ZK Spr…'</p>
<p><b>New page</b></p><div>{{Template:Smalltalk_Author|<br />
|author=Jumper Chen, Engineer, Potix Corporation<br />
|date=February 11, 2010<br />
|version=Applicable to zk-3.6.0 and later.<br />
}}<br />
<br />
= Introduction =<br />
After ZK Spreadsheet, the ZK Team is once again pushing the envelope with the release of ZK Calendar, a Google calendar like embeddable Ajax component for your Java applications. You are able to customize both the functionality and the style of your web calendar. One of the main benefits of ZK Calendar is the ability to interact with other Ajax components within your Web applications. Even better, your calendar event data is stored on your own database preventing exposure of sensitive data. With ZK Calendar, users of your applications are easily able to share schedules and create group calendars providing a rich Ajax experience under authority controls. <br />
<br />
ZK Calendar schedules events in a similar fashion to Google Calendar, together with worldwide user support via multiple time zones. Within the Calendar component, there are many different dairy view modes, in the demo these include: <br />
<br />
#Daily <br />
#Weekly <br />
#Every 5 days <br />
#Monthly <br />
<br />
The component has two main display molds, the default mold and monthly mold. While using the default mold it is possible to display any number of days on the page, however the optimum limit would be 7. In contrast, the monthly mold is solely restricted to the 「month」 view. <br />
This functionality provides users with a convenient way in which to view their schedule.<br />
<br />
= Live Demo =<br />
The following example is a [http://en.wikipedia.org/wiki/Create,_read,_update_and_delete CRUD] calendar application demo which demonstrates how to use ZK Calendar component to implement a Google-Calendar-like web application.<br />
<br />
You can try the [http://zcal.zkoss.org/ live demo] online or view the Flash demo below.<br />
<br />
<gflash width="1050" height="650">http://docs.zkoss.org/images/f/f1/2009-05-08_1744.swf</gflash><br />
<br />
= Layout Structure =<br />
The Calendar component only allows one child component named ''[http://docs.zkoss.org/wiki/Developer_reference_The_XUL_Components_Components_Toolbar Toolbar]''. Each [[#Calendar_Event_Object|calendar event]] is manipulated by a CalendarModel, which is an interface defined to store the calendar event datum. <br />
<br />
<br />
:1. '''Default Mold'''<br />
[[Image:Calendars-1.JPG]]<br />
<br />
In the default mold, the content of the calendar is separated into two parts. The main component area is where [[#What_is_different_between_the_date_time_event_and_the_daylong_event|date time]] events are displayed and the top of the Calendar component is used to display the [[#What_is_different_between_the_date_time_event_and_the_daylong_event|daylong]] event. <br />
<br />
The amount of days shown on the Calendar component depends on the value returned by Calendars#getDays(), if the value is seven, it will show a week per page.<br />
<br />
<br />
<br />
:2. '''Month Mold'''<br />
[[Image:Calendars-2.JPG]]<br />
<br />
In the month mold the [[#What_is_different_between_the_date_time_event_and_the_daylong_event|date time]] event has no background color but the text is colored and the [[#What_is_different_between_the_date_time_event_and_the_daylong_event|daylong]] event has a background color with white text. When utilising the month mold, each row represents one week.<br />
<br />
= Component Usage =<br />
Here is ''Calendar's'' attribute specification table:<br />
{|border="1"<br />
|-<br />
!Attribute||Usage||Default Value<br />
|-<br />
||readonly<br />
||Sets whether it is readonly<br />
||false<br />
|-<br />
||firstDayOfWeek<br />
||Sets what the first day of the week is; e.g., <code>SUNDAY</code> in the U.S., <code>MONDAY</code> in France<br />
||system default<br />
|-<br />
||currentDate<br />
||Sets the current date<br />
||today (depend on which timezone the system is using)<br />
|-<br />
||days<br />
||Sets the days, that is, how many column should be displayed on the default mold<br />
||7 (i.e. one week)<br />
|-<br />
||dateFormatter<br />
||Sets the date formatter. In fact, there are five places in the calendar must have different date display<br />
||<code>org.zkoss.calendar.impl.SimpleDateFormatter</code><br />
|-<br />
||eventRender<br />
||Sets the event renderer<br />
||<code>org.zkoss.calendar.impl.SimpleEventRender</code><br />
|-<br />
||model<br />
||Sets the calendar model<br />
||null<br />
|}<br />
<br />
= Event Listeners =<br />
The ''Calendar'' component provides three events. These events allow the user to execute code when a ''Calendar'' event is '''created''', '''edited''' and '''updated''':<br />
<br />
<br />
1. '''onEventCreate''':<br />
<br />
The event is triggered when a user clicks a day which has no calendar event or drag and drops a date range onto the calendar.<br />
<br />
2. '''onEventEdit''':<br />
<br />
The event is triggered by a user clicking on a calendar event.<br />
<br />
3. '''onEventUpdate''':<br />
<br />
The event is triggered by a user re-sizing the date range or dragging and dropping the calendar event onto a different date. <br />
<br />
<br />
The above [[#Live_Demo|video]] demonstrates how a popup window is used to enable the user to create a calendar event and edit it. In addition to this another popup window is used to confirm that a message has been updated, this window is then close it by a timer. <br />
<br />
<br />
=== Calendar's Event ===<br />
Here is a description table of the ''CalendarsEvent'' when passed by one of the three events above.<br />
<br />
{| border="1"<br />
|-<br />
!Method || Usage<br />
|-<br />
|| stopClearGhost<br />
|| Stops to clear the dragging ghost command<br />
|-<br />
|| clearGhost<br />
|| Clears the dragging ghost<br />
|-<br />
|| getBeginDate<br />
|| Returns the updated beginning date. If the event name is onEventEdit, null is assumed<br />
|-<br />
|| getEndDate<br />
|| Returns the updated end date. If the event name is onEventEdit, null is assumed<br />
|-<br />
|| getCalendarEvent<br />
|| Returns the calendar event. If the event name is onEventCreate, null is assumed<br />
|-<br />
|| getX<br />
|| Returns the x coordination of the mouse pointer relevant to the component<br />
|-<br />
|| getY<br />
|| Returns the y coordination of the mouse pointer relevant to the component<br />
|-<br />
|| getDesktopWidth<br />
|| Returns the pixel width of the client's desktop<br />
|-<br />
|| getDesktopHeight<br />
|| Returns the pixel height of the client's desktop<br />
|}<br />
<br />
= Multi-Timezone=<br />
In the ''Calendar'' component the default time zone is the first timezone which was added. If no time zone was entered then the system』s time zone is taken as default. All the dates in the Calendar component use coordinated universal time ([http://en.wikipedia.org/wiki/UTC UTC]). If you wish to show the date and time with regard to your settings (like in the [[#Live_Demo|demo]]) you will need to use the function ''getDefaultTimeZone()'' to retrieve the local time and use that to format your date and time. <br />
<br />
<br />
For example:<br />
<br />
<source lang="java"><br />
SimpleDateFormat create_sdf = new SimpleDateFormat("HH:mm");<br />
create_sdf.setTimeZone(calendars.getDefaultTimeZone());<br />
<br />
Calendar cal = Calendar.getInstance(org.zkoss.util.Locales.getCurrent());<br />
String[] times = create_sdf.format(evt.getBeginDate()).split(":"); <br />
int hours = Integer.parseInt(times[0])*2;<br />
int mins = Integer.parseInt(times[1]);<br />
if (mins >= 30) hours++;<br />
createEvent.getFellow("ppbt").setSelectedIndex(hours);<br />
</source><br />
<br />
<br />
The above example is used to display the correct time of day in a ''Listbox''.<br />
<br />
= Calendar Event Object =<br />
We do not provide a ZK component for the calendar event object because the usage of the calendar event object is unlike a basic ''ZK'' component. Hence, we only provide an interface named ''CalendarEvent'', which provides several getting methods used for the ''Calendars'' component. By default, we create a ''SimpleCalendarEvent'' implementation of the ''CalendarEvent'', like a [http://en.wikipedia.org/wiki/Data_Transfer_Object DTO]. For ease of use, you can use your [http://en.wikipedia.org/wiki/Data_Transfer_Object DTO] to implement the ''CalendarEvent'' interface, and then directly use it through your web application.<br />
<br />
Below is the description of ''CalendarEvent'' interface:<br />
{| border="1"<br />
|-<br />
!Method||Usage<br />
|-<br />
||getBeginDate<br />
||Returns the beginning date of the calendar event.<br />
|-<br />
||getEndDate<br />
||Returns the end date of the calendar event.(exclusive)<br />
|-<br />
||getTitle<br />
||Returns the title of the calendar event.<br />
|-<br />
||getContent<br />
||Returns the content of the calendar event.<br />
|-<br />
||getHeaderColor<br />
||Returns the color of the header in the calendar event. Only allows the value being recognized by CSS.<br />
|-<br />
||getContentColor<br />
||Returns the color of the content in the calendar event. Only allows the value being recognized by CSS.<br />
|-<br />
||getZclass<br />
||Returns the zclass of the calendar event.<br />
|-<br />
||isLocked<br />
||Returns whether the calendar event is locked or not.<br />
|}<br />
<br />
'''Note:''' All of the above getting methods cannot be null.<br />
<br />
= Data Model =<br />
The only way to manipulate the [[#Calendar_Event_Object | calendar event object]] is to use the interface ''CalendarModel''. We create an implementation of ''CalendarModel'' named ''SimpleCalendarModel'' which allows the developer to '''add''', '''remove''' and '''update''' the [[#Calendar_Event_Object | calendar event object]]. <br />
<br />
The best method of implementation would be to create a load-on-demand model which only retrieves the needed calendar event object, rather than storing them all.<br />
<br />
= Customization =<br />
=== Date Formatter ===<br />
''DateFormatter'' provides 5 functions which retrieve the caption, with four of these providing additional formatting:<br />
<br />
#''DateFormatter#getCaptionByDayOfWeek()'' <br />
#Returns the caption of the day of week. <br />
#''DateFormatter#getCaptionByTimeOfDay()'' <br />
#Returns the caption of the time of day. <br />
#''DateFormatter#getCaptionByDate()'' <br />
#Returns the caption of the date. <br />
#''DateFormatter#getCaptionByDateOfMonth()'' <br />
#Returns the caption of the date of month. <br />
#''DateFormatter#getCaptionByPopup()'' <br />
#Returns the caption of the popup title. <br />
<br />
We create an implementation of the ''DateFormatter'' interface named ''SimpleDateFormatter''. To use your own it is possible to utilize the function ''setDateFormatter()'' of the ''Calendar'' to change the implementation.<br />
<br />
=== Event Render ===<br />
Since the [[#Calendar_Event_Object|CalendarEvent]] is not a ZK component we need to provide a way to render its [http://en.wikipedia.org/wiki/Html HTML]. There are four methods used to render an outline: <br />
<br />
#''EventRender#drawDay()''<br />
#:Draws the day in the default mode of the calendar.<br />
#''EventRender#drawAllDay()''<br />
#:Draws the all day in the default mode of the calendar.<br />
#''EventRender#drawDayByMonth()''<br />
#:Draws the day in the month mode of the calendar.<br />
#''EventRender#drawAllDayByMonth()''<br />
#:Draws the all day in the month mode of the calendar.<br />
<br />
We create an implementation of the ''EventRender'' interface by default named ''SimpleEventRender''. You can utilize the ''setEventRender()'' function of the ''Calendar'' component to change the implementation.<br />
<br />
'''Note:''' If you change the implementation, please make sure the ''JavaScript'' of the ''Calendars'' component works well as some of the information in [[#Calendar_Event_Object|CalendarEvent]] needs to be transferred between the client and server.<br />
<br />
= FAQ =<br />
=== How do you display the popup window correctly upon user interaction ? ===<br />
The [[#Calendars_Event|CalendarsEvent]] provides the methods getX(), getY(), getDesktopWidth() and getDesktopHeight(). You can utilize these API to calculate where the calendar event should be placed. <br />
<br />
For example:<br />
<br />
<source lang="java"><br />
CalendarsEvent evt = (CalendarsEvent) event;<br />
int left = evt.getX();<br />
int top = evt.getY();<br />
<br />
if (top + 245 > evt.getDesktopHeight())<br />
top = evt.getDesktopHeight() - 245;<br />
if (left + 410 > evt.getDesktopWidth())<br />
left = evt.getDesktopWidth() - 410;<br />
createEvent.setLeft(left + "px");<br />
createEvent.setTop(top + "px");<br />
</source><br />
<br />
In this sample the values '''245''' and '''''410''''' are dependent on the height and width of your component.<br />
<br />
=== How do I enable the dragging ghost of the Calendar Event ?===<br />
<br />
By default, the ghost of the dragging event will not be present. However you can invoke the ''stopClearGhost()'' method of the ''CalendarEvent'' to enable the ghost. <br />
<br />
'''Note:''' If you make use of this functionality, you are required to invoke the ''clearGhost()'' method of the ''CalendarsEvent'' once all your logic has been completed. (There is a trick that after update the ''CalendarModel'', the dragging ghost will be removed.) <br />
<br />
<br />
For example,<br />
<br />
* To enable the dragging ghost<br />
<br />
<source lang="java"><br />
<attribute name="onEventCreate"><![CDATA[<br />
... // omitted<br />
createEvent.setAttribute("calendars", cal);<br />
createEvent.setAttribute("calevent", evt);<br />
evt.stopClearGhost();<br />
]]></attribute><br />
</source><br />
<br />
<br />
* To clear the dragging ghost<br />
<br />
<source lang="java"><br />
<button mold="os" label="Cancel"><br />
<attribute name="onClick"><br />
... // omitted<br />
((org.zkoss.calendar.event.CalendarsEvent)createEvent.getAttribute("calevent")).clearGhost();<br />
</attribute><br />
</button><br />
</source><br />
<br />
=== How to prevent a user double booking ? ===<br />
There is no straightforward way to prevent a user double booking, but you can validate the calendar event date via these events, ''onEventCreate'', ''onEventEdit'' and ''onEventUpdate''.<br />
<br />
=== What is different between the date time event and the daylong event ? ===<br />
#A '''Date time event''' is an event where the start and end times occur on the same day<br />
#A '''Daylong event''' is an event where the duration of the event is more than one day, or the start and end times are on different days<br />
<br />
For example,<br />
<br />
# If the start date is ''2009/05/08 00:00'' and the end date is ''2009/05/09 00:00'', the duration of the event is 1 day, therefore it is a ''daylong'' event.<br />
# If the start date is ''2009/05/08 23:00'' and the end date is ''2009/05/09 03:00'', the start and end times are on different days, hence it is also a ''daylong'' event. <br />
# If the start date is ''2009/05/08 02:00'' and the end date is ''2009/05/09 00:00'', the start and end times are on the same day, hence it is a ''date time'' event. <br />
<br />
<br />
'''Note:'''<br />
# The above conditions are dependent upon which time zone the Calendar uses<br />
# The end date of the CalendarEvent is exclusive<br />
# When you manipulate the date object in your web application, you must be set the '''MILLISECOND''' and '''SECOND''' fields to 0 in the '''''java.util.Calendar''''' object because we use the ''Date.getTime()'' in the ''Calendar'' component to compare the duration of the calendar event between the start date and the end date. <br />
<br />
For example, we want to create a new ''CalendarEvent'' as follows:<br />
<br />
<source lang="java"><br />
SimpleCalendarEvent ce = new SimpleCalendarEvent();<br />
Calendar cal = Calendar.getInstance(calendars.getDefaultTimeZone()); // create a calendar instance used to calculate the date time<br />
Date beginDate = ppbegin.getValue(); // select a day by datebox<br />
<br />
// just in case to clear the seconds and the millisecond.<br />
cal.setTime(beginDate);<br />
cal.set(Calendar.SECOND, 0);<br />
cal.set(Calendar.MILLISECOND, 0);<br />
beginDate = cal.getTime();<br />
ce.setBeginDate(beginDate);<br />
</source><br />
<br />
=Downloads=<br />
[http://zkoss.org/download/zkcalendar.dsp ZK Calendars download page]<br />
<br />
=Summary=<br />
The calendar application is one of the most fundamental applications within enterprise. Such calendar applications can be utilized to track employee hours and the amount of time they are out of the office.<br />
<br />
Currently, you may utilize Google-Calendar or have used it in the past, this will involve making certain information public or allowing it to be accessed by Google. Utilizing this component it is possible to build a robust internal system in a quick and effective manner. <br />
<br />
<br />
<comment>http://docs.zkoss.org/wiki/ZK_Calendars</comment><br />
<br />
----<br />
<br />
[[Category:ZK Calendar]]<br />
{{Template:Smalltalk_Footer|<br />
|name=Potix Corporation <br />
}}</div>Elton776