Scheduler Monthly View - Move The Event

[Borko]

Hey! We're trying to display events on the Scheduler Monthly view, but we cannot move it so we can see which day of the month it actually is.

We've tried editing the margins of the SchedulerViewItem and that works, however, then we have a gap between each one of the events of the calendar, but we'd like just the first event to move down, just so we can see which day of the month it actually is.

 

Thanks!

[Filip]

Hi, Borko,

I tested one of our examples that showcases the Month view and it  seems that it is visible on which day of the month each event is, manually moving the event should not be necessary:

https://stackblitz.com/edit/cxkln8?file=src%2Fmain.vue

Can you please modify the sample so that the issue with the visibility reproduces? This will enable me to investigate why the event is not clearly shown on the day of the month and look for a potential solution.

Regards,
Filip

[MILAN]

Hello, I am on the same team as Borko. We managed to solve the problem by using <SchedulerSlot> component withing the slotRenderer slot, and setting the date label to bottom left corner of the slot. Now the events are not overlapping the date labels. Here is the code:

<template v-slot:slotRender="{ props }">
            <SchedulerSlot
              v-bind="props"
              :nav-day="false"
              :style="{ position: 'relative', minHeight: '230px' }"
              ><div style="position: absolute; bottom: -2px; left: 0">
                {{ props.start.getDate() }}
              </div>
            </SchedulerSlot>
          </template>

@Filip  Thank you for your answer. In your example there is still a problem with events overlapping the date labels:

[Filip]

Hello, Milan,

I am glad that you have managed to solve the encountered issue and thank you for the provided code. 

Please do not hesitate to reach out to us again in case further assistance is required.

Regards,
Filip