diff --git a/js/src/calendar.js b/js/src/calendar.js index 2953035a4..d2a658892 100644 --- a/js/src/calendar.js +++ b/js/src/calendar.js @@ -57,9 +57,9 @@ const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}` const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` const CLASS_NAME_CALENDAR_CELL = 'calendar-cell' -const CLASS_NAME_CALENDAR_CELL_INNER = 'calendar-cell-inner' const CLASS_NAME_CALENDAR_ROW = 'calendar-row' const CLASS_NAME_CALENDARS = 'calendars' +const CLASS_NAME_SHOW_WEEK_NUMBERS = 'show-week-numbers' const SELECTOR_BTN_DOUBLE_NEXT = '.btn-double-next' const SELECTOR_BTN_DOUBLE_PREV = '.btn-double-prev' @@ -69,7 +69,9 @@ const SELECTOR_BTN_PREV = '.btn-prev' const SELECTOR_BTN_YEAR = '.btn-year' const SELECTOR_CALENDAR = '.calendar' const SELECTOR_CALENDAR_CELL = '.calendar-cell' +const SELECTOR_CALENDAR_CELL_CLICKABLE = `${SELECTOR_CALENDAR_CELL}[tabindex="0"]` const SELECTOR_CALENDAR_ROW = '.calendar-row' +const SELECTOR_CALENDAR_ROW_CLICKABLE = `${SELECTOR_CALENDAR_ROW}[tabindex="0"]` const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="calendar"]' const Default = { @@ -129,26 +131,8 @@ class Calendar extends BaseComponent { super(element) this._config = this._getConfig(config) - this._calendarDate = convertToDateObject( - this._config.calendarDate || this._config.startDate || this._config.endDate || new Date(), this._config.selectionType - ) - this._startDate = convertToDateObject(this._config.startDate, this._config.selectionType) - this._endDate = convertToDateObject(this._config.endDate, this._config.selectionType) - this._hoverDate = null - this._selectEndDate = this._config.selectEndDate - - if (this._config.selectionType === 'day' || this._config.selectionType === 'week') { - this._view = 'days' - } - - if (this._config.selectionType === 'month') { - this._view = 'months' - } - - if (this._config.selectionType === 'year') { - this._view = 'years' - } - + this._initializeDates() + this._initializeView() this._createCalendar() this._addEventListeners() } @@ -169,6 +153,17 @@ class Calendar extends BaseComponent { // Public update(config) { this._config = this._getConfig(config) + this._initializeDates() + this._initializeView() + + // Clear the current calendar content + this._element.innerHTML = '' + this._createCalendar() + } + + // Private + _initializeDates() { + // Convert dates to date objects based on the selection type this._calendarDate = convertToDateObject( this._config.calendarDate || this._config.startDate || this._config.endDate || new Date(), this._config.selectionType ) @@ -176,24 +171,19 @@ class Calendar extends BaseComponent { this._endDate = convertToDateObject(this._config.endDate, this._config.selectionType) this._hoverDate = null this._selectEndDate = this._config.selectEndDate + } - if (this._config.selectionType === 'day' || this._config.selectionType === 'week') { - this._view = 'days' - } - - if (this._config.selectionType === 'month') { - this._view = 'months' - } - - if (this._config.selectionType === 'year') { - this._view = 'years' + _initializeView() { + const viewMap = { + day: 'days', + week: 'days', + month: 'months', + year: 'years' } - this._element.innerHTML = '' - this._createCalendar() + this._view = viewMap[this._config.selectionType] || 'days' } - // Private _getDate(target) { if (this._config.selectionType === 'week') { const firstCell = SelectorEngine.findOne(SELECTOR_CALENDAR_CELL, target.closest(SELECTOR_CALENDAR_ROW)) @@ -204,7 +194,7 @@ class Calendar extends BaseComponent { } _handleCalendarClick(event) { - const target = event.target.classList.contains(CLASS_NAME_CALENDAR_CELL_INNER) ? event.target.parentElement : event.target + const { target } = event const date = this._getDate(target) const cloneDate = new Date(date) const index = Manipulator.getDataAttribute(target.closest(SELECTOR_CALENDAR), 'calendar-index') @@ -271,11 +261,11 @@ class Calendar extends BaseComponent { let element = event.target if (this._config.selectionType === 'week' && element.tabIndex === -1) { - element = element.closest('tr[tabindex="0"]') + element = element.closest(SELECTOR_CALENDAR_ROW_CLICKABLE) } const list = SelectorEngine.find( - this._config.selectionType === 'week' ? 'tr[tabindex="0"]' : 'td[tabindex="0"]', + this._config.selectionType === 'week' ? SELECTOR_CALENDAR_ROW_CLICKABLE : SELECTOR_CALENDAR_CELL_CLICKABLE, this._element ) @@ -304,7 +294,7 @@ class Calendar extends BaseComponent { const callback = key => { setTimeout(() => { const _list = SelectorEngine.find( - 'td[tabindex="0"], tr[tabindex="0"]', + `${SELECTOR_CALENDAR_CELL_CLICKABLE}, ${SELECTOR_CALENDAR_ROW_CLICKABLE}`, SelectorEngine.find('.calendar', this._element).pop() ) @@ -356,7 +346,7 @@ class Calendar extends BaseComponent { } _handleCalendarMouseEnter(event) { - const target = event.target.classList.contains(CLASS_NAME_CALENDAR_CELL_INNER) ? event.target.parentElement : event.target + const { target } = event const date = this._getDate(target) if (isDateDisabled(date, this._config.minDate, this._config.maxDate, this._config.disabledDates)) { @@ -383,92 +373,86 @@ class Calendar extends BaseComponent { } _addEventListeners() { - EventHandler.on(this._element, EVENT_CLICK_DATA_API, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, event => { + EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_CALENDAR_CELL_CLICKABLE, event => { this._handleCalendarClick(event) }) - EventHandler.on(this._element, EVENT_KEYDOWN, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, event => { + EventHandler.on(this._element, EVENT_KEYDOWN, SELECTOR_CALENDAR_CELL_CLICKABLE, event => { this._handleCalendarKeydown(event) }) - EventHandler.on(this._element, EVENT_MOUSEENTER, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, event => { + EventHandler.on(this._element, EVENT_MOUSEENTER, SELECTOR_CALENDAR_CELL_CLICKABLE, event => { this._handleCalendarMouseEnter(event) }) - EventHandler.on(this._element, EVENT_MOUSELEAVE, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, () => { + EventHandler.on(this._element, EVENT_MOUSELEAVE, SELECTOR_CALENDAR_CELL_CLICKABLE, () => { this._handleCalendarMouseLeave() }) - EventHandler.on(this._element, EVENT_FOCUS, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, event => { + EventHandler.on(this._element, EVENT_FOCUS, SELECTOR_CALENDAR_CELL_CLICKABLE, event => { this._handleCalendarMouseEnter(event) }) - EventHandler.on(this._element, EVENT_BLUR, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, () => { + EventHandler.on(this._element, EVENT_BLUR, SELECTOR_CALENDAR_CELL_CLICKABLE, () => { this._handleCalendarMouseLeave() }) - EventHandler.on(this._element, EVENT_CLICK_DATA_API, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, event => { + EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_CALENDAR_ROW_CLICKABLE, event => { this._handleCalendarClick(event) }) - EventHandler.on(this._element, EVENT_KEYDOWN, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, event => { + EventHandler.on(this._element, EVENT_KEYDOWN, SELECTOR_CALENDAR_ROW_CLICKABLE, event => { this._handleCalendarKeydown(event) }) - EventHandler.on(this._element, EVENT_MOUSEENTER, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, event => { + EventHandler.on(this._element, EVENT_MOUSEENTER, SELECTOR_CALENDAR_ROW_CLICKABLE, event => { this._handleCalendarMouseEnter(event) }) - EventHandler.on(this._element, EVENT_MOUSELEAVE, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, () => { + EventHandler.on(this._element, EVENT_MOUSELEAVE, SELECTOR_CALENDAR_ROW_CLICKABLE, () => { this._handleCalendarMouseLeave() }) - EventHandler.on(this._element, EVENT_FOCUS, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, event => { + EventHandler.on(this._element, EVENT_FOCUS, SELECTOR_CALENDAR_ROW_CLICKABLE, event => { this._handleCalendarMouseEnter(event) }) - EventHandler.on(this._element, EVENT_BLUR, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, () => { + EventHandler.on(this._element, EVENT_BLUR, SELECTOR_CALENDAR_ROW_CLICKABLE, () => { this._handleCalendarMouseLeave() }) // Navigation - EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_BTN_PREV, event => { - event.preventDefault() - this._modifyCalendarDate(0, -1) - }) - - EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_BTN_DOUBLE_PREV, event => { - event.preventDefault() - this._modifyCalendarDate(this._view === 'years' ? -10 : -1) - }) - - EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_BTN_NEXT, event => { - event.preventDefault() - this._modifyCalendarDate(0, 1) - }) - - EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_BTN_DOUBLE_NEXT, event => { - event.preventDefault() - this._modifyCalendarDate(this._view === 'years' ? 10 : 1) - }) - - EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_BTN_MONTH, event => { - event.preventDefault() - this._view = 'months' - this._updateCalendar() - }) - - EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_BTN_YEAR, event => { - event.preventDefault() - this._view = 'years' - this._updateCalendar() - }) + this._addNavigationEventListeners() EventHandler.on(this._element, EVENT_MOUSELEAVE, 'table', () => { EventHandler.trigger(this._element, EVENT_CALENDAR_MOUSE_LEAVE) }) } + _addNavigationEventListeners() { + const navigationSelectors = { + [SELECTOR_BTN_PREV]: () => this._modifyCalendarDate(0, -1), + [SELECTOR_BTN_DOUBLE_PREV]: () => this._modifyCalendarDate(this._view === 'years' ? -10 : -1), + [SELECTOR_BTN_NEXT]: () => this._modifyCalendarDate(0, 1), + [SELECTOR_BTN_DOUBLE_NEXT]: () => this._modifyCalendarDate(this._view === 'years' ? 10 : 1), + [SELECTOR_BTN_MONTH]: () => { + this._view = 'months' + this._updateCalendar() + }, + [SELECTOR_BTN_YEAR]: () => { + this._view = 'years' + this._updateCalendar() + } + } + + for (const [selector, handler] of Object.entries(navigationSelectors)) { + EventHandler.on(this._element, EVENT_CLICK_DATA_API, selector, event => { + event.preventDefault() + handler() + }) + } + } + _setCalendarDate(date) { this._calendarDate = date @@ -612,32 +596,31 @@ class Calendar extends BaseComponent { const listOfYears = createGroupsInArray(getYears(calendarDate.getFullYear()), 4) const weekDays = monthDetails[0].days - const calendarTable = document.createElement('table') + const calendarTable = document.createElement('div') + calendarTable.classList.add('calendar-table') + calendarTable.role = 'table' + calendarTable.innerHTML = ` ${this._view === 'days' ? ` - - +
+
${this._config.showWeekNumber ? - ` -
- ${this._config.weekNumbersLabel ?? ''} -
- ` : '' + `
+ ${this._config.weekNumbersLabel ?? ''} +
` : '' } ${weekDays.map(({ date }) => ( - ` -
+ `
${typeof this._config.weekdayFormat === 'string' ? date.toLocaleDateString(this._config.locale, { weekday: this._config.weekdayFormat }) : date .toLocaleDateString(this._config.locale, { weekday: 'long' }) .slice(0, this._config.weekdayFormat)} -
- ` +
` )).join('')} - - ` : ''} - +
+
` : ''} +
${this._view === 'days' ? monthDetails.map(week => { const date = convertToDateObject( week.weekNumber === 0 ? @@ -646,8 +629,9 @@ class Calendar extends BaseComponent { this._config.selectionType ) return ( - ` ${this._config.showWeekNumber ? - `${week.weekNumber === 0 ? 53 : week.weekNumber}` : '' + `
${week.weekNumber === 0 ? 53 : week.weekNumber}
` : '' } ${week.days.map(({ date, month }) => ( month === 'current' || this._config.showAdjacementDays ? - ` -
- ${date.toLocaleDateString(this._config.locale, { day: 'numeric' })} -
- ` : - '' - )).join('')}` + ${date.toLocaleDateString(this._config.locale, { day: 'numeric' })} +
` : + '
' + )).join('')}` ) }).join('') : ''} ${this._view === 'months' ? listOfMonths.map((row, index) => ( - ` + `
${row.map((month, idx) => { const date = new Date(calendarDate.getFullYear(), (index * 3) + idx, 1) return ( - ` -
- ${month} -
- ` + ${month} +
` ) }).join('')} - ` + ` )).join('') : ''} ${this._view === 'years' ? listOfYears.map(row => ( - ` + `
${row.map(year => { const date = new Date(year, 0, 1) return ( - ` -
- ${year} -
- ` + ${year} +
` ) }).join('')} - ` + ` )).join('') : ''} - + ` calendarPanelEl.append(navigationElement, calendarTable) @@ -729,7 +710,7 @@ class Calendar extends BaseComponent { } if (this._config.showWeekNumber) { - this._element.classList.add('show-week-numbers') + this._element.classList.add(CLASS_NAME_SHOW_WEEK_NUMBERS) } for (const [index, _] of Array.from({ length: this._config.calendars }).entries()) { @@ -769,7 +750,7 @@ class Calendar extends BaseComponent { return } - const cells = SelectorEngine.find(`${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, this._element) + const cells = SelectorEngine.find(SELECTOR_CALENDAR_CELL_CLICKABLE, this._element) for (const cell of cells) { const date = new Date(Manipulator.getDataAttribute(cell, 'date')) diff --git a/scss/_calendar.scss b/scss/_calendar.scss index 984e70601..349598e06 100644 --- a/scss/_calendar.scss +++ b/scss/_calendar.scss @@ -1,5 +1,3 @@ -// stylelint-disable selector-max-class - .calendar { // scss-docs-start calendar-css-vars --#{$prefix}calendar-table-margin: #{$calendar-table-margin}; @@ -8,6 +6,7 @@ --#{$prefix}calendar-nav-border-color: #{$calendar-nav-border-color}; --#{$prefix}calendar-nav-border: #{$calendar-nav-border-width} solid var(--#{$prefix}calendar-nav-border-color); --#{$prefix}calendar-nav-date-color: #{$calendar-nav-date-color}; + --#{$prefix}calendar-nav-date-font-weight: #{$calendar-nav-date-font-weight}; --#{$prefix}calendar-nav-date-hover-color: #{$calendar-nav-date-hover-color}; --#{$prefix}calendar-nav-icon-width: #{$calendar-nav-icon-width}; --#{$prefix}calendar-nav-icon-height: #{$calendar-nav-icon-height}; @@ -17,12 +16,17 @@ --#{$prefix}calendar-nav-icon-prev: #{escape-svg($calendar-nav-icon-prev)}; --#{$prefix}calendar-nav-icon-color: #{$calendar-nav-icon-color}; --#{$prefix}calendar-nav-icon-hover-color: #{$calendar-nav-icon-hover-color}; - --#{$prefix}calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color}; + --#{$prefix}calendar-rows-gap: #{$calendar-rows-gap}; + --#{$prefix}calendar-cell-header-color: #{$calendar-cell-header-color}; + --#{$prefix}calendar-cell-header-font-weight: #{$calendar-cell-header-font-weight}; + --#{$prefix}calendar-cell-header-selected-color: #{$calendar-cell-header-selected-color}; --#{$prefix}calendar-cell-week-number-color: #{$calendar-cell-week-number-color}; + --#{$prefix}calendar-cell-week-number-font-weight: #{$calendar-cell-week-number-font-weight}; --#{$prefix}calendar-cell-hover-color: #{$calendar-cell-hover-color}; --#{$prefix}calendar-cell-hover-bg: #{$calendar-cell-hover-bg}; --#{$prefix}calendar-cell-focus-box-shadow: #{$calendar-cell-focus-box-shadow}; --#{$prefix}calendar-cell-disabled-color: #{$calendar-cell-disabled-color}; + --#{$prefix}calendar-cell-disabled-selected-color: #{$calendar-cell-disabled-selected-color}; --#{$prefix}calendar-cell-selected-color: #{$calendar-cell-selected-color}; --#{$prefix}calendar-cell-selected-bg: #{$calendar-cell-selected-bg}; --#{$prefix}calendar-cell-range-bg: #{$calendar-cell-range-bg}; @@ -34,16 +38,6 @@ font-weight: initial; - table { - width: calc(var(--#{$prefix}calendar-table-cell-size) * 7); // stylelint-disable-line function-disallowed-list - margin: var(--#{$prefix}calendar-table-margin); - - th, - td { - width: var(--#{$prefix}calendar-table-cell-size); - } - } - &.months ~ .time-picker, &.years ~ .time-picker { display: none; @@ -56,10 +50,6 @@ } } -.show-week-numbers table { - width: calc(var(--#{$prefix}calendar-table-cell-size) * 8); // stylelint-disable-line function-disallowed-list -} - .calendars { display: flex; flex-basis: min-content; @@ -81,7 +71,7 @@ text-align: center; .btn { - font-weight: 600; + font-weight: var(--#{$prefix}calendar-nav-date-font-weight); color: var(--#{$prefix}calendar-nav-date-color); &:hover { @@ -118,80 +108,95 @@ @include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-prev) no-repeat center, var(--#{$prefix}calendar-nav-icon-next) no-repeat center); } -.calendar-header-cell-inner { +.calendar-table { + width: calc(var(--#{$prefix}calendar-table-cell-size) * 7); // stylelint-disable-line function-disallowed-list + margin: var(--#{$prefix}calendar-table-margin); + + .show-week-numbers & { + width: calc(var(--#{$prefix}calendar-table-cell-size) * 8); // stylelint-disable-line function-disallowed-list + } +} + +.calendar-row-group { display: flex; - align-items: center; - justify-content: center; - height: var(--#{$prefix}calendar-table-cell-size); - font-weight: 600; - color: var(--#{$prefix}calendar-cell-header-inner-color); + flex-direction: column; + gap: var(--#{$prefix}calendar-rows-gap); } -.calendar-cell-week-number { - font-weight: 600; - color: var(--#{$prefix}calendar-cell-week-number-color); +.calendar-row-header, +.calendar-row { + display: flex; } -.calendar-cell-inner { +.calendar-cell, +.calendar-cell-week-number, +.calendar-cell-header { display: flex; + flex: 1 0 var(--#{$prefix}calendar-table-cell-size); align-items: center; justify-content: center; height: var(--#{$prefix}calendar-table-cell-size); } +.calendar-cell-header { + font-weight: var(--#{$prefix}calendar-cell-header-font-weight); + color: var(--#{$prefix}calendar-cell-header-color); +} + +.calendar-cell-week-number { + font-weight: var(--#{$prefix}calendar-cell-week-number-font-weight); + color: var(--#{$prefix}calendar-cell-week-number-color); +} + .calendar-row, .calendar-cell { - text-align: center; - - &.disabled .calendar-cell-inner, - &.next .calendar-cell-inner, - &.previous .calendar-cell-inner { + &.disabled, + &.next, + &.previous { color: var(--#{$prefix}calendar-cell-disabled-color); cursor: not-allowed; } - &.range .calendar-cell-inner { + &.range, + &.range-hover { position: relative; - &::after { + &::after, + &::before { position: absolute; + top: 0; + left: 0; width: 100%; height: 100%; content: ""; - background: var(--#{$prefix}calendar-cell-range-bg); } } - &.range-hover .calendar-cell-inner { - position: relative; - - &::before { - position: absolute; - width: 100%; - height: 100%; - content: ""; - border-top: 1px dashed var(--#{$prefix}calendar-cell-selected-bg); - border-bottom: 1px dashed var(--#{$prefix}calendar-cell-selected-bg); - @include border-radius(0); - } + &.range::after { + background: var(--#{$prefix}calendar-cell-range-bg); } - &.selected:not(th, .next, .previous) .calendar-cell-inner { + &.selected:not(.next, .previous) { color: var(--#{$prefix}calendar-cell-selected-color); background-color: var(--#{$prefix}calendar-cell-selected-bg); + @include border-radius($border-radius); } - &.today .calendar-cell-inner { + &.today { color: var(--#{$prefix}calendar-cell-today-color); } + + &:focus-visible { + outline: 0; + box-shadow: var(--#{$prefix}calendar-cell-focus-box-shadow); + @include border-radius($border-radius); + } } .calendar-cell { - padding: 1px 0; - - .calendars:not(.select-week) &:not(.disabled, .next, .previous):hover, - .calendars:not(.select-week) &.clickable:hover { - .calendar-cell-inner { + .calendars:not(.select-week) & { + &:not(.disabled, .next, .previous):hover, + &.clickable:hover { color: var(--#{$prefix}calendar-cell-hover-color); cursor: pointer; background-color: var(--#{$prefix}calendar-cell-hover-bg); @@ -199,23 +204,29 @@ } } - .calendars:not(.select-week) &.range:not(.range ~ *) .calendar-cell-inner::after { + &.range-hover::before { + border-top: 1px dashed var(--#{$prefix}calendar-cell-selected-bg); + border-bottom: 1px dashed var(--#{$prefix}calendar-cell-selected-bg); + @include border-radius(0); + } + + &.range:not(.range ~ *)::after { @include border-start-radius-flex($border-radius); } - .calendars:not(.select-week) &.range:not(:has(~ .range)) .calendar-cell-inner::after { + &.range:not(:has(~ .range))::after { @include border-end-radius-flex($border-radius); } - &.range-hover:first-of-type, + .calendar-cell-week-number + &.range-hover, &:not(.range-hover) + &.range-hover { - .calendar-cell-inner::before { + &::before { border-inline-start: 1px dashed var(--#{$prefix}calendar-cell-selected-bg); @include border-start-radius-flex($border-radius); } } - &.range-hover:not(:has(~ .range-hover)) .calendar-cell-inner::before { + &.range-hover:not(:has(~ .range-hover))::before { border-inline-end: 1px dashed var(--#{$prefix}calendar-cell-selected-bg); @include border-end-radius-flex($border-radius); } @@ -224,72 +235,50 @@ @-moz-document url-prefix() { .calendars:not(.select-week) &:nth-last-child(1 of .range), .calendars:not(.select-week) &:nth-last-child(1 of .available) { - .calendar-cell-inner::after { + &::after { @include border-end-radius-flex($border-radius); } } - &:nth-last-child(1 of .range-hover) .calendar-cell-inner::before { + &:nth-last-child(1 of .range-hover)::before { border-inline-end: 1px dashed var(--#{$prefix}calendar-cell-selected-bg); @include border-end-radius-flex($border-radius); } } +} - &.selected:not(th) .calendar-cell-inner { - @include border-radius($border-radius); - } - - .calendars:not(.select-week) &:focus-visible { - outline: 0; - - .calendar-cell-inner { - box-shadow: var(--#{$prefix}calendar-cell-focus-box-shadow); +.calendar-row { + &.range, + &.range-hover { + &::after, + &::before { @include border-radius($border-radius); } } -} -.calendar-row { - .calendars.select-week &:not(.disabled):hover, - .calendars.select-week &.clickable:hover { - .calendar-cell-inner { - color: var(--#{$prefix}calendar-cell-hover-color); - cursor: pointer; - background-color: var(--#{$prefix}calendar-cell-hover-bg); - } + &.range-hover::before { + border: 1px dashed var(--#{$prefix}calendar-cell-selected-bg); } - .selected:not(th) .calendar-cell-inner { + .calendars.select-week & { @include border-radius($border-radius); - } - .calendar-cell:first-of-type .calendar-cell-inner { - @include border-start-radius-flex($border-radius); - &::before, - &::after { - @include border-start-radius-flex($border-radius); + &:not(.disabled):hover, + &.clickable:hover { + color: var(--#{$prefix}calendar-cell-hover-color); + cursor: pointer; + background-color: var(--#{$prefix}calendar-cell-hover-bg); } } - .calendar-cell:last-of-type .calendar-cell-inner { - @include border-end-radius-flex($border-radius); - &::before, - &::after { - @include border-end-radius-flex($border-radius); + &.selected:not(:hover) { + .calendar-cell-week-number { + color: var(--#{$prefix}calendar-cell-header-selected-color); } - } - &.range-hover .calendar-cell:first-of-type .calendar-cell-inner::before { - border-inline-start: 1px dashed var(--#{$prefix}calendar-cell-selected-bg); - } - - &.range-hover .calendar-cell:last-of-type .calendar-cell-inner::before { - border-inline-end: 1px dashed var(--#{$prefix}calendar-cell-selected-bg); - } - - &:focus-visible { - outline: 0; - box-shadow: var(--#{$prefix}calendar-cell-focus-box-shadow); - @include border-radius($border-radius); + .calendar-cell.next, + .calendar-cell.previous { + color: var(--#{$prefix}calendar-cell-disabled-selected-color); + } } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 4e4f946f5..a55706fa1 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -2288,6 +2288,7 @@ $calendar-nav-padding: .5rem !default; $calendar-nav-border-width: 1px !default; $calendar-nav-border-color: var(--#{$prefix}border-color) !default; $calendar-nav-date-color: var(--#{$prefix}body-color) !default; +$calendar-nav-date-font-weight: 600 !default; $calendar-nav-date-hover-color: var(--#{$prefix}primary) !default; $calendar-nav-icon-width: 1rem !default; $calendar-nav-icon-height: 1rem !default; @@ -2299,12 +2300,19 @@ $calendar-nav-icon-double-prev: url("data:image/svg+xml,") !default; $calendar-nav-icon-prev: url("data:image/svg+xml,") !default; -$calendar-cell-header-inner-color: var(--#{$prefix}secondary-color) !default; +$calendar-rows-gap: 2px !default; + +$calendar-cell-header-color: var(--#{$prefix}secondary-color) !default; +$calendar-cell-header-font-weight: 600 !default; +$calendar-cell-header-selected-color: $white !default; + $calendar-cell-week-number-color: var(--#{$prefix}secondary-color) !default; +$calendar-cell-week-number-font-weight: 600 !default; $calendar-cell-hover-color: var(--#{$prefix}body-color) !default; $calendar-cell-hover-bg: var(--#{$prefix}tertiary-bg) !default; $calendar-cell-disabled-color: var(--#{$prefix}tertiary-color) !default; +$calendar-cell-disabled-selected-color: rgba($white, .5) !default; $calendar-cell-focus-box-shadow: $focus-ring-box-shadow !default;