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.