EventSettings

1 Oct 20254 minutes to read

Holds the configuration of event related options and dataSource binding to Schedule.

Properties

allowAdding boolean

When set to false the add action will be restricted.

Defaults to true

allowDeleting boolean

When set to false the delete action will be restricted.

Defaults to true

allowEditing boolean

When set to false the edit action will be restricted.

Defaults to true

dataSource Record[]|DataManager

With this property, the event data will be bound to Schedule.
The event data can be passed either as an array of JavaScript objects,
or else can create an instance of DataManager
in case of processing remote data and can be assigned to the dataSource property.
With the remote data assigned to dataSource, check the available
adaptors to customize the data processing.

Defaults to []

editFollowingEvents boolean

When set to true will edit the future events only instead of editing entire series.

Defaults to false

enableIndicator boolean

This property enables the event to occupy the full height that remaining from the header and more indicator.
More than one appointment are available on the cell the more indicator is created.

Defaults to false

enableMaxHeight boolean

It enables the event to occupy the full height in timeline views and
full width in vertical views, excluding the header of the cell.

Defaults to false

enableTooltip boolean

When set to true will display the normal tooltip over the events with its subject, location, start and end time.

Defaults to false

fields FieldModel

Defines the collection of default event fields to be bind to the Schedule.

Defaults to null

ignoreWhitespace boolean

This property ignores or include the Events element bottom white space.

Defaults to false

includeFiltersInQuery boolean

Gets or sets a value that determines whether the start date and end date filter conditions should be included in the query itself when requesting data from the server, or passed as query parameters in the API call.
When set to true the filter conditions will be part of the query itself, potentially reducing the size of the request and minimizing the time needed to parse the response.
However, it can also lead to longer query strings, which could result in issues with maximum URL length or server limitations on query string length.

Defaults to false

minimumEventDuration number

Sets a minimum duration for an event where the events are rendered for this minimum duration when the duration of the event is lesser than this value.
It accepts duration value in minutes. This property is only applicable when the event duration is lesser than this property duration.

Defaults to 1

query Query

Defines the external query
that will be executed along with the data processing.

Defaults to null

resourceColorField string

Defines the resource name, to decides the color of which particular resource level is to be applied on appointments, when
grouping is enabled on scheduler.

Defaults to null

sortComparer SortComparerFunction

Defines the custom sort comparer function.
The sort comparer function has the same functionality like
Array.sort sort comparer.

Defaults to null

spannedEventPlacement SpannedEventPlacement

Defines the option to render the spanned events (more than 24 hours) in either AllDayRow or TimeSlot. By default it renders in AllDayRow.
This property is applicable for Day, Week and WorkWeek views only. The possible values for this property as follows

• AllDayRow: Denotes the rendering of spanned events in an all-day row.
• TimeSlot: Denotes the rendering of spanned events in an time slot row.

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';

function App() {
  const data: object[] = [{
    Id: 1,
    Subject: 'Paris',
    StartTime: new Date(2018, 1, 15, 10, 0),
    EndTime: new Date(2018, 1, 17, 12, 30),
    IsAllDay: false
  }, {
    Id: 2,
    Subject: 'London',
    StartTime: new Date(2018, 1, 16, 12, 0),
    EndTime: new Date(2018, 1, 18, 13, 0),
    IsAllDay: false
  }];
  const eventSettings: EventSettingsModel = { dataSource: data, spannedEventPlacement: 'TimeSlot' }

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Defaults to ‘AllDayRow’

template string|function|JSX.Element

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying
it onto the event background. All the event fields mapped to Schedule from dataSource can be accessed within this template code.

Defaults to null

tooltipTemplate string|function|JSX.Element

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto tooltip.
All the event fields mapped with Schedule dataSource can be accessed within this template code.

Defaults to null