Search code examples
jquerycalendaryuiyui3

How to disable specific dates in yui3 calender


I know how to disable past dates in yui3 calender but how can I disable specific dates ?

Should I specify rules for that ? their documentation is not very clear I can't understand the syntax they written for defining rules. If defining a rule is solution then how can I define one to disable specific date ?

ex : 25-12-2015


Solution

  • Indeed rules are a good way to disable specific dates, you can achive that like that:

    var calendar = new Y.Calendar({
        date: new Date("2015-12-25"),
        customRenderer: {
            rules: {
                2015: {
                    11: {
                        25: "mydisableddays",
                        10: "mydisableddays"
                    }
                }
            }
        },
        disabledDatesRule: "mydisableddays"
    }).render();
    

    Since you most likely will have an array of dates you want to disable, you may use this helper function to convert your array to rules.

    function datearray2filter(dates) {
        var ret = {};
        for (var i in dates) {
            var d = new Date(dates[i]),
                y = d.getFullYear(),
                m = d.getMonth();
            if (!ret[y]) ret[y] = {};
            if (!ret[y][m]) ret[y][m] = {};
            ret[y][m][d.getDate()] = "mydisableddays";
        }
        return ret;
    };
    console.log(datearray2filter(["2012-12-25", "2012-12-10"]);
    

    Here's a fiddle for that https://jsfiddle.net/fxaeberhard/5e1b8ay9/6/