# scheduler-default

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

**Framework:** react  **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/react/js/scheduler-default.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-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.jsx

```jsx
import { useEffect, useState, useRef } from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';
import { extend } from '@syncfusion/ej2-base';
/**
 * Schedule Default sample
 */
const eventData = [
  { Id: 1, Subject: 'Explosion of Betelgeuse Star', Location: 'Space Center USA', StartTime: '2021-01-10T04:00:00.000Z', EndTime: '2021-01-10T05:30:00.000Z', CategoryColor: '#1aaa55' },
    { Id: 2, Subject: 'Thule Air Crash Report', Location: 'Newyork City', StartTime: '2021-01-11T06:30:00.000Z', EndTime: '2021-01-11T08:30:00.000Z', CategoryColor: '#357cd2' },
    { Id: 3, Subject: 'Blue Moon Eclipse', Location: 'Space Center USA', StartTime: '2021-01-12T04:00:00.000Z', EndTime: '2021-01-12T05:30:00.000Z', CategoryColor: '#7fa900' },
    { Id: 4, Subject: 'Meteor Showers in 2021', Location: 'Space Center USA', StartTime: '2021-01-13T07:30:00.000Z', EndTime: '2021-01-13T09:00:00.000Z', CategoryColor: '#ea7a57' },
    { Id: 5, Subject: 'Milky Way as Melting pot', Location: 'Space Center USA', StartTime: '2021-01-14T06:30:00.000Z', EndTime: '2021-01-14T08:30:00.000Z', CategoryColor: '#00bdae' },
    { Id: 6, Subject: 'Mysteries of Bermuda Triangle', Location: 'Bermuda', StartTime: '2021-01-14T04:00:00.000Z', EndTime: '2021-01-14T05:30:00.000Z', CategoryColor: '#f57f17' },
    { Id: 7, Subject: 'Glaciers and Snowflakes', Location: 'Himalayas', StartTime: '2021-01-15T05:30:00.000Z', EndTime: '2021-01-15T07:00:00.000Z', CategoryColor: '#1aaa55' },
    { Id: 8, Subject: 'Life on Mars', Location: 'Space Center USA', StartTime: '2021-01-16T03:30:00.000Z', EndTime: '2021-01-16T04:30:00.000Z', CategoryColor: '#357cd2' },
    { Id: 9, Subject: 'Alien Civilization', Location: 'Space Center USA', StartTime: '2021-01-18T05:30:00.000Z', EndTime: '2021-01-18T07:30:00.000Z', CategoryColor: '#7fa900' },
    { Id: 10, Subject: 'Wildlife Galleries', Location: 'Africa', StartTime: '2021-01-20T05:30:00.000Z', EndTime: '2021-01-20T07:30:00.000Z', CategoryColor: '#ea7a57' }];

    const Default = () => {
    const scheduleObj = useRef(null);
    const data = extend([], eventData, null, true);
    const [selectedDate] = useState(new Date(2021, 0, 10));
    const onDragStart = (args) => {
        args.navigation.enable = true;
    };
    return (<div className='schedule-control-section'>
      <div className='col-lg-9 control-section'>
        <div className='control-wrapper'>
          <ScheduleComponent height='650px' ref={scheduleObj} selectedDate={selectedDate} eventSettings={{ dataSource: data }} dragStart={(onDragStart)}>
            <ViewsDirective>
              <ViewDirective option='Day'/>
              <ViewDirective option='Week'/>
              <ViewDirective option='WorkWeek'/>
              <ViewDirective option='Month'/>
              <ViewDirective option='Agenda'/>
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]}/>
          </ScheduleComponent>
        </div>
      </div>
    </div>);
};
export default Default;
```