How to localize calendar component of YUI?

Question

Hi friends,

I have a question about YUI. I am using YUI calendar component in my website project. I insert the codes inside ASP as javascript. (like that http://developer.yahoo.com/yui/examples/calendar/germany.html ) Now, i am about to hearing your questions, i am answering them immediately. Yes, this link explains how lo localize YUI calendar, but, it does not work for me. Because, it is static. I want to localize it dynamically. It should depend on user's browser language. For example, if the user's browser language is Deutsch, it is supposed to display 'samstag', if it is English, it is supposed to display 'saturday'. I will be very thankful for your help. It is very important for me. Thanks.

Answer 1

Put the language specific initialization code (as shown on the page you linked to) into separate files per language (e.g. "yui-calendar-de-DE.js").

Then in the code-behind of your page, include the correct include file, depending on the user's preferred language, e.g using something like this:

string language = "en-US";
string[] languages = HttpContext.Current.Request.UserLanguages;
if (languages != null || languages.Length > 0)
  language = languages[0];

Page.ClientScript.RegisterClientScriptInclude(
  "yui-calendar-localization",
  ResolveClientUrl("~/scripts/yui-calendar-" + language + ".js")); 

Update:

The localization files (which you should create by yourself) might look like this:

// this is yui-calendar-localization-de-DE.js

function initCalendar(cal)
{
  // Correct formats for Germany: dd.mm.yyyy, dd.mm, mm.yyyy
  YAHOO.example.calendar.cal1.cfg.setProperty("DATE_FIELD_DELIMITER", ".");
  YAHOO.example.calendar.cal1.cfg.setProperty("MDY_DAY_POSITION", 1);

  ...

  YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_LONG",
    ["Sonntag", ... "Samstag"]);
}

Then on your page, where you create the calendar, use that function to localize the calendar:

// create calendar
cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", 
       { LOCALE_WEEKDAYS:"short", 
     START_WEEKDAY: 1, 
     MULTI_SELECT: true 
   } );
// localize it
initCalendar(cal1); 

Answer 2

An even easier solution than shown in my other answer would be to use the ScriptManager control's EnableScriptLocalization property:

<asp:ScriptManager EnableScriptLocalization="True">
  <Scripts>
    <asp:ScriptReference Name="yui-calendar-localization.js" />
  </Scripts>
</asp:ScriptManager>

This will automatically try to include a localized version of the script, e.g. yui-calendar-localization-de-DE.js.