Fullcalendar How to remove padding from events in timegridview?

Question

I need to remove the padding from the events when the calendar is in a "timegridview". My users click on the white space created, allowing them to avoid the time period they should be blocked for.

I have set it up to show the event details when the event is clicked.

For example, if I have an event from 11am to noon that is blocked for "Lunch", the user will click on a blank space and the schedule dialog will pop up.

I've tried this CSS snippet and it handles the left and right spacing, but I can't control the top/bottom.

.fc-timegrid-event-harness-inset {
        left: -8% !important;
        right: -8% !important;
        
    }

Answer 1

Have you tried it

padding: 0 !important;

Or use calc to set the width and height. For example:

width: calc(100% + 8%);