Two-Way Binding in Vue Scheduler

Two-way binding in the Vue Scheduler component can be configured using the v-model directive. The Scheduler properties that support two-way binding are:

  • selectedDate
  • currentView

Two-Way Binding with the Vue Scheduler Component’s selectedDate Property

The following example demonstrates two-way binding with the selectedDate property. When the selectedDate value changes in the Scheduler component, the value reflected in the associated DatePicker component is updated automatically, and changes in the DatePicker component propagate back to the Scheduler.

<template>
  <div id='app'>
    <div id='container'>
      <div class='date-picker-container'>
        <ejs-datepicker id='date-picker' placeholder='Selected date' floatLabelType="Always" :value='selectedDate'
          :showClearButton='false' v-model='selectedDate'>
        </ejs-datepicker>
      </div>
      <div class="schedule-container">
        <ejs-schedule :height='height' :selectedDate='selectedDate' v-model='selectedDate'
          :eventSettings='eventSettings'></ejs-schedule>
      </div>
    </div>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { DatePickerComponent as EjsDatepicker } from '@syncfusion/ej2-vue-calendars';

let currentYear = new Date().getFullYear();
let data = [{
  Id: 1,
  Subject: 'Paris',
  StartTime: new Date(currentYear, 1, 15, 10, 0),
  EndTime: new Date(currentYear, 1, 15, 12, 30),
  IsAllDay: false,
  RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=5'
}];

const height = '550px';
const views = ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'];
const eventSettings = {
  dataSource: data
};
const selectedDate = new Date(currentYear, 1, 15);

provide('schedule', [Day, Week, WorkWeek, Month, Agenda]);

</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css';

.date-picker-container {
  width: 20%;
  margin: auto;
}
</style>
<template>
  <div id='app'>
    <div id='container'>
      <div class='date-picker-container'>
        <ejs-datepicker id='date-picker' placeholder='Selected date' floatLabelType="Always" :value='selectedDate'
          :showClearButton='false' v-model='selectedDate'>
        </ejs-datepicker>
      </div>
      <div class="schedule-container">
        <ejs-schedule :height='height' :selectedDate='selectedDate' v-model='selectedDate'
          :eventSettings='eventSettings'></ejs-schedule>
      </div>
    </div>
  </div>
</template>

<script>
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { DatePickerComponent } from '@syncfusion/ej2-vue-calendars';

let currentYear = new Date().getFullYear();
let data = [{
  Id: 1,
  Subject: 'Paris',
  StartTime: new Date(currentYear, 1, 15, 10, 0),
  EndTime: new Date(currentYear, 1, 15, 12, 30),
  IsAllDay: false,
  RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=5'
}];

export default {
  name: "App",
  components: {
    "ejs-datepicker": DatePickerComponent,
    "ejs-schedule": ScheduleComponent
  },
  data() {
    return {
      height: '550px',
      views: ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'],
      eventSettings: {
        dataSource: data
      },
      selectedDate: new Date(currentYear, 1, 15),
    }
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda]
  }
}

</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css';

.date-picker-container {
  width: 20%;
  margin: auto;
}
</style>

Two-Way Binding with the Vue Scheduler Component’s currentView Property

In the following example, when you change the currentView value in the Vue Scheduler component, v-model automatically updates the value in the Dropdown component, and changes in the Dropdown component automatically update the value in the Vue Scheduler.

The following example demonstrates how to set two-way binding with the currentView property in the Vue Scheduler.

<template>
  <div id='app'>
    <div id='container'>
      <div class='drop-down-container'>
        <ejs-dropdownlist id='current-view-drop-down' placeholder="Current view" floatLabelType="Always"
          :dataSource='views' :value='currentView' v-model="currentView">
        </ejs-dropdownlist>
      </div>
      <div class="schedule-container">
        <ejs-schedule :height='height' :selectedDate='selectedDate' :currentView='currentView' v-model='currentView'
          :eventSettings='eventSettings'></ejs-schedule>
      </div>
    </div>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { DropDownListComponent as EjsDropdownlist } from '@syncfusion/ej2-vue-dropdowns';

let currentYear = new Date().getFullYear();
let data = [{
  Id: 1,
  Subject: 'Paris',
  StartTime: new Date(currentYear, 1, 15, 10, 0),
  EndTime: new Date(currentYear, 1, 15, 12, 30),
  IsAllDay: false,
  RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=5'
}];

const height = '550px';
const currentView = 'Week';
const views = ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'];
const eventSettings = {
  dataSource: data
};
const selectedDate = new Date(currentYear, 1, 15);

provide('schedule', [Day, Week, WorkWeek, Month, Agenda]);

</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css';

.drop-down-container {
  width: 20%;
  margin: auto;
}
</style>
<template>
  <div id='app'>
    <div id='container'>
      <div class='drop-down-container'>
        <ejs-dropdownlist id='current-view-drop-down' placeholder="Current view" floatLabelType="Always"
          :dataSource='views' :value='currentView' v-model="currentView">
        </ejs-dropdownlist>
      </div>
      <div class="schedule-container">
        <ejs-schedule :height='height' :selectedDate='selectedDate' :currentView='currentView' v-model='currentView'
          :eventSettings='eventSettings'></ejs-schedule>
      </div>
    </div>
  </div>
</template>

<script>
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { DropDownListComponent } from '@syncfusion/ej2-vue-dropdowns';

let currentYear = new Date().getFullYear();
let data = [{
  Id: 1,
  Subject: 'Paris',
  StartTime: new Date(currentYear, 1, 15, 10, 0),
  EndTime: new Date(currentYear, 1, 15, 12, 30),
  IsAllDay: false,
  RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=5'
}];

export default {
  name: "App",
  components: {
    "ejs-dropdownlist": DropDownListComponent,
    "ejs-schedule": ScheduleComponent
  },
  data() {
    return {
      height: '550px',
      currentView: 'Week',
      views: ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'],
      eventSettings: {
        dataSource: data
      },
      selectedDate: new Date(currentYear, 1, 15),
    }
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda]
  }
}

</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css';

.drop-down-container {
  width: 20%;
  margin: auto;
}
</style>

Refer to the Vue Scheduler feature tour page for detailed overviews, and explore the Vue Scheduler example for demonstrations on presenting and managing data.