Two‑Way Binding in Vue Schedule Component

3 Jul 202612 minutes to read

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

selectedDate
currentView

Two-Way Binding With Vue Schedule Component’s selectedDate Property

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

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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 Vue Schedule Component’s currentView Property

In the following example, when you change the currentDate value in the Vue Scheduler component, v-model will automatically update the value in the Dropdown component, and if you change the value in the Dropdown component, it will automatically update the value in the Vue Scheduler.

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

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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 feature overviews, and explore the Vue Scheduler example for demonstrations on presenting and managing data.

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Two‑Way Binding in Vue Schedule Component

Two-Way Binding With Vue Schedule Component’s selectedDate Property

Two‑Way Binding With Vue Schedule Component’s currentView Property