Customization"

From Documentation
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{ZKCalendarEssentialsPageHeader}}
 
{{ZKCalendarEssentialsPageHeader}}
  
= "More Event" Link =
+
= "More Items" Link =
If there is not enough space to show events in one day, Calendar will show a "more event" link:
+
If there is not enough space to show events in one day, the Calendar will show a "more items" link:
  
 
[[File:moreEventLink.png | center]]
 
[[File:moreEventLink.png | center]]
Line 25: Line 25:
 
Then load the script with [[ZK_Developer%27s_Reference/Internationalization/Warning_and_Error_Messages#Defined_in_a_JS_File | land-addon.xml]]
 
Then load the script with [[ZK_Developer%27s_Reference/Internationalization/Warning_and_Error_Messages#Defined_in_a_JS_File | land-addon.xml]]
  
 +
= Date Format in Captions =
 +
==Default ==
 +
Calendar renders those captions in week date and time with js, <code>zk.fmt.Date</code>.
  
= Date Format in Captions =
+
You can change the date format in captions by your own implementation. There are several ways:
 +
 
 +
 
 +
==Extend <code>SimpleDateFormatter</code>==
  
You can change the date format Calendar renders in captions.
+
Extending the internal default implementation <javadoc>org.zkoss.calendar.impl.SimpleDateFormatter</javadoc> allows you to override part of captions.  
  
==The DateFormatter interface==
 
  
The <javadoc type="interface">org.zkoss.calendar.api.DateFormatter</javadoc> interface requires 5 methods to be implemented. These are as follows:
+
==Implement <code>DateFormatter</code> interface==
 +
If you like to start from scratch, you can implement <javadoc>org.zkoss.calendar.api.ZonedDateTimeFormatter</javadoc> or <javadoc type="interface">org.zkoss.calendar.api.DateFormatter</javadoc> interface which requires 5 methods to be implemented. These are as follows:
  
{| border="1"
+
{| class='wikitable'
 
|-
 
|-
 
!Method||Usage
 
!Method||Usage
Line 54: Line 60:
 
|}
 
|}
  
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 a level of control then ZK Calendar provides you with an implementation.
+
Each method 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.
 
 
 
 
==The SimpleDateFormatter Class==
 
 
 
ZK Calendar provides us with the <javadoc>org.zkoss.calendar.impl.SimpleDateFormatter</javadoc> 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 customization.
 
 
 
 
 
  
==Using a Customized DateFormatter Implementation==
+
==Applying a Customized DateFormatter ==
  
To make use of a customized <javadoc type="interface">org.zkoss.calendar.api.DateFormatter</javadoc> implementation we need to inform ZK Calendar that we are using our own implementation of <javadoc type="interface">org.zkoss.calendar.api.DateFormatter</javadoc>.  To do this we make use of a custom implementation we call the <mp>setDateFormatter</mp> on ZK Calendar, for example:
+
To make use of a customized <javadoc type="interface">org.zkoss.calendar.api.DateFormatter</javadoc> implementation, there are 2 ways:
  
 +
'''By Java'''
 
<source lang="java">
 
<source lang="java">
 
calendar.setDateFormatter(new MyDateFormatter());
 
calendar.setDateFormatter(new MyDateFormatter());
 
</source>
 
</source>
  
 +
'''By ZUL'''
 
<source lang='xml'>
 
<source lang='xml'>
<calendars dateFormatter="foo.MyDateFormatter"/>
+
<calendars dateFormatter="org.zkoss.calendar.essentials.MyDateFormatter"/>
 
</source>
 
</source>
  

Latest revision as of 07:30, 2 October 2023


Customization



"More Items" Link

If there is not enough space to show events in one day, the Calendar will show a "more items" link:

MoreEventLink.png

The default text is from a javascript object.

msgcal.dayMORE = "+{0} more";
msgcal.monthMORE = "+{0} more";

To provide a different locale of text or override the text, you need to create a javascript file and load it. For example,

msgcal_zh.js

zk.afterLoad('calendar', function() {
    msgcal = {};
    msgcal.dayMORE = "+{0} 事件";
    msgcal.monthMORE = "+{0} 事件";
});//zk.afterLoad

Then load the script with land-addon.xml

Date Format in Captions

Default

Calendar renders those captions in week date and time with js, zk.fmt.Date.

You can change the date format in captions by your own implementation. There are several ways:


Extend SimpleDateFormatter

Extending the internal default implementation SimpleDateFormatter allows you to override part of captions.


Implement DateFormatter interface

If you like to start from scratch, you can implement ZonedDateTimeFormatter or DateFormatter interface which 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 method 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.

Applying a Customized DateFormatter

To make use of a customized DateFormatter implementation, there are 2 ways:

By Java

calendar.setDateFormatter(new MyDateFormatter());

By ZUL

<calendars dateFormatter="org.zkoss.calendar.essentials.MyDateFormatter"/>



The example project is at Github


Last Update : 2023/10/02

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