how to get the date info by use event-render slot on month view

[litoxy]

Hi~
first apologize for my poor englist

my question is how to get the date info by use event-render slot on month view

this is my code
<vue-cal @day-focus="dayClick" > <div slot="event-renderer" slot-scope="{ event,view}"> //how to get the date info in this event ? <div class="vuecal__event-title" v-html="event.title" /> </div> </vue-cal>

[DuredhelFinceleb]

the date info should be into event.startDate and event.endDate
if you want the full date time this will be event.start and event.end (if time is false or your event is an all day one (ie event.allDay=true) then event.start/end are the same than event.startDate/endDate)
and time info is into event.startTime and event.endTime

so to display the start and end dates into your slot you would have something like this

<div class="vuecal__event-time">
      <strong>Event start:</strong> <span>{{ event.startDate }}</span><br/>
      <strong>Event end:</strong> <span>{{ event.endDate }}</span>
</div>

[DuredhelFinceleb]

note that if you have set time to false, you'll have to use an other class because vuecal__event-time won't be available. See https://antoniandre.github.io/vue-cal/#ex--custom-event-rendering

[antoniandre]

Hi @lllito,

@DuredhelFinceleb, gave a good example that you can follow. 👌

To help you out here is a Codepen with what you want: https://codepen.io/antoniandre/pen/jJbygw?editors=1010

---

To set custom event rendering please refer to this example: https://antoniandre.github.io/vue-cal/#ex--custom-event-rendering.
Now in this example, events are not displayed on month view, so you will need to add the attribute :events-on-month-view="true". Refer to this example: https://antoniandre.github.io/vue-cal/#ex--events-on-month-view

Let me know if you still need assistance.

[litoxy]

thanks so much

[antoniandre]

👌 Closing the issue then.