Click here to Skip to main content
Click here to Skip to main content

jQuery Calendar Localization

By , 11 Jan 2012
Rate this:
Please Sign up or sign in to vote.

The Calendar plugin provides support for localizing its content and dates for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g. for German.
The desired localization file should be loaded along with the Calendar. The localization is set to the Calendar by setting the culture property. With the steps below, we will show you how to create a Calendar and localize its dates.

The first step is to add the javascript and theme files. In order to use the Calendar plugin, you need to add the jqxcalendar.js, jqxdatetimeinput.js and Dates parsing and formatting is implemented in the The file is a localization file that implements a German localization.

<link rel="stylesheet" href="styles/jqx.base.css" type="text/css"/>
<link rel="stylesheet" href="styles/jqx.darkblue.css" type="text/css"/>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="jqwidgets/globalization/"></script>
<script type="text/javascript" src="jqwidgets/globalization/"></script>

The second step is to add a DIV element to the document’s body.

<div id='Calendar'></div>

The third step is to initialize the Calendar plugin. In order to initialize it, you need to select the Calendar’s DIV element and call the jqxCalendar constructor.

$("#Calendar").jqxCalendar({ width: '250px', height: '250px', theme: 'darkblue' });

jquery calendar
The complete German localization is shown below and is available as The days and months objects define the German days and months strings.

(function($) {
    var cultures = $.global.cultures,
        en = cultures.en,
        standard = en.calendars.standard,
        culture = cultures["de-DE"] = $.extend(true, {}, en, {
        name: "de-DE",
        englishName: "German (Germany)",
        nativeName: "Deutsch (Deutschland)",
        language: "de",
        numberFormat: {
            ',': ".",
            '.': ",",
            percent: {
                pattern: ["-n%","n%"],
                ',': ".",
                '.': ","
            currency: {
                pattern: ["-n $","n $"],
                ',': ".",
                '.': ",",
                symbol: "€"
        calendars: {
            standard: $.extend(true, {}, standard, {
                '/': ".",
                firstDay: 1,
                days: {
                    names: ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],
                    namesAbbr: ["So","Mo","Di","Mi","Do","Fr","Sa"],
                    namesShort: ["So","Mo","Di","Mi","Do","Fr","Sa"]
                months: {
                    names: ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember",""],
                    namesAbbr: ["Jan","Feb","Mrz","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez",""]
                AM: null,
                PM: null,
                eras: [{"name":"n. Chr.","start":null,"offset":0}],
                patterns: {
                    d: "dd.MM.yyyy",
                    D: "dddd, d. MMMM yyyy",
                    t: "HH:mm",
                    T: "HH:mm:ss",
                    f: "dddd, d. MMMM yyyy HH:mm",
                    F: "dddd, d. MMMM yyyy HH:mm:ss",
                    M: "dd MMMM",
                    Y: "MMMM yyyy"
    }, cultures["de-DE"]);
    culture.calendar = culture.calendars.standard;

The last step is to apply the German localization to the Calendar. In order to achieve that, you need to set the Calendar’s ‘culture’ property to the value of the name property in the globalization file.

$("#Calendar").jqxCalendar({ culture: 'de-DE' });

jquery calendar localization


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

United States United States
jQWidgets specializes in the development of platform independent and cross-browser compatible presentation layer components for building modern web-based applications for PC, Touch and Mobile. Our product provides developers with the essential set of User Interface widgets needed to streamline their development and reduce project costs.
Our goal is to help our customers deliver better web-based applications that can be accessed through any device and are pleasure to use.
Group type: Organisation

13 members

Follow on   Twitter

Comments and Discussions

QuestionEvent Binding PinmemberMember 1052774323-Feb-14 23:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140421.2 | Last Updated 11 Jan 2012
Article Copyright 2012 by jqwidgets
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid