Scheduler

Represents the KendoReact Scheduler component

A Functional Component.

jsx

  const currentYear = new Date().getFullYear();
  const parseAdjust = (eventDate) => {
  const date = new Date(eventDate);
  date.setFullYear(currentYear);
  return date;
  };

  const baseData = [
  {
  TaskID: 4,
  OwnerID: 2,
  Title: 'Bowling tournament',
  Description: '',
  StartTimezone: null,
  Start: '2013-06-09T21:00:00.000Z',
  End: '2013-06-10T00:00:00.000Z',
  EndTimezone: null,
  RecurrenceRule: null,
  RecurrenceID: null,
  RecurrenceException: null,
  isAllDay: false,
  },
  {
  TaskID: 5,
  OwnerID: 2,
  Title: 'Take the dog to the vet',
  Description: '',
  StartTimezone: null,
  Start: '2013-06-10T07:00:00.000Z',
  End: '2013-06-10T08:00:00.000Z',
  EndTimezone: null,
  RecurrenceRule: null,
  RecurrenceID: null,
  RecurrenceException: null,
  isAllDay: false,
   },
 ];

  const sampleData = baseData.map((dataItem) => ({
  id: dataItem.TaskID,
  start: parseAdjust(dataItem.Start),
  startTimezone: dataItem.startTimezone,
  end: parseAdjust(dataItem.End),
  endTimezone: dataItem.endTimezone,
  isAllDay: dataItem.isAllDay,
  title: dataItem.Title,
  description: dataItem.Description,
  recurrenceRule: dataItem.RecurrenceRule,
  recurrenceExceptions: dataItem.RecurrenceException,
  roomId: dataItem.RoomID,
  ownerID: dataItem.OwnerID,
  personId: dataItem.OwnerID,
  }));

  const App = () => {
  return (
  <Scheduler data={sampleData}>
  <AgendaView />
  <DayView />
  <WeekView />
  <MonthView />
  </Scheduler>
   );
  };
  ReactDOM.render(<App />, document.querySelector('my-app'));

Name	Type	Default	Description
props	SchedulerProps intersected with RefAttributes<undefined>		The props of the Scheduler component.