Event Spacing

By default, the JavaScript Scheduler displays events without any vertical spacing between them.

There are a couple of options available to add this spacing:

Bottom Margin

You can introduce a custom margin at the bottom of every event using the eventMarginBottom property. This space will be outside the event box itself.

Here’s an example of how to configure it in the Scheduler:

{
  eventMarginBottom: 5,
  // ...
}

CSS Adjustment

While the position and dimensions of the Scheduler's event box (marked with the *_event class) are fixed, you can adjust the inner div (*_event_inner class). This method adds space that is considered part of the event box.

For example:

.scheduler_default_event_inner {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 5px; /* increase the space at the bottom */
  ...
}