Callbacks

Each calendar instance has a few callbacks you can hook onto:

<template>
    <vue-scheduler
        @month-changed="monthChanged"
        @week-changed="weekChanged"
        @day-changed="dayChanged"
        @view-changed="viewChanged"
        
        @day-clicked="dayClicked"
        @time-clicked="timeClicked"
        
        @event-clicked="eventClicked"
        @event-created="eventCreated"
    >
    </vue-scheduler>
</template>
<script>
    export default {
        methods: {
          monthChanged(newDate) {
            console.log('Month Changed');
            console.log(newDate);
          },
          weekChanged(newDate) {
            console.log('Week Changed');
            console.log(newDate);
          },
          dayChanged(newDate) {
            console.log('Day Changed');
            console.log(newDate);
          },
          viewChanged(newView) {
            console.log('View Changed');
            console.log(newView);
          },
          dayClicked(date) {
            console.log('Day clicked');
            console.log(date.getDate());
          },
          timeClicked(dateWithTime) {
            console.log('Time clicked');
            console.log('Date: ' + dateWithTime.date );
            console.log('Time: ' + dateWithTime.time );
          },
          eventClicked(event) {
            console.log('Event clicked');
            console.log(event);
          },
          eventCreated(event) {
            console.log('Event created');
            console.log(event);
          },
        }
    }
</script>

View callbacks

CallbackDescriptionPayload
month-changedEmitted when the user goes from one month to another on the month view.Date object
week-changedEmitted when the user goes from one week to another on the week view.Date object
day-changedEmitted when the user goes from one day to another on the day view.Date object
view-changedEmitted when the user switches views.View name (month, week, day)

Day/Time callbacks

CallbackDescriptionPayload
day-clickedEmitted when the user on a day on the month view.Date object
time-clickedEmitted when the user on a time on the week and day views.Object containing date and time

Event callbacks

CallbackDescriptionPayload
event-clickedEmitted when the user clicks on an event on any view.Event object
event-createdEmitted when a new event is created using the Event dialog.Object containing date and time

TIP

Remember that any event created using the dialog is automatically pushed to the events array. You don't need to do this yourself, the callback is there in case you need to perform more logic with new event.