Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Persian Date Calendar Gadget for Windows Vista!

4.36/5 (9 votes)
24 Jul 2008CPOL1 min read 1   895  
Persian Date Calendar Gadget for Windows Vista!

Introduction

PersianDateViewerGadget

This is a free gadget for Windows Vista to display the Persian Calendar on the Windows Sidebar. 

Set up

  1. Download the PersianDateViewer.gadget.zip,
  2. Extract the zip, and place the extracted folder to "C:\Program Files\Windows Sidebar\Gadgets".
  3. Open your Windows Sidebar and then you would see this new gadget then you can add it to your desktop.

Technical Points

The zip file contains a folder containing these files:

  1. gadget.xml
  2. JsFarsiCalendar.js
  3. PersianDateViewer.html
  4. Plate.png
  5. PersianDateViewer.ico

gadget.xml

This file is the main file of the application; its duty is to introduce our gadget to the Windows Sidebar. In fact, this file is for managing the gadget. It holds information such as the name of the gadget, version, author name, copyright, a short description of the gadget, and its icon.

XML
<name>Persian Date Viewer</name>
<namespace>DAN</namespace>
<version>1.0.0.0</version>
<author name="Ali Daneshmandi">
    <info url="http://daneshmandi.spaces.live.com/" />
    <logo src="Dan.png">
    </logo>
</author>
<copyright>&#169; 2007</copyright>
<description>Created by Ali Daneshmandi</description>
<icons>
<icon height="48" width="48" src="PersianDateViewer.ico"/>
</icons>

Besides these data, it has a part to say to the sidebar which HTML file to host as the source of the gadget. The HTML file in our gadget is PersianDateViewer.html.

XML
<hosts>
    <host name="sidebar">
        <base type="HTML" apiVersion="1.0.0" 
                src="PersianDateViewer.html" />
        <platform minPlatformVersion="1.0" />
        <permissions>Full</permissions>
    </host>
</hosts>

Here is the complete file:

XML
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
    <name>Persian Date Viewer</name>
    <namespace>DAN</namespace>
    <version>1.0.0.0</version>
    <author name="Ali Daneshmandi">
        <info url="http://daneshmandi.spaces.live.com/" />
        <logo src="Dan.png">
        </logo>
    </author>
    <copyright>&#169; 2007</copyright>
    <description>Created by Ali Daneshmandi</description>
    <icons>
    <icon height="48" width="48" 
              src="PersianDateViewer.ico"/>
    </icons>
    <hosts>
        <host name="sidebar">
            <base type="HTML" apiVersion="1.0.0" 
                    src="PersianDateViewer.html" />
            <platform minPlatformVersion="1.0" />
            <permissions>Full</permissions>
        </host>
    </hosts>
</gadget>

JsFarsiCalendar.js

This file has the duty of getting the system date and converting it to the Persian date to be used in the PersianDateViewer.html file. The getTodayPersian returns an array that contains the Persian year, month, and the day.

JavaScript
function mod(a, b)
{
    return a - (b * Math.floor(a / b));
}
function jwday(j)
{
    return mod(Math.floor((j + 1.5)), 7);
}
var Weekdays = new Array( "Sunday", "Monday", 
                          "Tuesday", "Wednesday",
                          "Thursday", "Friday", "Saturday" );
