Can I just change background color for the empty calendar day in the dbr.calendar?

(8 posts) (2 voices)

Tags:

No tags yet.

  1. jasmondluk, Member

    Can I just change background color for the empty calendar day in the dbr.calendar?

  2. myDBR Team, Key Master

    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

  3. jasmondluk, Member

    Can you show me sample code for both? Thanks

  4. myDBR Team, Key Master

    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

  5. jasmondluk, Member

    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?

  6. myDBR Team, Key Master

    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

  7. jasmondluk, Member

    Can you show me sample code for above 2? Thanks

  8. myDBR Team, Key Master

    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.