Custom Dojo Persian (Jalali) Calendar

Nikfazan

Rate me:

5.00/5 (3 votes)

8 May 2013CPOL3 min read

23.6K

1.4K

Using a custom Dojo Persian (Jalali) Calendar with a CDN

Introduction

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.

Background

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.

HTML

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

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.

DojoPersianCalendar.htm

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.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" 
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dijit/themes/claro/claro.css">
    <script>
	var dojoConfig = {
		dojoBlankHtmlUrl: location.pathname.replace(/\/[^/]+$/, '')
	         + '/blank.html',
		packages: [{
			name: 'customPersianDate',
			location: location.pathname.replace(/\/[^/]+$/, '')
	             + '/customPersianDate'
		}],
		parseOnLoad: true
	};
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js"></script>
    <script>
        require([
        "dojo/parser", "dijit/dijit", // loads the optimized dijit layer
        "dijit/form/DateTextBox",
        "dijit/Calendar", "customPersianDate/date/persian",
        "customPersianDate/date/persian/Date", "customPersianDate/date/persian/locale"
        ]);
    </script>
</head>
<body class="claro">
    <div datepackage="dojox.date.persian" data-dojo-type="dijit.Calendar" 
         data-dojo-props="dayWidth:'abbr'" value="2013-05-09">
    </div>
    <br />
    <input type="text" data-dojo-type="dijit.form.DateTextBox"
        datepackage="dojox.date.persian" 
        value="2013-05-09" constraints="{datePattern:'yy-MM-dd '}">
</body>
</html>

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

Summary

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.

References

License

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

Written By

Nikfazan

Software Developer (Senior)

United Kingdom

“If you can't explain it simply, you don't understand it well enough.”
Albert Einstein

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