YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Calendar Control: Localization - Taiwan (Year Offset)

# Calendar Control: Localization - Taiwan (Year Offset)

Along with the locale customization parameters covered in the Japanese and German calendar examples, Calendar also supports the ability to set a year offset (from the Gregorian year), which can be used to support locales such as Taiwan (zh-TW), for which the year is 1911 years behind the Gregorian year. This example demonstrates how the year offset field can be used to create a Calendar for the zh-TW locale.

View example in new window.

## Setting up the Calendar

As with the other localization examples, we set up the various label, position and delimiter fields for the Taiwan (zh-TW) localized calendar:

// We set the year_offset configuration field to -1911 YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", { MULTI_SELECT:true, YEAR_OFFSET:-1911 } ); // Year/Month/Date formats for zh-TW: yyyy/mm/dd, mm/dd, yyyy/mm YAHOO.example.calendar.cal1.cfg.setProperty("MDY_YEAR_POSITION", 1); YAHOO.example.calendar.cal1.cfg.setProperty("MDY_MONTH_POSITION", 2); YAHOO.example.calendar.cal1.cfg.setProperty("MDY_DAY_POSITION", 3); YAHOO.example.calendar.cal1.cfg.setProperty("MY_YEAR_POSITION", 1); YAHOO.example.calendar.cal1.cfg.setProperty("MY_MONTH_POSITION", 2); // Date labels for zh-TW var months = ["\u4e00\u6708","\u4e8c\u6708", "\u4e09\u6708", "\u56db\u6708", "\u4e94\u6708", "\u516d\u6708", "\u4e03\u6708", "\u516b\u6708", "\u4e5d\u6708", "\u5341\u6708", "\u5341\u4e00\u6708", "\u5341\u4e8c\u6708"]; var weekdays = ["\u661f\u671f\u65e5", "\u661f\u671f\u4e00", "\u661f\u671f\u4e8c", "\u661f\u671f\u4e09", "\u661f\u671f\u56db", "\u661f\u671f\u4e94", "\u661f\u671f\u516d"]; YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_SHORT", months); YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_LONG", months); YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_1CHAR", weekdays); YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_SHORT", weekdays); YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_MEDIUM", weekdays); YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_LONG", weekdays); // Month/Year label format for zh-TW YAHOO.example.calendar.cal1.cfg.setProperty("MY_LABEL_YEAR_POSITION", 1); YAHOO.example.calendar.cal1.cfg.setProperty("MY_LABEL_MONTH_POSITION", 2); YAHOO.example.calendar.cal1.cfg.setProperty("MY_LABEL_YEAR_SUFFIX", "\u5E74");

However for the Taiwan localized calendar, we also specify a year offset for the Calendar as shown on line 4 above. The year offset is applied whenever the Calendar renders a year as a string, or accepts a year as string input.

For example, when setting selector dates, or the page date using strings, we use the offset date (the Gregorian year-1911). The months and dates are the same as the Gregorian calendar:

// When working with strings, we use the offset year... YAHOO.example.calendar.cal1.select("98/8/1-98/8/8"); YAHOO.example.calendar.cal1.cfg.setProperty("PAGEDATE", "98/8"); // When working with Date objects, we need to have it reflect the Gregorian date... YAHOO.example.calendar.cal1.cfg.setProperty("MAXDATE", new Date(2009, 7, 20)); YAHOO.example.calendar.cal1.render();

It's important to note that whenever you're working with JavaScript Date objects, the year will/should always be set to the Gregorian year (and not offset by the year_offset amount), since the JavaScript Date object's month and date rollovers and leap year calculations will only work correctly when operating with the year set to the equivalent Gregorian year.

For this reason, any JavaScript Date objects returned by Calendar's methods, will always reflect the Gregorian year, even when a year offset is set, and any Date objects passed into Calendar methods, should reflect the Gregorian year.

## Configuration for This Example

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.

### Calendar Control Examples:

- Quickstart Tutorial
- Multi-Select Calendar
- Multi-Page Calendar
- Minimum/Maximum Dates
- Calendar Navigator
- Handling Calendar Events
- Calendar and Text Fields
- Calendar and Select Fields
- Using the Render Stack
- Popup Calendar - Basic
- Popup Calendar - Advanced
- Interval Selection Calendar
- Localization - Germany
- Localization - Japan
- Localization - Taiwan (Year Offset)
- Skinning The Calendar
- Calendar Plugin (included with examples for Rich Text Editor)
- Inline Cell Editing (included with examples for DataTable Control)
- Using YUI Loader to Load the Calendar Control (included with examples for YUI Loader Utility)
- Simple Calendar Menu Button (included with examples for Button Control)
- Calendar Menu Button with Date on Button Face (included with examples for Button Control)
- Simple Application (included with examples for Layout Manager)
- Complex Application (included with examples for Layout Manager)
- Simple Profiling (included with examples for ProfilerViewer Control)

### More Calendar Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings