Click here to Skip to main content
14,028,059 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


1 bookmarked
Posted 8 May 2013
Licenced CPOL

Custom Dojo Persian (Jalali) Calendar

, 8 May 2013
Rate this:
Please Sign up or sign in to vote.
Using a custom Dojo Persian (Jalali) Calendar with a CDN


Jalali calendar is a solar calender that was used in Persia, variants of which today are still in use in Iran as well as in Afghanistan.

The Iranian calendars also called Persian calendars are a succession of calendars invented or used for over two millennia in Iran (Persia). One of the longest chronological records in human history, the Iranian calendar has been modified time and again during its history to suit administrative, climatic, and religious purposes.

Its years are designated AP, short for Anno Persico. The Iranian year usually begins within a day of 21 March of the Gregorian calendar. To find the corresponding year of the Gregorian calendar, add 621 or 622 (depending on the time of the year) to a Solar Hijri year.


Dojo Toolkit 1.9.0 Release contains Persian Calendar for the first time. Thanks Dojo, it's useful and works cool. But the name of months and days are something like "Farvardin, Ordibehesht, ..." and "Sun, Mon,...".

It's OK, but not when we want to use it in a Persian web application.

We need to change persian.js files in dojo-release-1.9.0\Dojo\cldr\nls and replace "Farvardin, Ordibehesht, ..." with "فروردین,..." and "Sun,Mon,..." with "یکشنبه , ..."

Using Dojo Hosted On Your Own Server

In persian.js (tip attachment), I edited persian.js and it's ready to use. Just download it and replace dojo-release-1.9.0\Dojo\cldr\nls\persian.js with downloaded persian.js.

This solution works only when you want to use Dojo Toolkit hosted on your server or website. So you must download Dojo Toolkit and replace the persian.js and upload it to your server or website and use dojo.js hosted on your own server.

<!DOCTYPE html>
    <link rel="stylesheet" href="http://localhost/dojo/dijit/themes/claro/claro.css">
        var dojoConfig = { parseOnLoad: true };
    <script src="http://localhost/dojo/dojo/dojo.js"></script>
        require(["dojo/parser", "dijit/dijit", // loads the optimized dijit layer
        "dojox/date/persian", "dojox/date/persian/Date", "dojox/date/persian/locale"
<body class="claro">
    <div datepackage="" data-dojo-type="dijit.Calendar">

In the above sample dojo-release-1.9.0 hosted on <a href="http://localhost/dojo/">http://localhost/dojo/</a>.

In dijit/Calendar, you could find a complete article on how to use dijit/Calendar.

Download DojoPersianCalendar with Dojo hosted on your server.

Using Dojo Hosted on CDN

What if we want to use Dojo hosted on Google CDN or Yandex CDN (Europe)? Using Custom Modules with a CDN demonstrates how it can be done.

DojoPersianCalendar with Dojo Hosted on CDN contains the custom edited Dojo Persian Calendar.

This file contains:

  • customPersianDate
    • cldr
      • nls
        • persian.js
    • date
      • persian
        • Date.js
        • locale.js
      • persian.js
  • blank.html
  • DojoPersianCalendar.htm

Make sure you first upload DojoPersianCalendar.htm on your web server then call it.

For making and editing a Dojo Module, take a look at Introduction to AMD Modules.


We need to make sure that Dojo has access to a local copy of the dojo/resources/blank.html file, which is used by certain modules (like dojo/hash) to enable functionality across domains, by setting the dojoBlankHtmlUrl configuration property. Then we define the location of our local module package. Our local module package is customPersianDate. So in require , we use customPersianDate/date/persian instead of dojox/date/persian.

<!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" 

	var dojoConfig = {
		dojoBlankHtmlUrl: location.pathname.replace(/\/[^/]+$/, '')
	         + '/blank.html',
		packages: [{
			name: 'customPersianDate',
			location: location.pathname.replace(/\/[^/]+$/, '')
	             + '/customPersianDate'
		parseOnLoad: true
    <script src=""></script>
        "dojo/parser", "dijit/dijit", // loads the optimized dijit layer
        "dijit/Calendar", "customPersianDate/date/persian",
        "customPersianDate/date/persian/Date", "customPersianDate/date/persian/locale"
<body class="claro">
    <div datepackage="" data-dojo-type="dijit.Calendar" 

         data-dojo-props="dayWidth:'abbr'" value="2013-05-09">
    <br />
    <input type="text" data-dojo-type="dijit.form.DateTextBox"


        value="2013-05-09" constraints="{datePattern:'yy-MM-dd '}">

You can find about DateTextBox in dijit/form/DateTextBox.


This demo worked for me. Hope it helps you too. Please don't forget to mark your votes, suggestions and feedback to improve the quality of this tip.


  1. dijit/Calendar
  2. Using Custom Modules with a CDN
  3. dijit/form/DateTextBox
  4. Introduction to AMD Modules
  5. Iranian_calendars
  6. Jalali_calendar


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


About the Author

Software Developer (Senior)
United Kingdom United Kingdom
“If you can't explain it simply, you don't understand it well enough.”
Albert Einstein

You may also be interested in...

Comments and Discussions

Generaluse Pin
Member 1145168413-Feb-15 22:29
memberMember 1145168413-Feb-15 22:29 
AnswerRe: use Pin
Nikfazan14-Feb-15 1:06
professionalNikfazan14-Feb-15 1:06 

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

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

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.190419.4 | Last Updated 9 May 2013
Article Copyright 2013 by Nikfazan
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid