From 5cb8682b69b52ec7fa701b43b897fe4cd1b282ba Mon Sep 17 00:00:00 2001 From: exoego Date: Sat, 27 Oct 2018 20:52:59 +0900 Subject: [PATCH 1/7] Refactor: extract configurable disabling logic --- src/definitions/modules/calendar.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/definitions/modules/calendar.js b/src/definitions/modules/calendar.js index ca24cf16d5..c2a38d7db5 100644 --- a/src/definitions/modules/calendar.js +++ b/src/definitions/modules/calendar.js @@ -315,7 +315,7 @@ $.fn.calendar = function(parameters) { cell.text(cellText); cell.data(metadata.date, cellDate); var adjacent = isDay && cellDate.getMonth() !== ((month + 12) % 12); - var disabled = adjacent || !module.helper.isDateInRange(cellDate, mode) || settings.isDisabled(cellDate, mode) || (mode === 'day' && settings.disabledDaysOfWeek.includes(cellDate.getDay())); + var disabled = adjacent || !module.helper.isDateInRange(cellDate, mode) || settings.isDisabled(cellDate, mode) || module.helper.isDisabled(cellDate, mode); var active = module.helper.dateEqual(cellDate, date, mode); var isToday = module.helper.dateEqual(cellDate, today, mode); cell.toggleClass(className.adjacentCell, adjacent); @@ -495,7 +495,7 @@ $.fn.calendar = function(parameters) { //enter var mode = module.get.mode(); var date = module.get.focusDate(); - if (date && !settings.isDisabled(date, mode) && !(mode === 'day' && settings.disabledDaysOfWeek.includes(date.getDay())) ) { + if (date && !settings.isDisabled(date, mode) && !module.helper.isDisabled(date, mode)) { module.selectDate(date); } //disable form submission: @@ -789,6 +789,9 @@ $.fn.calendar = function(parameters) { }, helper: { + isDisabled: function(date, mode) { + return (mode === 'day' && settings.disabledDaysOfWeek.includes(date.getDay())) + }, sanitiseDate: function (date) { if (!date) { return undefined; From 83e63405b539f02678ebfa81812e54dbaa66afa1 Mon Sep 17 00:00:00 2001 From: exoego Date: Sat, 27 Oct 2018 22:49:08 +0900 Subject: [PATCH 2/7] Add disabledDates, --- src/definitions/modules/calendar.js | 35 +++++++++++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/src/definitions/modules/calendar.js b/src/definitions/modules/calendar.js index c2a38d7db5..8b3eeeb673 100644 --- a/src/definitions/modules/calendar.js +++ b/src/definitions/modules/calendar.js @@ -316,6 +316,13 @@ $.fn.calendar = function(parameters) { cell.data(metadata.date, cellDate); var adjacent = isDay && cellDate.getMonth() !== ((month + 12) % 12); var disabled = adjacent || !module.helper.isDateInRange(cellDate, mode) || settings.isDisabled(cellDate, mode) || module.helper.isDisabled(cellDate, mode); + if (disabled) { + var disabledReason = module.helper.disabledReason(cellDate, mode); + if (disabledReason !== null) { + cell.data(metadata.title, disabledReason.title); + cell.data(metadata.message, disabledReason.message); + } + } var active = module.helper.dateEqual(cellDate, date, mode); var isToday = module.helper.dateEqual(cellDate, today, mode); cell.toggleClass(className.adjacentCell, adjacent); @@ -790,7 +797,28 @@ $.fn.calendar = function(parameters) { helper: { isDisabled: function(date, mode) { - return (mode === 'day' && settings.disabledDaysOfWeek.includes(date.getDay())) + return mode === 'day' && (settings.disabledDaysOfWeek.includes(date.getDay()) || settings.disabledDates.some(function(d){ + if (d instanceof Date) { + return module.helper.dateEqual(date, d, mode); + } + if (d !== null && typeof d === 'object') { + return module.helper.dateEqual(date, d[metadata.date], mode) + } + })); + }, + disabledReason: function(date, mode) { + if (mode === 'day') { + for (var i = 0; i < settings.disabledDates.length; i++) { + var d = settings.disabledDates[i]; + if (d !== null && typeof d === 'object' && module.helper.dateEqual(date, d[metadata.date], mode)) { + var reason = {}; + reason[metadata.title] = d[metadata.title]; + reason[metadata.message] = d[metadata.message]; + return reason; + } + } + } + return null; }, sanitiseDate: function (date) { if (!date) { @@ -1076,6 +1104,7 @@ $.fn.calendar.settings = { endCalendar : null, // jquery object or selector for another calendar that represents the end date of a date range multiMonth : 1, // show multiple months when in 'day' mode showWeekNumbers : null, // show Number of Week at the very first column of a dayView + disabledDates : [], // specific day(s) which won't be selectable and contain additional information. disabledDaysOfWeek : [], // day(s) which won't be selectable(s) (0 = Sunday) // popup options ('popup', 'on', 'hoverable', and show/hide callbacks are overridden) popupOptions: { @@ -1436,7 +1465,9 @@ $.fn.calendar.settings = { minDate: 'minDate', maxDate: 'maxDate', mode: 'mode', - monthOffset: 'monthOffset' + monthOffset: 'monthOffset', + title: 'title', + message: 'message' } }; From 3dd37c3a36c88d4a1d6978f19aee9de02b071935 Mon Sep 17 00:00:00 2001 From: exoego Date: Sun, 28 Oct 2018 11:18:26 +0900 Subject: [PATCH 3/7] Workaround to show CSS-only tooltip for disabled dates. --- src/definitions/modules/calendar.js | 9 +++++---- src/definitions/modules/calendar.less | 3 ++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/definitions/modules/calendar.js b/src/definitions/modules/calendar.js index 8b3eeeb673..5110605c24 100644 --- a/src/definitions/modules/calendar.js +++ b/src/definitions/modules/calendar.js @@ -319,8 +319,7 @@ $.fn.calendar = function(parameters) { if (disabled) { var disabledReason = module.helper.disabledReason(cellDate, mode); if (disabledReason !== null) { - cell.data(metadata.title, disabledReason.title); - cell.data(metadata.message, disabledReason.message); + cell.attr("data-tooltip", disabledReason[metadata.title]); } } var active = module.helper.dateEqual(cellDate, date, mode); @@ -385,7 +384,7 @@ $.fn.calendar = function(parameters) { var inRange = !rangeDate ? false : ((!!startDate && module.helper.isDateInRange(cellDate, mode, startDate, rangeDate)) || (!!endDate && module.helper.isDateInRange(cellDate, mode, rangeDate, endDate))); - cell.toggleClass(className.focusCell, focused && (!isTouch || isTouchDown) && !adjacent); + cell.toggleClass(className.focusCell, focused && (!isTouch || isTouchDown) && !adjacent && !disabled); cell.toggleClass(className.rangeCell, inRange && !active && !disabled); }); } @@ -453,6 +452,9 @@ $.fn.calendar = function(parameters) { event.stopPropagation(); isTouchDown = false; var target = $(event.target); + if (target.hasClass("disabled")) { + return; + } var parent = target.parent(); if (parent.data(metadata.date) || parent.data(metadata.focusDate) || parent.data(metadata.mode)) { //clicked on a child element, switch to parent (used when clicking directly on prev/next icon element) @@ -813,7 +815,6 @@ $.fn.calendar = function(parameters) { if (d !== null && typeof d === 'object' && module.helper.dateEqual(date, d[metadata.date], mode)) { var reason = {}; reason[metadata.title] = d[metadata.title]; - reason[metadata.message] = d[metadata.message]; return reason; } } diff --git a/src/definitions/modules/calendar.less b/src/definitions/modules/calendar.less index 8833f972b2..858d0e5cd2 100644 --- a/src/definitions/modules/calendar.less +++ b/src/definitions/modules/calendar.less @@ -126,7 +126,8 @@ } .ui.calendar .ui.table tr .disabled { - pointer-events: none; + pointer-events: auto; + cursor: default; color: @disabledTextColor; } From d34b4ef67c4586e3de1a53c86500ef0485d84382 Mon Sep 17 00:00:00 2001 From: exoego Date: Sun, 28 Oct 2018 11:30:31 +0900 Subject: [PATCH 4/7] Rename property since CSS-only tooltip is suitable for message-only. --- src/definitions/modules/calendar.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/definitions/modules/calendar.js b/src/definitions/modules/calendar.js index 5110605c24..550f07027e 100644 --- a/src/definitions/modules/calendar.js +++ b/src/definitions/modules/calendar.js @@ -319,7 +319,7 @@ $.fn.calendar = function(parameters) { if (disabled) { var disabledReason = module.helper.disabledReason(cellDate, mode); if (disabledReason !== null) { - cell.attr("data-tooltip", disabledReason[metadata.title]); + cell.attr("data-tooltip", disabledReason[metadata.message]); } } var active = module.helper.dateEqual(cellDate, date, mode); @@ -814,7 +814,7 @@ $.fn.calendar = function(parameters) { var d = settings.disabledDates[i]; if (d !== null && typeof d === 'object' && module.helper.dateEqual(date, d[metadata.date], mode)) { var reason = {}; - reason[metadata.title] = d[metadata.title]; + reason[metadata.message] = d[metadata.message]; return reason; } } @@ -1467,7 +1467,6 @@ $.fn.calendar.settings = { maxDate: 'maxDate', mode: 'mode', monthOffset: 'monthOffset', - title: 'title', message: 'message' } }; From ee0bf37c7c5bb6dcd3ccff4ce194be062147d7e3 Mon Sep 17 00:00:00 2001 From: exoego Date: Sun, 28 Oct 2018 22:17:24 +0900 Subject: [PATCH 5/7] Positioning tooltip based on container position. --- src/definitions/modules/calendar.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/definitions/modules/calendar.js b/src/definitions/modules/calendar.js index 550f07027e..1642effae7 100644 --- a/src/definitions/modules/calendar.js +++ b/src/definitions/modules/calendar.js @@ -216,6 +216,7 @@ $.fn.calendar = function(parameters) { var pages = isDay ? multiMonth : 1; var container = $container; + var tooltipPosition = container.hasClass("left") ? "right center" : "left center"; container.empty(); if (pages > 1) { pageGrid = $('
').addClass(className.grid).appendTo(container); @@ -320,6 +321,7 @@ $.fn.calendar = function(parameters) { var disabledReason = module.helper.disabledReason(cellDate, mode); if (disabledReason !== null) { cell.attr("data-tooltip", disabledReason[metadata.message]); + cell.attr("data-position", tooltipPosition); } } var active = module.helper.dateEqual(cellDate, date, mode); From 4656d9752c00606b7a661a52324aab5494911cfe Mon Sep 17 00:00:00 2001 From: exoego Date: Sun, 28 Oct 2018 22:19:09 +0900 Subject: [PATCH 6/7] Fix missing semicolon. --- src/definitions/modules/calendar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/definitions/modules/calendar.js b/src/definitions/modules/calendar.js index 1642effae7..642af327ee 100644 --- a/src/definitions/modules/calendar.js +++ b/src/definitions/modules/calendar.js @@ -806,7 +806,7 @@ $.fn.calendar = function(parameters) { return module.helper.dateEqual(date, d, mode); } if (d !== null && typeof d === 'object') { - return module.helper.dateEqual(date, d[metadata.date], mode) + return module.helper.dateEqual(date, d[metadata.date], mode); } })); }, From 26386192b491f6e0afcb79e6bb79e33c566b2f26 Mon Sep 17 00:00:00 2001 From: exoego Date: Mon, 29 Oct 2018 06:24:40 +0900 Subject: [PATCH 7/7] Fix IE11 compatibility --- src/definitions/modules/calendar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/definitions/modules/calendar.js b/src/definitions/modules/calendar.js index 642af327ee..b6ebfa924c 100644 --- a/src/definitions/modules/calendar.js +++ b/src/definitions/modules/calendar.js @@ -801,7 +801,7 @@ $.fn.calendar = function(parameters) { helper: { isDisabled: function(date, mode) { - return mode === 'day' && (settings.disabledDaysOfWeek.includes(date.getDay()) || settings.disabledDates.some(function(d){ + return mode === 'day' && ((settings.disabledDaysOfWeek.indexOf(date.getDay()) !== -1) || settings.disabledDates.some(function(d){ if (d instanceof Date) { return module.helper.dateEqual(date, d, mode); }