Skip to content

fix(css): bring back reminder bell #8328

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Jerome-Herbinet wants to merge 1 commit into
base: main
Choose a base branch
from
+33 −13
Open

fix(css): bring back reminder bell #8328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 33 additions & 8 deletions css/fullcalendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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"] & {
Copy link
Copy Markdown
Contributor

@SebastianKrupinski SebastianKrupinski May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't embed images in to the css like this.

Copy link
Copy Markdown
Member Author

@Jerome-Herbinet Jerome-Herbinet May 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, can you tell me how I can get the bell properly ?

Copy link
Copy Markdown
Member Author

@Jerome-Herbinet Jerome-Herbinet May 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What method / syntax ?

Copy link
Copy Markdown
Member Author

@Jerome-Herbinet Jerome-Herbinet May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SebastianKrupinski my goal is to dynamically change the color of the icon ; if it's not possible, tell where to insert it in the HTML code with the right syntax and then, we'll target it for color changing with different CSS properties.

Copy link
Copy Markdown
Contributor

@SebastianKrupinski SebastianKrupinski May 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That code lives in the full calendar event sources / mount

Here is a recent PR that altered the colors, and design

https://github.com/nextcloud/calendar/pull/8149/changes

Those are the files that control the look and display of the events

Copy link
Copy Markdown
Member Author

@Jerome-Herbinet Jerome-Herbinet May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Honestly, I'm going to need some help. Could someone handle the icon call properly while I take care of the CSS part?

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;
}
}
}
Expand Down
5 changes: 0 additions & 5 deletions src/fullcalendar/rendering/eventDidMount.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}

Expand Down
Loading