diff --git a/css/fullcalendar.scss b/css/fullcalendar.scss index 9f25e91a09..4b16eb2054 100644 --- a/css/fullcalendar.scss +++ b/css/fullcalendar.scss @@ -94,6 +94,9 @@ /* https://developer.mozilla.org/en-US/docs/Web/CSS/word-break */ /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */ word-break: break-word; + .fc-view:not(.fc-dayGridMonth-view):not(.fc-multiMonthYear-view) & { + padding-left: 20px; + } } // Prevent events overlapping over day header @@ -195,17 +198,39 @@ // Reminder icon on events with alarms set .fc-event-nc-alarms { + .fc-event-main-frame { + width: calc(100% - 15px); + margin-left: 15px; + } .icon-event-reminder { - background-color: inherit; - background-position: right; position: absolute; - top: 0; - inset-inline-end: 0; - &--light { - background-image: var(--icon-calendar-reminder-fffffe) + top: 2px; + left: 0; + display: inline-block; + min-width: 14px; + min-height: 14px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + vertical-align: middle; + body[data-themes^="light"] & { + background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 21H14C14 22.1 13.1 23 12 23S10 22.1 10 21M21 19V20H3V19L5 17V11C5 7.9 7 5.2 10 4.3V4C10 2.9 10.9 2 12 2S14 2.9 14 4V4.3C17 5.2 19 7.9 19 11V17L21 19M17 11C17 8.2 14.8 6 12 6S7 8.2 7 11V18H17V11Z'/%3E%3C/svg%3E"); + } + body[data-themes^="dark"] & { + background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M10 21H14C14 22.1 13.1 23 12 23S10 22.1 10 21M21 19V20H3V19L5 17V11C5 7.9 7 5.2 10 4.3V4C10 2.9 10.9 2 12 2S14 2.9 14 4V4.3C17 5.2 19 7.9 19 11V17L21 19M17 11C17 8.2 14.8 6 12 6S7 8.2 7 11V18H17V11Z'/%3E%3C/svg%3E"); } - &--dark { - background-image: var(--icon-calendar-reminder-000001) + body[data-themes^="default"] & { + @media (prefers-color-scheme: dark) { + background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M10 21H14C14 22.1 13.1 23 12 23S10 22.1 10 21M21 19V20H3V19L5 17V11C5 7.9 7 5.2 10 4.3V4C10 2.9 10.9 2 12 2S14 2.9 14 4V4.3C17 5.2 19 7.9 19 11V17L21 19M17 11C17 8.2 14.8 6 12 6S7 8.2 7 11V18H17V11Z'/%3E%3C/svg%3E"); + } + @media (prefers-color-scheme: light) { + background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 21H14C14 22.1 13.1 23 12 23S10 22.1 10 21M21 19V20H3V19L5 17V11C5 7.9 7 5.2 10 4.3V4C10 2.9 10.9 2 12 2S14 2.9 14 4V4.3C17 5.2 19 7.9 19 11V17L21 19M17 11C17 8.2 14.8 6 12 6S7 8.2 7 11V18H17V11Z'/%3E%3C/svg%3E"); + } + } + } + &.fc-daygrid-event .icon-event-reminder { + .fc-view:not(.fc-dayGridMonth-view):not(.fc-multiMonthYear-view) & { + top: 3px; } } } diff --git a/src/fullcalendar/rendering/eventDidMount.js b/src/fullcalendar/rendering/eventDidMount.js index 49928ed6db..4488b348ae 100644 --- a/src/fullcalendar/rendering/eventDidMount.js +++ b/src/fullcalendar/rendering/eventDidMount.js @@ -16,11 +16,6 @@ export default errorCatch(function({ event, el }) { if (el.classList.contains('fc-event-nc-alarms')) { const notificationIcon = document.createElement('span') notificationIcon.classList.add('icon-event-reminder') - if (event.extendedProps.darkText) { - notificationIcon.classList.add('icon-event-reminder--dark') - } else { - notificationIcon.classList.add('icon-event-reminder--light') - } el.firstChild.appendChild(notificationIcon) }