# scheduler-default

> Scheduler with day, week, work week, month, agenda, resizing, and drag-and-drop events.

**Framework:** vue  **Component:** Scheduler  **Variant:** default

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/vue/scheduler-default.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-calendars @syncfusion/ej2-vue-schedule
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/scheduler-default/Scheduler.vue

```vue
<template>
    <div class="schedule-vue-sample">
        <div class="col-md-9 control-section">
            <div class="content-wrapper">
                <ejs-schedule height="650px" :selectedDate='selectedDate' :eventSettings='eventSettings'></ejs-schedule>
            </div>
        </div>
        <div class="col-lg-3 property-section">
            <table id="property" title="Properties" style="width: 100%">
                <tbody>
                    <tr style="height: 50px">
                        <td style="width: 100%;">
                            <div>
                                <ejs-datepicker id='datepicker' :value='selectedDate' :showClearButton='false' :change='onDateChange'
                                placeholder="Current Date" floatLabelType="Always"></ejs-datepicker>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script>
    import { extend } from '@syncfusion/ej2-base';
    import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule";
    import { DatePickerComponent } from '@syncfusion/ej2-vue-calendars';

    const scheduleData = [
    {
        Id: 1,
        Subject: 'Explosion of Betelgeuse Star',
        Location: 'Space Centre USA',
        StartTime: new Date(2021, 0, 10, 9, 30),
        EndTime: new Date(2021, 0, 10, 11, 0),
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Thule Air Crash Report',
        Location: 'Newyork City',
        StartTime: new Date(2021, 0, 11, 12, 0),
        EndTime: new Date(2021, 0, 11, 14, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Blue Moon Eclipse',
        Location: 'Space Centre USA',
        StartTime: new Date(2021, 0, 12, 9, 30),
        EndTime: new Date(2021, 0, 12, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'Meteor Showers in 2021',
        Location: 'Space Centre USA',
        StartTime: new Date(2021, 0, 13, 13, 0),
        EndTime: new Date(2021, 0, 13, 14, 30),
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'Milky Way as Melting pot',
        Location: 'Space Centre USA',
        StartTime: new Date(2021, 0, 14, 12, 0),
        EndTime: new Date(2021, 0, 14, 14, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Mysteries of Bermuda Triangle',
        Location: 'Bermuda',
        StartTime: new Date(2021, 0, 14, 9, 30),
        EndTime: new Date(2021, 0, 14, 11, 0),
        CategoryColor: '#f57f17'
    }
];
    
    export default {
        components: {
          'ejs-schedule': ScheduleComponent,
          'ejs-datepicker': DatePickerComponent
        },
        data: function () {
            return {
                eventSettings: { dataSource: extend([], scheduleData, null, true) },
                selectedDate: new Date(2021, 0, 10)
            }
        },
        provide: {
            schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
        },
        methods: {
            onDateChange: function (args) {
                this.selectedDate = args.value;
            }
        }
    }

</script>
```

### src/components/scheduler-default/SchedulerView.vue

```vue
<template>
  <Scheduler />
</template>

<script setup>
import Scheduler from '../../components/Scheduler.vue'
</script>
```