{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "scheduler-default",
  "framework": "react",
  "type": "registry:component",
  "component": "Scheduler",
  "variant": "default",
  "dependencies": [
    "@syncfusion/ej2-react-schedule"
  ],
  "description": "Scheduler with day, week, work week, month, agenda, resizing, and drag-and-drop events.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/js/scheduler-default.md"
  },
  "files": [
    {
      "target": "src/components/scheduler-default/Scheduler.jsx",
      "content": "import { useEffect, useState, useRef } from 'react';\nimport { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';\nimport { extend } from '@syncfusion/ej2-base';\n/**\n * Schedule Default sample\n */\nconst eventData = [\n  { 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' },\n    { 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' },\n    { 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' },\n    { 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' },\n    { 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' },\n    { 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' },\n    { Id: 7, Subject: 'Glaciers and Snowflakes', Location: 'Himalayas', StartTime: '2021-01-15T05:30:00.000Z', EndTime: '2021-01-15T07:00:00.000Z', CategoryColor: '#1aaa55' },\n    { 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' },\n    { 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' },\n    { Id: 10, Subject: 'Wildlife Galleries', Location: 'Africa', StartTime: '2021-01-20T05:30:00.000Z', EndTime: '2021-01-20T07:30:00.000Z', CategoryColor: '#ea7a57' }];\n\n    const Default = () => {\n    const scheduleObj = useRef(null);\n    const data = extend([], eventData, null, true);\n    const [selectedDate] = useState(new Date(2021, 0, 10));\n    const onDragStart = (args) => {\n        args.navigation.enable = true;\n    };\n    return (<div className='schedule-control-section'>\n      <div className='col-lg-9 control-section'>\n        <div className='control-wrapper'>\n          <ScheduleComponent height='650px' ref={scheduleObj} selectedDate={selectedDate} eventSettings={{ dataSource: data }} dragStart={(onDragStart)}>\n            <ViewsDirective>\n              <ViewDirective option='Day'/>\n              <ViewDirective option='Week'/>\n              <ViewDirective option='WorkWeek'/>\n              <ViewDirective option='Month'/>\n              <ViewDirective option='Agenda'/>\n            </ViewsDirective>\n            <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]}/>\n          </ScheduleComponent>\n        </div>\n      </div>\n    </div>);\n};\nexport default Default;"
    }
  ]
}