Event not taking full height

1. First, check if you use the correct value for the useEventBoxes property (see Exact Event Duration in the docs). The default value ("Always") aligns the event boxes with the grid cells.

2. It could also be a CSS issue (when using a custom CSS theme). The event consists of two nested <div> elements, marked with the following CSS classes:

• calendar_default_event

• calendar_default_event_inner

The position of the outer <div> (marked with calendar_default_event) is calculated based on the start and end times. I recommend using the browser developer tools to inspect the actual styles. Ensure that you don’t inadvertently introduce extra padding or similar alterations to the outer or inner <div>.

ok but now everything seems stuck what can i do?

There are a couple of options for arranging concurrent events. You can try playing with different modes to see how they work for you.

Nope, they still look identical. I need them to take full height but not full width

I’m not sure if this is what you mean, but if you want to avoid visually blending the events together, you would need to add a border (it could be white) to the event's CSS or using onBeforeEventRender.

onBeforeEventRender: args => {
  args.data.borderColor = "white";
}

> Nope, they still look identical. I need them to take full height but not full width

This is what my previous comment about arranging concurrent events was about. This lets you control the event width in case that they are overlapping. There are a few choices, from full column width, to partial overlap, and no overlap.

I’m sorry, your comments are very terse and it’s difficult to guess what you mean.

If this is not what you are looking for, can you please post a screenshot and highlight your problem in there?