Dimensions in React Scheduler

Scheduler dimensions refer to the height and width of the entire layout and support three types of values:

  • auto
  • pixel
  • percentage

Auto height and width

When the height and width of the Scheduler are set to auto, it will adapt to fit the parent container’s dimensions. The Scheduler’s width and height will be the sum of its children elements, ensuring responsive layout behavior.

Note: By default, the Scheduler is assigned with auto values for both height and width properties, making it responsive to its parent container.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

function App() {
  const eventSettings = { dataSource: scheduleData }

  return <ScheduleComponent height='auto' width='auto' selectedDate={new Date(2026, 1, 15)} eventSettings={eventSettings}>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
  </ScheduleComponent>;
};

export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

function App() {
  const eventSettings: EventSettingsModel = { dataSource: scheduleData }
  return <ScheduleComponent height='auto' width='auto' selectedDate={new Date(2026, 1, 15)} eventSettings={eventSettings}>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
  </ScheduleComponent>;
};

export default App;

Height and width in pixels

The Scheduler height and width will render exactly as per the given pixel values.

Note: Pixel values can be provided either as numbers (for example, 500) or as strings with a px suffix (for example, '500px').

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

function App() {
  const eventSettings = { dataSource: scheduleData }
  return (<ScheduleComponent height='550px' width='650px' selectedDate={new Date(2026, 1, 15)} eventSettings={eventSettings}>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
  </ScheduleComponent >);
};

export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

function App() {
  const eventSettings: EventSettingsModel = { dataSource: scheduleData }
  return (<ScheduleComponent height='550px' width='650px' selectedDate={new Date(2026, 1, 15)} eventSettings={eventSettings}>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
  </ScheduleComponent>);
};

export default App;

Height and width in percentages

When the height and width of the Scheduler are specified as percentages, the Scheduler will scale proportionally to the parent container’s dimensions.

Tip: Percentage-based dimensions are useful for responsive designs that need to adapt to different screen sizes.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

function App() {
  const eventSettings = { dataSource: scheduleData }
  return <ScheduleComponent height='100%' width='100%' selectedDate={new Date(2026, 1, 15)} eventSettings={eventSettings}>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
  </ScheduleComponent>;
};

export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

function App() {
  const eventSettings: EventSettingsModel = { dataSource: scheduleData }

  return <ScheduleComponent height='100%' width='100%' selectedDate={new Date(2026, 1, 15)} eventSettings={eventSettings}>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
  </ScheduleComponent>;
};

export default App;

See also