452030 - Allow styling day boxes depending on contained events

Status: NEW

(Calendar :: Calendar Frontend, enhancement)

Description

[Heribert Wettels]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1
Build Identifier: 0.9pre

Holiday calendars are readily available for subscription. But in the various calendar views they are sometimes hard to distinguish from manually scheduled appointments. Also a holiday as an all-day event does not necessarily mean that the user is unavailable on that day when not in a business context.

So I suggest an option to mark one (or more) calendars as "holiday calendars" and display the events in that calendar in a different way (red day number, unboxed description, maybe a special background color; see screenshot).

Reproducible: Always

Comment 1

[Heribert Wettels]

Attachment: Screenshot of proposed display of holidays

Comment 2

[Heribert Wettels]

Attachment: Screenshot of alternate proposal using a red bar

Comment 3

[Bas van den Bosch]

When subscribing to holiday-files (either with opening a local file or subscriobing to remote location) you can pick a calendar-color so it's obvious which events are holiday-events. Also, you can set teh color of the holiday-categorie and set every event (sorry, no UI for setting categories for multiple items at once yet) to the catgeorie holidays. 

Furthermore, it should be possible to set the background of a category to transparant afaik (see bug 202360 for directions). So this is WFM?

Comment 4

[Simon Paquet [:sipaq]]

Bas is right, this all already possible with the use of either a "holiday" category or the use of a dedicated calendar just for holidays to which you assign a color of your choosing.

--> INVALID (not a bug)

Comment 5

[Decathlon]

Now I'm not sure to understand about bug 2002360. Its philosophy should be about view-representation of events (and tasks)  relate to their properties like calendars, categories, alarms, priority etc.

It should be impossible to relate calendar-view items, like .calendar-month-day-box-date-label (for background-color or day-numbers color), with calendars and categories. I'm wrong?

In the  first attachment is showed a red day-number for a day with is an event with calendar (or category) "holiday". With fixed bug 2002360 we can easily change background color for the event but how can we change the day-number color?

The following code (or similar) doesn't work:

.calendar-month-day-box-date-label[calendar="Holiday"]{
    color: red !important;
}

because calendar-month-day-box-date-label isn't a class of an event-box-container. Is it right?

Comment 6

[Decathlon]

Sorry for bug number, obviously I was talking about bug 202360.

Comment 7

[Philipp Kewisch [:Fallen][📱📆]]

Sorry, I guess your bug was misunderstood. I didn't find any possible CSS rules 

Possible solution:

when layouting the day boxes, accumulate all calendars and set attributes on the day box. This could possibly be done with other attributes of the events, but I'm not sure how useful that would be.

This means with an attribute like

<calendar-month-day-box containsItemCalendar="Home Holiday Work"/>

you could create a rule like:

calendar-moth-day-box[containsItemCalendar~="Holiday"] > label {
    color: red;
    font-weight: bold;
}

or:

calendar-moth-day-box[containsItemCalendar~="Holiday"] > label {
    background-color: #EEB3B3;
}


This should be fairly easy to fix. Decathlon, would you be interested in fixing this yourself?

I could imagine multiple implementations. Either just use a hash object to remember the calendar names and then at the end of each day iterate over the object and add all those names into an attribute,

or use an array to save the calendar names, but also use a hash object to remember if you've already added the calendar name to the array (improves performance since you don't need an extra iteration at the end of each day to compile the attribute string.

The latter solution might be a bit strange to read (multiple variables for the same thing), but since the views are very delicate regarding performance, we might want to consider it.

Comment 8

[Philipp Kewisch [:Fallen][📱📆]]

That should read:

I didn't find any possible CSS rules that allow styling a node based on its contained children (the other way around works fine, obviously), so we'll have to change some code to take care.

Comment 9

[Preeti[:preeti]]

Hello everyone! I am  a  newbie to bugzilla and am also a beginner in JavaScript.In case no one is  working on this bug, may I please work on it? It would be great if someone please describes the workflow. Thanks in advance!

Comment 10

[belikerishabh]

Hey, I want to work on this i am a beginner.

Comment 11

[u669947]

Hello, can I work on this issue?

Comment 12

[u675518]

Hey I am new to opensource and bugzilla too. I want to make my first contribution. Can I work on this?

Comment 13

[Falguni Islam]

Hello, I am new to contributing to Bugzilla can you assigned me to this issue so that I can learn to fix these bugs and also suggest to me how can Is start working on this bug to fix it.

Comment 14

[marietta]

Hello! I'm a bugzilla newbie. Please, I'll love to work on this bug

Comment 15

[Kian]

Marietta,
I am not a code reviewer or mentor, nor can I assign bugs. But in case it helps, generally you attempt a patch first, and then the phabricator bot will automatically assign you the bug.
best,
Kian

Comment 16

[pavansaichennupati]

(In reply to belikerishabh from comment #10)

Hey, I want to work on this i am a beginner.

Hello! I'm a beginner. Can someone help me on how to work on this

Comment 17

[Professor Stoked]

Hi, I work professionaly as a frontend-developer. I have some time to spare and can help out here. I have the codebase, built the project and am up and running so to speak.

I run the ".mach run" and have the "Nightly"-app up and running. But where is this calendar? Where are the related files/folders for the app/part of the project. The documentation is way too overwhelming so someone has to point me in some direction please.

Comment 18

[Professor Stoked]

I've found where the css is applied and I think I know how to solve the issue. If noone else is working on it right now, I could continue and solving the issue.

PS. How do I edit my previous comment?