Question 186984 in Html Question posted in
Some basic documentation can be found here.

Html – Fullcalendar how to remove padding from events in timegridview?

I need to remove the padding from an event when the calendar is in ‘timegridview’. My users are clicking in the empty space created, allowing them to get around a time slot that should be blocked.

I have it set so that on event click, it shows the event details.

For example, if I have an event from 11am to noon blocked for ‘Lunch’, users are clicking in the empty space which then brings up the scheduling dialog.

enter image description here

I’ve tried this CSS snippet which takes care of the spacing on the left and right, but I can’t top/bottom.

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've isolated the responsible CSS. Overriding .fc-event adjusts the padding

    Default:

     .fc-event {
    border-radius: 2px;
    border: none;
    cursor: move;
    font-size: .8125rem;
    margin: 5px 7px;
    padding: 5px 5px;
    text-align: center;
    color: #fff;
}

    Override:

    .fc-event {
    margin:0 !important;
    padding:0 !important;
}

  2. 0

    Did you try

    padding: 0 !important;

    Or setting up width and height with calc. For example:

    width: calc(100% + 8%);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search