//  LEAP_GREGORIAN  --  Is a given year in the Gregorian calendar a leap year ?
function leap_gregorian(year)
{
    return ((year % 4) == 0) &&
            (!(((year % 100) == 0) && ((year % 400) != 0)));
}
//  GREGORIAN_TO_JD  --  Determine Julian day number from Gregorian calendar date
var GREGORIAN_EPOCH = 1721425.5;
function gregorian_to_jd(year, month, day)
{
    return (GREGORIAN_EPOCH - 1) +
           (365 * (year - 1)) +
           Math.floor((year - 1) / 4) +
           (-Math.floor((year - 1) / 100)) +
           Math.floor((year - 1) / 400) +
           Math.floor((((367 * month) - 362) / 12) +
           ((month <= 2) ? 0 :
                               (leap_gregorian(year) ? -1 : -2)
           ) +
           day);
}
//  JD_TO_GREGORIAN  --  Calculate Gregorian calendar date from Julian day
function jd_to_gregorian(jd) {
    var wjd, depoch, quadricent, dqc, cent, dcent, quad, dquad,
        yindex, dyindex, year, yearday, leapadj;
    wjd = Math.floor(jd - 0.5) + 0.5;
    depoch = wjd - GREGORIAN_EPOCH;
    quadricent = Math.floor(depoch / 146097);
    dqc = mod(depoch, 146097);
    cent = Math.floor(dqc / 36524);
    dcent = mod(dqc, 36524);
    quad = Math.floor(dcent / 1461);
    dquad = mod(dcent, 1461);
    yindex = Math.floor(dquad / 365);
    year = (quadricent * 400) + (cent * 100) + (quad * 4) + yindex;
    if (!((cent == 4) || (yindex == 4))) {
        year++;
    }
    yearday = wjd - gregorian_to_jd(year, 1, 1);
    leapadj = ((wjd < gregorian_to_jd(year, 3, 1)) ? 0
                                                  :
                  (leap_gregorian(year) ? 1 : 2)
              );
    month = Math.floor((((yearday + leapadj) * 12) + 373) / 367);
    day = (wjd - gregorian_to_jd(year, month, 1)) + 1;
    return new Array(year, month, day);
}
//  LEAP_PERSIAN  --  Is a given year a leap year in the Persian calendar ?
function leap_persian(year)
{
    return ((((((year - ((year > 0) ? 474 : 473)) % 2820) + 
                          474) + 38) * 682) % 2816) < 682;
}
//  PERSIAN_TO_JD  --  Determine Julian day from Persian date
var PERSIAN_EPOCH = 1948320.5;
var PERSIAN_WEEKDAYS = new Array(
    "شنبه", "یکشنبه","دوشنبه", 
    "سه شنبه","چهارشنبه", "پنج شنبه", "جمعه");
function persian_to_jd(year, month, day)
{
    var epbase, epyear;
    epbase = year - ((year >= 0) ? 474 : 473);
    epyear = 474 + mod(epbase, 2820);
    return day +
            ((month <= 7) ?
                ((month - 1) * 31) :
                (((month - 1) * 30) + 6)
            ) +
            Math.floor(((epyear * 682) - 110) / 2816) +
            (epyear - 1) * 365 +
            Math.floor(epbase / 2820) * 1029983 +
            (PERSIAN_EPOCH - 1);
}
//  JD_TO_PERSIAN  --  Calculate Persian date from Julian day
function jd_to_persian(jd)
{
    var year, month, day, depoch, cycle, cyear, ycycle,
        aux1, aux2, yday;
    jd = Math.floor(jd) + 0.5;
    depoch = jd - persian_to_jd(475, 1, 1);
    cycle = Math.floor(depoch / 1029983);
    cyear = mod(depoch, 1029983);
    if (cyear == 1029982) {
        ycycle = 2820;
    } else {
        aux1 = Math.floor(cyear / 366);
        aux2 = mod(cyear, 366);
        ycycle = Math.floor(((2134 * aux1) + (2816 * aux2) + 2815) / 1028522) +
                    aux1 + 1;
    }
    year = ycycle + (2820 * cycle) + 474;
    if (year <= 0) {
        year--;
    }
    yday = (jd - persian_to_jd(year, 1, 1)) + 1;
    month = (yday <= 186) ? Math.ceil(yday / 31) : Math.ceil((yday - 6) / 30);
    day = (jd - persian_to_jd(year, month, 1)) + 1;
    return new Array(year, month, day);
}
function calcPersian(year,month,day)
{
    var date,j;

    j = persian_to_jd(year,month,day);
    date = jd_to_gregorian(j);
    weekday = jwday(j);
    return new Array(date[0], date[1], date[2],weekday);
}
//  calcGregorian  --  Perform calculation starting with a Gregorian date
function calcGregorian(year,month,day)
{
    month--;
    var j, weekday;
    //  
    j = gregorian_to_jd(year, month + 1, day) +
           (Math.floor(0 + 60 * (0 + 60 * 0) + 0.5) / 86400.0);
    //  
    perscal = jd_to_persian(j);
    weekday = jwday(j);
    return new Array(perscal[0], perscal[1], perscal[2],weekday);
}
function getTodayGregorian()
{
    var t = new Date();
    var today = new Date();
    var y = today.getYear();
    if (y < 1000) {
        y += 1900;
    }
    return new Array(y, today.getMonth() + 1, today.getDate(),t.getDay());
}
function getTodayPersian()
{
    var t = new Date();
    var today = getTodayGregorian();

    var persian = calcGregorian(today[0],today[1],today[2]);
    return new Array(persian[0],persian[1],persian[2]);
}

