Dojo Calendar

A simple Calendar

by kadirisani

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/resources/dojo.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Tutorial: Hello Dojo!</title>
    </head>
    
    <body style="margin-left:30px;">
        <div style="float:left;">
        <h4>A default Calendar</h4>
        <div id="mycal" data-dojo-type="dijit/Calendar" value="" data-dojo-props=""></div>
        </div>
        <div style="margin-left:30px;float:left;">
        <h4>Weekends in strike-off mode</h4>
        <div id="mycal2" data-dojo-type="dijit/Calendar" value="" data-dojo-props="isDisabledDate:dojo.date.locale.isWeekend"></div>
        </div>
        <div style="clear:both;"></div>
        <div style="float:left;">
            <h4>Dojo Datebox</h4>
            <label for="date1">Drop down Date box:</label>
<input type="text" name="date1" id="date1" value=""
    data-dojo-type="dijit/form/DateTextBox"
    required="true" />
        </div>
        <div style="clear:both;"></div>
        <div style="float:left;">
            <h4>Customized Textbox and Calendar combo</h4>
            <input type="text" name="dtTextBox" value=""
    data-dojo-type="dijit/form/TextBox"
            data-dojo-props="" id="dtTextBox" /><button id="calButton" data-dojo-type="dijit/form/Button" type="button">calendar</button>
            <div id="mycal3" data-dojo-type="dijit/Calendar" value="" data-dojo-props="" class="nodisp"></div>
        </div>
    </body>

</html>

CSS

.nodisp {display:none;}

JavaScript

require([
    "dojo/ready",
    "dojo/dom-class",
    "dojo/dom",
    "dojo/parser",
    "dijit/dijit", // loads the optimized dijit layer
    "dijit/Calendar",
    "dijit/form/DateTextBox",
    "dijit/form/TextBox",
    "dijit/form/Button"
],function(ready,domClass,dom){
    ready(function(){
        dojo.connect(dom.byId("calButton"),"onclick", function(){
            dojo.toggleClass("mycal3", "nodisp");
        });
        dojo.connect(dijit.byId("mycal3"),"onValueSelected",function(date){
            var dd = (date.getMonth()+1) + "/" + date.getDate() + "/" + date.getFullYear();
            dijit.byId("dtTextBox").setValue(dd);
            dojo.toggleClass("mycal3","nodisp");
        });
        dojo.connect(dijit.byId("dtTextBox"),"onKeyPress",function(){
            dijit.byId("dtTextBox").setValue("");
            dojo.toggleClass("mycal3","nodisp");
        });
    });
});