By default, the event boxes are aligned with the grid (useBoxes="Always", see also https://doc.daypilot.org/calendar/exact-event-duration/).
The duration bar is filled with the lighter color. The darker color highlights the real event duration.
That means if the event start and/or end don't match the cells part of the light background will be visible.
There are several ways to avoid that:
- modify the css theme (set the duration bar background color to the same color - use https://themes.daypilot.org to generate a custom theme)
- set the useEventBoxes property to "Never" - this will affect the event box size (it will shrink to match the real duration)
You can also customize the bar color and bar background color per event using onBeforeEventRender (https://doc.daypilot.org/calendar/event-customization/). Use args.data.barColor and args.data.barBackColor.