Customization"
(Created page with "{{ZKCalendarEssentialsPageHeader}} = Customize More Event Link = {{ZKCalendarEssentialsHeadingToc}} {{ZKCalendarEssentialsPageFooter}}") |
|||
| (9 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{ZKCalendarEssentialsPageHeader}} | {{ZKCalendarEssentialsPageHeader}} | ||
| − | = | + | = "More Items" 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]] | ||
| + | |||
| + | The default text is from a javascript object. | ||
| + | <source lang='javascript'> | ||
| + | msgcal.dayMORE = "+{0} more"; | ||
| + | msgcal.monthMORE = "+{0} more"; | ||
| + | </source> | ||
| + | |||
| + | 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''' | ||
| + | <source lang='javascript'> | ||
| + | zk.afterLoad('calendar', function() { | ||
| + | msgcal = {}; | ||
| + | msgcal.dayMORE = "+{0} 事件"; | ||
| + | msgcal.monthMORE = "+{0} 事件"; | ||
| + | });//zk.afterLoad | ||
| + | </source> | ||
| + | |||
| + | 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>. | ||
| + | |||
| + | You can change the date format in captions by your own implementation. There are several ways: | ||
| + | |||
| + | |||
| + | ==Extend <code>SimpleDateFormatter</code>== | ||
| + | |||
| + | Extending the internal default implementation <javadoc>org.zkoss.calendar.impl.SimpleDateFormatter</javadoc> allows you to override part of captions. | ||
| + | |||
| + | |||
| + | ==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: | ||
| + | |||
| + | {| class='wikitable' | ||
| + | |- | ||
| + | !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 <javadoc type="interface">org.zkoss.calendar.api.DateFormatter</javadoc> implementation, there are 2 ways: | ||
| + | |||
| + | '''By Java''' | ||
| + | <source lang="java"> | ||
| + | calendar.setDateFormatter(new MyDateFormatter()); | ||
| + | </source> | ||
| + | |||
| + | '''By ZUL''' | ||
| + | <source lang='xml'> | ||
| + | <calendars dateFormatter="org.zkoss.calendar.essentials.MyDateFormatter"/> | ||
| + | </source> | ||
| + | |||
| − | |||
{{ZKCalendarEssentialsPageFooter}} | {{ZKCalendarEssentialsPageFooter}} | ||
Latest revision as of 07:30, 2 October 2023
"More Items" Link
If there is not enough space to show events in one day, the Calendar will show a "more items" link:
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