Private customizations

🍱 Features & apps 📆 Calendar
,
1

I have a couple of private customizations that makes the calendar display a bit more to my liking. For this I have to tweak the css in the js/calendar.js file. This is tedious and error prone.
I can build the calendar app from the git sources, but I have not been able to find where in the sources my modifications must be applied.

For example, div class fc-daygrid-event-dot. There is a css setting in js/calendar.js:

.fc-daygrid-event-dot { /* the actual dot */
  margin: 0 4px;
  ...
}

but I can’t find where this comes from. A grep on fc-daygrid-event-dot in all calendar sources gives no clues.

Any helpful pointers?

2

Did you have a look at the “Custom CSS” app? I think you could put your modifications there without changing the files in the calendar app and loosing all changes on every update

1 Like
3

Yes, I use it to override some of the global settings.

But almost all style settings of the calendar elements are inline in the (generated) html/javascript and cannot be overridden this way.

4

Are you sure? Did you try to give it an !important

1 Like
5

I always felt using !important is very risky… but so is patching compiled javascript.

I gave it a try and it seems to work! Great suggestion!

(Nevertheless the question is still: where does that CSS come from…)