Markdown style :

Calendar API Documentation

Overview

This calendar widget can be used to display Gregorian or Hijri date, and of course as the converter between the two calendar system, it can also be used as datepicker for both systems. It's full customizable for above both calendar system interchange, first day of week (Monday or Sunday), auto hide calendar on select a date, auto select the date when month or year value was changed. This customization can be applied on the fly (at run time) also of course in the way programmatically (at design time). This widget has a month bar which has a drop down list to select the desired month between 12 available month names for the concerned calendar system. There are two buttons associated with the sequence of the month which serve to lower and raise its sequence by one step. This widget also has a year bar which its value can be directly edited. Similar to the month bar, the year bar also has two buttons associated with its value which serve to decrement and increment that value by one. Only difference that year bar has another extra four buttons which change the year value respectively decrement by 100, decrement by 10, increment by 10, and increment by 100. Those extra buttons can be displayed or hidden on the fly at will of the user.

Download

Requirements

Public Constructor

Calendar(isHijriMode, firstDayOfWeek, isAutoHide, isAutoSelectedDate, year, month, date)

Arguments:

Public Methods

Public Properties

Getting Started

Embedding the Calendar Widget on a Web Page

Generally, you'll need to include these three files on any page to use the calendar widget:

<link rel="stylesheet" href="https://ZulNs.github.io/libs/calendar.css"/>
<script type="text/javascript" src="https://ZulNs.github.io/libs/hijri-date.js"></script>
<script type="text/javascript" src="https://ZulNs.github.io/libs/calendar.js"></script>

For the following code examples, please insert them at anywhere you want within the document's body below the above code.

Embedding the Widget as a Calendar

Code example:

<div id="calendar"><input id="show-button" type="button" onclick="showMe();" value="Show Calendar" /></div>
<script type="text/javascript">
    var showBtn = document.getElementById('show-button'),
        cal = new Calendar();
    document.getElementById('calendar').appendChild(cal.getElement());
    showMe();

    cal.onHide = function() {
        showBtn.style.display = 'block'
    };

    function showMe() {
        showBtn.style.display = 'none';
        cal.show();
    }
</script>

Result:

 

 

Embedding the Widget as a Datepicker

Code example:

<div id="datepicker"><input id="picked-text" type="text" size="35"/><input id="pick-button" type="button" onclick="pickADate();" value="pick"/></div>
<script type="text/javascript">
    var pickedTxt = document.getElementById('picked-text'),
        pickBtn = document.getElementById('pick-button'),
        datepicker = new Calendar();
    document.getElementById('datepicker').appendChild(datepicker.getElement());
    datepicker.getElement().style.marginTop = '10px';

    datepicker.callback = function() {
        pickedTxt.value = datepicker.getDate().getDateString();
        pickedTxt.selectionStart = 0;
        pickedTxt.selectionEnd = pickedTxt.value.length;
        pickedTxt.focus();
    };

    datepicker.onHide = function() {
        pickBtn.style.display = 'inline-block';
    };

    function pickADate() {
        pickBtn.style.display = 'none';
        datepicker.show();
    }
</script>

Result:

 

 

Side by Side Gregorian - Hijri Calendar Converter

Code example:

<div id="calendar-converter"></div>
<script type="text/javascript">
    var cal1 = new Calendar(false, 1, false, true),
        cal2 = new Calendar(true, 0, false, true),
        cal1Mode = cal1.isHijriMode(),
        cal2Mode = cal2.isHijriMode();
    document.getElementById('calendar-converter').appendChild(cal1.getElement());
    document.getElementById('calendar-converter').appendChild(cal2.getElement());
    cal1.setDisplayStyle('inline-block');
    cal2.setDisplayStyle('inline-block');
    cal2.getElement().style.marginLeft = '20px';
    cal1.show();
    cal2.show();

    cal1.callback = function() {
        if (cal1Mode !== cal1.isHijriMode()) {
            cal2.disableCallback(true);
            cal2.changeDateMode();
            cal2.disableCallback(false);
            cal1Mode = cal1.isHijriMode();
            cal2Mode = cal2.isHijriMode();
        } // prevent from infinite loop when user change the calendar mode
        else
            cal2.setTime(cal1.getTime());
    };

    cal2.callback = function() {
        if (cal2Mode !== cal2.isHijriMode()) {
            cal1.disableCallback(true);
            cal1.changeDateMode();
            cal1.disableCallback(false);
            cal1Mode = cal1.isHijriMode();
            cal2Mode = cal2.isHijriMode();
        } // prevent from infinite loop when user change the calendar mode
        else
            cal1.setTime(cal2.getTime());
    };

    cal1.onHide = function() {
        cal1.show(); // prevent the widget from being closed
    };

    cal2.onHide = function() {
        cal2.show(); // prevent the widget from being closed
    };
</script>

Result:

 

 

 


Made By ZulNs

@Yogyakarta, January 2016