Can I just change background color for the empty calendar day in the dbr.calendar?
Can I just change background color for the empty calendar day in the dbr.calendar?
(8 posts) (2 voices)-
-
You can set the background color for the day with CSS. If you want to change background color for only the empty days, you will need to use JavaScript to determine empty days.
--
myDBR Team -
Can you show me sample code for both? Thanks
-
You can do:
select 'dbr.css', '
.fc-daygrid-day {background:yellow}
.fc-daygrid-day:has(.fc-daygrid-day-frame>.fc-daygrid-day-events>.fc-daygrid-event-harness) {background:white}';
The support for :has pseudo-class varies between browsers (Firefox).
--
myDBR Team -
Thanks.
1. Like for your sample code above, for those days with event, background with yellow color will be shown, otherwise white will be shown. However I think for current day, there is a default light yellow background color, can remove that and follow the same rule too?
2. When trying to export to PDF, those days with event will also have yellow color background, can show the same like on screen before export to pdf? -
1. Like for your sample code above, for those days with event, background with yellow color will be shown, otherwise white will be shown. However I think for current day, there is a default light yellow background color, can remove that and follow the same rule too?
You can override the CSS rule of the current date with your own.
2. When trying to export to PDF, those days with event will also have yellow color background, can show the same like on screen before export to pdf
wkhtmltopdf's CSS engine does not support the :has pseudo-class. You can use browser's PDF printing or use JavaScript instead to set the color.
--
myDBR Team -
Can you show me sample code for above 2? Thanks
-
Use the browser's PDF export if you want to save the calendar as PDF.
In order to day coloring you have to do it yourself. It is not a feature of the FullCalendar (that myDBR uses) and hence it is not a feature in myDBR's implementation.
Do do the day coloring, you need to access the FullCalendar API (getEvents())), determine the event timespans and color the days accordingly using JavaScript.
--
myDBR Team
Reply
You must log in to post.