# Getting Started with the KendoReact Scheduler

This guide provides essential information about using the KendoReact Scheduler. You will learn how to install the package, add a Scheduler component to your project, style the component, and activate your license.

<div data-component="StartKendoReactFreeSection"></div>

After completing this guide, you will be able to reproduce the following example.

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/overview/basic/func/source.txt)

## Before You Begin

To follow the steps in this guide, you need to have a React project set up. If you don't have one, you can create a new React application using Vite by running the following command in your terminal:

```sh
npm create vite@latest my-app -- --template react-ts
```

This guide requires that you have **basic knowledge of React and TypeScript**, and that you have already created [**a blank React project**](https://www.telerik.com/kendo-react-ui/components/getting-started).

> tip You can speed up the development of your KendoReact application with the [Kendo UI Template Wizard for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=KendoUI.kendotemplatewizard).

## Install the Component

To install the Scheduler package, run the following command in the root folder of your React project:

```sh
npm i @progress/kendo-react-scheduler
```

## Importing the Component

Once you install the npm package, import the Scheduler and the components that are necessary to display the day, month, and week view.

```jsx
import { Scheduler, AgendaView, TimelineView, DayView, WeekView, MonthView } from '@progress/kendo-react-scheduler';
```

## Using the Component

1. Create an `events-utc.js` file that will contain the data and a predefined display date, and then import them.

   ```jsx
   import { sampleData, displayDate } from './events-utc';
   ```

2. Add the Scheduler component together with the `AgendaView`, `TimelineView`, `DayView`, `WeekView`, and `MonthView`. Pass the `sampleData` and `displayDate` that are obtained from the `events-utc.js` file.

   ```jsx
   return (
       <Scheduler data={sampleData} defaultDate={displayDate}>
           <AgendaView />
           <TimelineView />
           <DayView />
           <WeekView />
           <MonthView />
       </Scheduler>
   );
   ```

3. To style the Scheduler, install and import the [Meridian theme](https://www.telerik.com/design-system/docs/themes/kendo-themes/meridian/), which is one of the [five beautiful themes](https://www.telerik.com/kendo-react-ui/components/styling) for KendoReact.

   3.1. Install the Meridian theme package.

   ```sh
   npm i @progress/kendo-theme-meridian
   ```

   3.2. Import the CSS file from the package in `src/App.tsx`. Add this import before your existing `App.css` import.

   ```jsx
   import '@progress/kendo-theme-meridian/dist/all.css';
   ```

4. Build and run the application by typing the following command in the root folder of your project:

   ```sh
   npm run dev
   ```

5. Navigate to [http://localhost:5173](http://localhost:5173/) to see the KendoReact Scheduler component on the page.

## Activating Your License Key

**Important**: The KendoReact Scheduler is a premium component that requires a license key file to be installed in your project:

* **Trial usage**: [Start a free trial](https://www.telerik.com/try/kendo-react-ui) and download a trial license key file
* **Commercial usage**: [Purchase a license](https://www.telerik.com/kendo-react-ui/pricing) and download a commercial license key file

Without a valid license key file, the component will display licensing warnings and watermarks.

Follow the instructions on the KendoReact [My License page](https://www.telerik.com/kendo-react-ui/components/my-license) to download and install your license key file. You can skip this step if your application already contains a KendoReact license file.

## Dependencies

The Scheduler package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:

| Package Name                     | Description                                                                                                                                                                |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| react 18.0.0\*                   | Contains the functionality necessary to define React components.                                                                                                           |
| react-dom                        | Contains the React renderer for the web.                                                                                                                                   |
| @progress/kendo-licensing        | Contains the internal infrastructure related to licensing.                                                                                                                 |
| @progress/kendo-react-intl       | Contains the KendoReact Internationalization package that applies the desired cultures by providing services and pipes for the parsing and formatting of dates and numbers |
| @progress/kendo-react-popup      | Contains the KendoReact Popup components.                                                                                                                                  |
| @progress/kendo-react-dialogs    | Contains the KendoReact Dialogs components.                                                                                                                                |
| @progress/kendo-react-dateinputs | Contains the KendoReact Date Input components.                                                                                                                             |
| @progress/kendo-react-dropdowns  | Contains the KendoReact Dropdown components.                                                                                                                               |
| @progress/kendo-react-inputs     | Contains the KendoReact Input components.                                                                                                                                  |
| @progress/kendo-react-buttons    | Contains the KendoReact Button components.                                                                                                                                 |
| @progress/kendo-date-math        | Contains the KendoReact typescript package exporting functions for Date manipulations.                                                                                     |
| @progress/kendo-svg-icons        | Contains the KendoReact SVG icons.                                                                                                                                         |

## Suggested Links

* [API Reference of the Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/api)
* [Editing](https://www.telerik.com/kendo-react-ui/components/scheduler/editing)
* [Grouping](https://www.telerik.com/kendo-react-ui/components/scheduler/grouping)
* [Timezones](https://www.telerik.com/kendo-react-ui/components/scheduler/timezones)
* [Keyboard Navigation](https://www.telerik.com/kendo-react-ui/components/scheduler/keyboard-navigation)

## Learning Resources

* [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started)
* [Virtual Classroom (Training Courses for Registered Users)](https://learn.telerik.com/learn/course/external/view/elearning/14/kendoreact)
* [Explore the Finance Portfolio Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/finance-application/)
* [Explore the Coffee Warehouse Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/react-coffee-warehouse-dashboard/)
* [Explore the GitHub Issues Grid Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/issues-grid/)
* [KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/)