dijit calendar to display only 52 weeks back from current day in dojo

Question

I have a requirement of showing calendar to only 52 weeks back from current day in dojo ,I'm using dijit/Calendar for the same,can some one help me by providing light on displaying only 52 weeks back from current day in dijit calendar.

currently I am using data-dojo-props which is disabling only weekends in calendar .

<div id="mycal" data-dojo-attachpoint="mycal" 
                data-dojo-type="dijit.calendar" 
                data-dojo-props="isDisabledDate:dojo.date.locale.isWeekend">
</div>

Bourbia Brahim · Accepted Answer · 2019-02-06T10:59:07.233

1

This is so simple , you have to do it in programmatic manner ,

Create a calendar dijit , then overide its isDisabledDate function by checking both show cal view days are > or are week days : as below

return dojoDate.difference(date, new Date(), "day") > disable_before_days || locale.isWeekend(date)  ;

See below working snippet :

require(["dojo/parser",
    "dijit/Calendar",
    "dijit/registry",
    "dojo/date",
    "dojo/date/locale",
    "dojo/ready",
    "dojo/domReady!"
], function(parser, Calendar, registry, dojoDate, locale, ready){

    disable_before_days = 52;

    ready(function(){
      //var calendar = registry.byId("mycal");
      var calendar = new Calendar({
        value: new Date(),
        isDisabledDate:function(date, localString){
          return dojoDate.difference(date, new Date(), "day") > disable_before_days 
              || locale.isWeekend(date) 
              || date > new Date() ;
        }
       }, "mycal");
    });
});

html, body {
    height: 100%;
    padding: 0; 
    margin: 0;
    font-family: Lucida Sans,Lucida Grande,Arial !important;
    font-size: 13px !important;
    background: white;
    color: #333;
}

#mycal .dijitCalendarDisabledDate {
    background-color: #333;
    text-decoration: none;
}

#mycal .dijitCalendarContainer {
    margin: 25px auto;
}

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/calendar/themes/claro/Calendar.css" rel="stylesheet"/>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>

<script type="text/javascript">
  dojoConfig = {
    isDebug: true,
    async: true,
    parseOnLoad: true
  }
</script>

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<body class="claro">
  <div id="mycal" ></div>

</body>

edited Feb 06 '19 at 10:59

answered Feb 05 '19 at 09:32

Bourbia Brahim

14,459
4
39
52

Thankyou verymuch!! ,it worked.Is it possible to disable future dates as well with the existing functionality(ie allow only 52 weeks back by disabling future dates as well). – Balaji Feb 05 '19 at 17:59
@Balaji juste add `|| date > new Date() ;` in the return condition , to apply the change at calendar stratup you have to do it in programmatic maner , see aupdated fiddle – Bourbia Brahim Feb 06 '19 at 11:00
@Balaji mark the answer as resolved if it helpd you :) – Bourbia Brahim Feb 06 '19 at 11:00
hi Springer , Apppricaiate your paticane ,If i do programtically as suggested i am getting below error "Tried to register widget with id==mycal but that id is already registered". ,I am loading calendar on click of a button . however with your previous shared code "var calendar = registry.byId("mycal");" its loading ,but disabling dates are not applying on startup they are applying only after the selection of some date . – Balaji Feb 06 '19 at 21:09
@Balaji , you have to create div without data-dojo-type ... like
also , you have to create you calendar no in button click but in the class or starter widget – Bourbia Brahim Feb 06 '19 at 21:11
am i doing any thing wrong in this
– Balaji Feb 06 '19 at 21:17
my requirment is on click of button icon ,calendar should popup ,hence i used above mentined first div fr button icon and second div for getting the values selected by user, – Balaji Feb 06 '19 at 21:31
this is other issue than the question , I need the logic of your button how the code work to understand – Bourbia Brahim Feb 06 '19 at 21:39
posted my code with new question please check thank you https://stackoverflow.com/questions/54563431/loading-dijit-calendar-on-click-of-dijit-icon-button – Balaji Feb 06 '19 at 22:20

dijit calendar to display only 52 weeks back from current day in dojo

1 Answers1