nextcloud / nextcloud/calendar

Expose per-event color as a CSS custom property for all events, not only free/transparent ones

Open Beginner friendly
#8,610 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

1. to develop enhancement
Dominant language
JavaScript
Stars
1.2k
Forks
332
Avg merge
16h 13m
Merged PRs (30d)
137

Description

Is your feature request related to a problem? Please describe.

Since the design overhaul a few months ago, all-day and multi-day events in month view render with a low-alpha tinted fill (0.35 for future/current, 0.15 for past events) instead of a solid background, with only a thin left border carrying the event's full-strength color. This makes it visually difficult to distinguish events by calendar at a glance, and reduces the contrast between past and future events since both are now similarly muted. I keep looking at future events and assuming they're past events.

For example, I define a calendar and set its colour to ffb400 (rusty yellow). Past events show us as fff4d9 (pale yellow) and future events show up as ffe5a6 (well, this is another pale yellow). If I want to be sure what I'm looking at I need to
flip forward or back a month ("Ah! THIS pale yellow is paler than THAT pale yellow!").

I understand this may be a deliberate design choice, especially as other non-NC-calendar apps have made similar design choices, so I'm not asking for the default behavior to change. Instead, I'd like to request a supported way for admins to override it via Custom CSS.

The true per-event color currently only exists as that element's own inline style.borderColor, set directly by JS. I think there's no CSS-only way to reuse one property's value as another property's value on the same element, so Custom CSS can't reach it.

Describe the solution you'd like

There's already working precedent for the fix in your own codebase. For free/transparent (TRANSP) events specifically, this line:

a.style.setProperty("--nc-event-color", a.style.borderColor)

exposes the event's own color as a CSS custom property, consumed here:

border-inline-start: 1px solid var(--nc-event-color, currentColor);
border-inline-end: 1px solid var(--nc-event-color, currentColor);

Could you set --nc-event-color (or a more generically-named variable) unconditionally on every .fc-event element, not only free/transparent ones? That alone would let admins write a simple Custom CSS override like:

.fc-event:not(.fc-event-past) {
    background-color: var(--nc-event-color) !important;
}

to restore solid fills for those who find the current contrast confusing, without needing to touch app internals.

Describe alternatives you've considered

No response

Additional context

This is nextcloud 34.0.1 with calendar 6.5.1 running in Debian 13.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Locate the existing TRANSP-event handling that sets --nc-event-color from the event's inline borderColor, then trace where .fc-event elements receive their styles. Set the custom property for every event and verify that the supplied Custom CSS override can use it to restore solid fills without changing the default appearance.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.