# scheduler-default

> Feature-rich scheduler with multi-view switching, drag-resize, and event editor.

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

**Install Package(s)**

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

```html
<div class="col-lg-9 control-section">
    <div class="content-wrapper">
        <div id="Schedule">
        </div>
    </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>
                        <input type="text" id="scheduledate" />
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<div id="action-description">
    <p>This demo showcases how the flat Scheduler looks like with its default set of minimal configurations. Here, some of the
        documentary shows are displayed as events parallel to its relevant telecast timings. The show names are given as
        event's subject and simply notified of the start and end of it.</p>
</div>

<div id="description">
    <p>
        The JavaScript Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users
        to manage their time efficiently. It features easy resource scheduling, appointments rescheduling through
        editor pop-ups, drag and drop, and a resizing action. It includes wide variety of view modes with unique
        configuration options for each view. The available view modes are listed below, out of which the <code>Week</code>
        view is set as active.
    </p>
    <ul>
        <li>Day</li>
        <li>Week</li>
        <li>Work Week</li>
        <li>Month</li>
        <li>Agenda</li>
        <li>Month Agenda</li>
        <li>Timeline Day</li>
        <li>Timeline Week</li>
        <li>Timeline Work Week</li>
        <li>Timeline Month</li>
    </ul>
    <p>To navigate between views and dates, the navigation options are available at the Scheduler header bar and the
        active view option is highlighted by default. The date range of the active view will also be displayed in the
        header bar, clicking on which will open a calendar popup for ease of desired date selection.</p>
    <p>
        <strong>Touch actions on Mobile mode</strong>
    </p>
    <table style="width:100%">
        <tr>
            <th style="width:100px">
                <strong>Action</strong>
            </th>
            <th>
                <strong>Description</strong>
            </th>
        </tr>
        <tr>
            <td style="vertical-align: top;padding:4px 0">Single Tap</td>
            <td>
                <ol style="padding-left:12px;">
                    <li>Single tapping on events, opens the popup showing event information</li>
                    <li>Single tapping on cells, will display a “+” icon on the cell. Again tapping on it will open the
                        new event editor.
                    </li>
                </ol>
            </td>
        </tr>
        <tr>
            <td style="vertical-align: top;padding: 4px 0;">Tap hold </td>
            <td>
                <ol style="padding-left:12px;">
                    <li>Tap holding on events, opens a small popup at the top holding the options to edit or delete and
                        also displays the selected event's subject. As a continuation of this action, if user keeps on
                        single tapping on other events, it will allow the multiple event selection. Also, the previous
                        popup remains in opened state, showing the count of the number of events selected. </li>
                    <li>Tap holding the events will also open the tooltip on Scheduler.
                    </li>
                    <li>Tap hold the event and try moving it over the scheduler to enable drag and drop action.</li>
                </ol>
            </td>
        </tr>
    </table>
    <p>
        <strong>Module Injection</strong>
    </p>
    <p>The key Scheduler functionalities are maintained as individual feature-wise modules. Therefore to avail with a
        particular feature, appropriate module needs to be injected using <code>Schedule.Inject()</code> method. For
        example, to work with the day view on Scheduler – it is necessary to inject the Day module like <code>Schedule.Inject(Day)</code>.
    </p>
    <p>
        <strong> Note:</strong>In case, if the module of active view is not injected from the application end – then
        the Scheduler is configured to display the first available option in the <code>views</code> property.
    </p>
    <p>Looking for the full JavaScript Scheduler component overview, features, pricing, and documentation? Visit our <a href="https://www.syncfusion.com/scheduler-sdk/javascript-scheduler">JavaScript Scheduler</a> page.</p>
</div>
```

### src/components/scheduler-default/default.ts

```typescript
import { loadCultureFiles } from '../common/culture-loader';
import { DatePicker, ChangeEventArgs } from '@syncfusion/ej2-calendars';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop, DragEventArgs } from '@syncfusion/ej2-schedule';
import * as dataSource from './datasource.json';
import { extend } from '@syncfusion/ej2-base';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

/**
 * Schedule Default sample
 */

(window as any).default = (): void => {
    loadCultureFiles();
    let data: Object[] = <Object[]>extend([], (dataSource as any).scheduleData, null, true);
    let scheduleObj: Schedule = new Schedule({
        height: '650px',
        selectedDate: new Date(2021, 0, 10),
        eventSettings: { dataSource: data },
        dragStart: (args: DragEventArgs) => {
            args.navigation.enable = true;
        }
    });
    scheduleObj.appendTo('#Schedule');

    let currentDate: DatePicker = new DatePicker({
        value: new Date(2021, 0, 10),
        showClearButton: false,
        placeholder: "Current Date",
        floatLabelType: "Always",
        change: (args: ChangeEventArgs) => {
            scheduleObj.selectedDate = args.value;
            scheduleObj.dataBind();
        }
    });
    currentDate.appendTo('#scheduledate');
};

```