PersianDateViewer.html

This file is for formatting the data obtained from getTodayPersian and to use it inside the HTML file.

HTML
<html>
<head>
    <title>Persian Date Viewer</title>
    <script type="text/javascript" language="JavaScript" 
              src="JsFarsiCalendar.js">
    </script>
    <style>
        body
        {
            margin: 0;
            width: 130px;
            height: 141px;
        color: #ffffff;
        }
        #gadgetContent
        {
            width: 130px;
            : 20px;
            text-align: center;
            position: absolute;
            font-family: Arial Black;
            font-size: 11pt;
        }
      #gadgetContent1
        {
            width: 130px;
            : 35px;
            text-align: center;
            position: absolute;
            font-family: Verdana;
            font-size: 45pt;
        }
        #gadgetContent2
        {
            width: 130px;
            : 95px;
            text-align: center;
            position: absolute;
            font-family: Verdana;
            font-size: 18pt;
        }
    </style>
</head>
<body>
<g:background 
    id="background" 
    src="Plate.png"
    style="position:absolute;top:0;left:0;z-index:-999;no=repeat;" /> 
<span id="gadgetContent">
<script type="text/javascript">
<!--
var dArray;
dArray=getTodayPersian()
switch (dArray[1]) {
        case 1 :
          document.write("فروردین : ");
          document.write(dArray[0]);
          break;
        case 2 :
          document.write("اردیبهشت : ");
          document.write(dArray[0]);
          break;
        case 3 :
          document.write("خرداد : ");
          document.write(dArray[0]);
          break;
        case 4 :
          document.write("تیر : ");
          document.write(dArray[0]);
          break;
        case 5 :
          document.write("مرداد : ");
          document.write(dArray[0]);
          break;
        case 6 :
          document.write("شهریور : ");
          document.write(dArray[0]);
          break;
        case 7 :
          document.write("مهر : ");
          document.write(dArray[0]);
          break;
        case 8 :
          document.write("آبان : ");
          document.write(dArray[0]);
          break;
        case 9 :
          document.write("آذر : ");
          document.write(dArray[0]);
          break;
        case 10 :
          document.write("دی : ");
          document.write(dArray[0]);
          break;
        case 11 :
          document.write("بهمن : ");
          document.write(dArray[0]);
          break;
        default :
          document.write("اسفند : ");
          document.write(dArray[0]);
          break;
      }
//-->
</script>
</span>


<span id="gadgetContent1">
<script type="text/javascript">
<!--
var dArray;
dArray=getTodayPersian()
document.write(dArray[2])
//-->
</script>
</span>


<span id="gadgetContent2">
<script type="text/javascript">
<!--
var today=new Date();
switch (today.getDay()) {
      case 1 :
            document.write("دوشنبه");
      break;
      case 2 :
            document.write("سه شنبه");
      break;
      case 3 :
            document.write("چهارشنبه");
      break;
      case 4 :
            document.write("پنج شنبه");
      break;
      case 5 :
            document.write("جمعه");
      break;
      case 6 :
            document.write("شنبه");
      break;
      default :
            document.write("یکشنبه");
      break;
      }
//-->
</script>
</span>
</body>
</html>

Plate.png

This is the background file of the HTML page.

PersianDateViewer.ico

This file is the icon of the gadget used in the gadget list.

License

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