CODEWITHSUNDEEP
javascriptdatecalendardojo
r b
r b

Reputation: 29

Dojo Dijit Calender widget disable all dates except for select few using isDisabledDate

I am having trouble understanding how to use the isDisabledDate property to disable all but a few dates.

The situation:

I am using the Dijit calender widget as part of a web app that allows control of a remote scheduler.

Basically, a list of jobs is retrieved from the server when a user requests. If there is a job scheduled for a particular particular date, that date should be enabled (otherwise disabled by default).

intuitively, in psudo-code, I want to do something like this:

function onGetJobsComplete(jobs){ 
    foreach(job in jobs) {
         dijit.byId('MyCalender').enableDate(job.date);
    }
}

The end result is, I would like the user to graphically see which days have jobs, and be able to click on these day to get additional information (this part i have working).

All the examples I can find seem to deal with blocking out dates based on a criteria that does not depend on external, changing data (ie: all weekends or some such)

edit:

I have attempted this:

     <div id="calSJobs" data-dojo-type="dijit/Calendar" data-dojo-props="
                dayWidth:'abbr',
                isDisabledDate: disabledDates"
                />

-

function disabledDates(value){
    if(typeof dataJobs == 'undefined')
        return true;
    try {   
    for(i=0; i<dataJobs.length; i++) {
        if(dataJobs[i].cron == 'False')
        {
                jobDate = new Date(dataJobs[i].time);
                calDate = value;
                if(compareDate(jobDate, calDate)
                    return false;
        }
    }
    } catch (err) {log(err.message);}
    return true;
}

var compareDate;
require(["dojo/date"], function(date){

compareDate = function (date1, date2) {
    if(date.compare(date1, date2, 'date') == 0)
        return true;
    else
        return false;
}

});

But this has two problems:

Upvotes: 1

Views: 1338

Answers (1)

Marius
Marius

Reputation: 423

If you create calendar as bellow, you can add logic which dates are enabled and which aren't 

 new Calendar({
        value: new Date(),
        isDisabledDate: lang.hitch(this, function(d){
            return true;
        })
    }, "mycal");

This should disable all dates. Or if you want to enable some of them, you can add some logic to the function and return false in case that date is in your list.

Btw if you want to disable all dates inline, you can do as follows:

<div data-dojo-type="dijit.Calendar" value="20120512" data-dojo-props="isDisabledDate:function(){return true; }"></div>

Upvotes: 1

Related Questions