Calendar disabled days are selectable

[charlypoly]

Summary

When setting a specific rule for enabled dates, the disabled ones are still selectable.

Example :

this.calendar.set("customRenderer", {
    rules: custom_rules, // "available" rule
    filterFunction: function (date, node, rules) {
       // ... add class to node
    }
});
this.calendar.set("enabledDatesRule", "available");

Description

I found where the problem come from (I think).
In calendar-base.js (function "_renderCustomRulesHelper"), the SELECTION_DISABLED CSS class is added to the date that mismatch the "enabledDatesRule".

But in calendar.js (function "_clickCalendar"), the selection is possible if

var clickedCellIsDay = clickedCell.hasClass(CAL_DAY) &&
!clickedCell.hasClass(CAL_PREVMONTH_DAY) &&
!clickedCell.hasClass(CAL_NEXTMONTH_DAY);

"clickedCellIsDay" return true;

It make day with SELECTION_DISABLED CSS class selectable..

---

Update

var clickedCellIsDay = clickedCell.hasClass(CAL_DAY) &&
!clickedCell.hasClass(CAL_PREVMONTH_DAY) &&
!clickedCell.hasClass(CAL_NEXTMONTH_DAY);

to

var clickedCellIsDay = clickedCell.hasClass(CAL_DAY) &&
!clickedCell.hasClass(CAL_PREVMONTH_DAY) &&
!clickedCell.hasClass(CAL_NEXTMONTH_DAY) &&
!clickedCell.hasClass(SELECTION_DISABLED);

would fix this issue.

(Notice: SELECTION_DISABLED is not in "calendar" scope)

Type

"Defect".

Component

Calendar

Observed in Version

YUI 3.9.0 (build 5827)

Browser

All browsers.

[shunner]

I think I've encounter the same issue and the problem still exists in the master today.

After inspecting the HTML, I found that a cell that represents a day of next month and out of the range of enabledDatesRule is given both yui3-calendar-day and yui3-calendar-nextmonth-day class at the same time.

More specifically, when I set Jan 2014 to be the only enabled month and I navigate to next month, i.e. Feb 2014, then the day of Mar 2nd is appears to be available to select but of course can't be selected. And a two pane set does NOT have this problem initially, it only occurs when you've clicked prev/next arrows!

...
    var calendar = new Y.Calendar({
        contentBox: "#calendar",
        width: "300px",
        showPrevMonth: true,
        showNextMonth: true,
        enabledDatesRule: "days_with_events",
        date: new Date()
    });

    var rules = {
        "2014": {
            "0": "days_with_events"
        }
    };
...

[shunner]

It seems that my problem is nothing regarding the rules, but the re-rendering of calendar when navigating to another month.

It will only occur when Feb 1st is Saturday, i.e., Mar 2nd is Sunday, and you've navigate at least once among months.