Calendar provides configuration properties that can be used to change the Calendar's various data labels, when the Calendar is used in different locales. This example shows how to provide locale specific labels for month and weekday names, how to configure the format of any date strings passed in to the Calendar and how to configure the format of the month, year label used in the header. It uses Japan as an example locale
There are several properties that are used to change localization settings:
The Calendar also provides special configuration properties for determining how date strings and date range strings should be formatted.
These control how strings are parsed when used as input to the Calendar. By default, the date format for input to the Calendar is mm/dd/yyyy. Ranges are separated by a dash ("-") and lists of dates are delimited using a comma (","). Using these properties, the initial formatting of date can be easily modified:
The following properties are used to format how the month, year label is rendered in the Calendar header:
In our tutorial, we will create a Japanese Calendar that is set up both to accept dates in the standard Japanese format (yyyy/mm/dd) and present the labels in Japanese. Note that all of our date label values will contain special characters in Unicode notation. The Calendar header label will be configured to render the year first, followed by the month, with a year character suffix.
1 | YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container", { START_WEEKDAY: 1, MULTI_SELECT:true } ); |
2 | |
3 | // Correct formats for Japan: yyyy/mm/dd, mm/dd, yyyy/mm |
4 | |
5 | YAHOO.example.calendar.cal1.cfg.setProperty("MDY_YEAR_POSITION", 1); |
6 | YAHOO.example.calendar.cal1.cfg.setProperty("MDY_MONTH_POSITION", 2); |
7 | YAHOO.example.calendar.cal1.cfg.setProperty("MDY_DAY_POSITION", 3); |
8 | |
9 | YAHOO.example.calendar.cal1.cfg.setProperty("MY_YEAR_POSITION", 1); |
10 | YAHOO.example.calendar.cal1.cfg.setProperty("MY_MONTH_POSITION", 2); |
11 | |
12 | // Date labels for Japanese locale |
13 | |
14 | YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_SHORT", ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"]); |
15 | YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_LONG", ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"]); |
16 | YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_1CHAR", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]); |
17 | YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_SHORT", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]); |
18 | YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_MEDIUM",["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]); |
19 | YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_LONG", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]); |
20 | |
21 | YAHOO.example.calendar.cal1.cfg.setProperty("MY_LABEL_YEAR_POSITION", 1); |
22 | YAHOO.example.calendar.cal1.cfg.setProperty("MY_LABEL_MONTH_POSITION", 2); |
23 | YAHOO.example.calendar.cal1.cfg.setProperty("MY_LABEL_YEAR_SUFFIX", "\u5E74"); |
24 | YAHOO.example.calendar.cal1.cfg.setProperty("MY_LABEL_MONTH_SUFFIX", ""); |
view plain | print | ? |
Next, we can set some selected dates using our newly configured date format, and render the Calendar:
1 | YAHOO.example.calendar.cal1.select("2009/10/1-2009/10/8"); |
2 | YAHOO.example.calendar.cal1.cfg.setProperty("PAGEDATE", "2009/10"); |
3 | YAHOO.example.calendar.cal1.render(); |
view plain | print | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings