How to localize calendar component of YUI?

Question

I am using YUI's calendar component in my website. I have inserted the code into an ASP page as Javascript as this example demonstrates. This example shows how to configure the calendar component for one locale (German in this case). What I would like to know is how can I configure the calendar for each user based on the language of their browser?

Answer 1

Put the language specific initialization code (as shown on the page you linked to) into separate files per language (eg "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, eg 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, eg yui-calendar-localization-de-DE.js .