[Calendar] Add ability to disable specific date(s)

[exoego]

Description

Add an option disabledDates to the Calendar module.
This option should hold an array of Date or structured {date: Date, title: string, message: string}{date: Date, message: string}.
This option allows users to disable the specific date(s) such as national holiday or something like that.

Screenshot

Oct 15, 16 and 27 are disabled.
Oct 27 has CSS-only tooltip to explain why it is disabled.

Closes

#200

[exoego]

Could anyone help me to implement popup for message?
I tried to use Popup module with data-title and data-content but it does not work as I expected.

[lubber-de]

First: Thanks for the PR!, I see, it was a good idea to contact you on twitter 😉

Could anyone help me to implement popup for reason?
I tried to use Popup module with data-title and data-content but it does not work as I expected.

Does at least data-tooltip work? Then we might need to improve the css-only version of popup to somehow support a title. In the first step it is maybe enough to just support a message and add support for a title in a later PR when css-only popup with title support has probably been implemented

[exoego]

I figured out why CSS-only popup (data-tooltip) does not work initially.

Right now, CSS for td.disabled is:

.ui.calendar .ui.table tr .disabled {
  pointer-events: none;
  color: @disabledTextColor;
}

pointer-events: none is used to stop event bubbling and to stay mouse cursor default.
CSS-only popup is trigged by mouse pointer events. So it does not work initially.
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

I put a workaround for this.

In the first step it is maybe enough to just support a message and add support for a title in a later PR when css-only popup with title support has probably been implemented

I agree.

[lubber-de]

Please also try to check for popup positioning and add data-position accordingly if needed.
If an input field is on the very left or right side of the browser window, and the related date aswell, the popup text gets cropped either on the left or on the right side

[exoego]

Popup positiong implemented.

[ColinFrick]

LGTM