Stretch VCalendar events to the edge of the cell?

[mtt145]

Hello, is there an option to make VCalendar events stretch to the edge of the cell and fill the remaining space?

I noticed that their width is systematically reduced by 5%.

[mg1986jp]

That 5% width reduction is hardcoded in the VCalendar event rendering — it's there so overlapping events don't completely cover each other. There's no prop to disable it.

You can override it with CSS though:

.v-calendar .v-calendar-day__event {
  width: 100% !important;
  margin-right: 0 !important;
}

If you're using scoped styles in a Vue SFC, you'll need :deep():

<style scoped>
:deep(.v-calendar-day__event) {
  width: 100% !important;
  margin-right: 0 !important;
}
</style>

Just keep in mind that if you have overlapping events on the same time slot, they'll stack on top of each other instead of sitting side by side.

[mtt145]

width: 100% would only work for one-day events