# Form Customization

The `SchedulerForm` is a composite component, built on top of the [`KendoReact Form`](https://www.telerik.com/kendo-react-ui/components/form/api/form) component, and provides default rendering and functionality to enable creating a new `dataItem` or edit an existing one.

In order to allow gradual customization, we've exposed the [`form`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops) property on a couple of different levels:

* Scheduler `form` customization—Customize all `form` components across the Scheduler.

```jsx
<Scheduler form={CustomForm} />
```

* View `form` customization—Customize `form` components for a specific view only.

```jsx
<Scheduler>
    <WeekView />
    <MonthView form={MonthViewForm} />
</Scheduler>
```

* Item/Slot `form` customization—Customize the `form` component of a specific `SchedulerEditItem` or `SchedulerEditSlot` instance.

```jsx
    const EditItemWithCustomForm = (props) => {
        return (
            <SchedulerEditItem
                {...props}
                form={EditItemForm}
            />
        )
    }
    const EditSlotWithCustomForm = (props) => {
        return (
            <SchedulerEditSlot
                {...props}
                form={EditSlotForm}
            />
        )
    }

    
    <Scheduler
        editItem={EditItemWithCustomForm}
        editSlot={EditSlotWithCustomForm}
    />
```

For more information related to `Item/Slot` customization, please refer to the [Scheduler Items](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items) and [Scheduler Slots](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/slots) articles.

## Importing the default components

Before we begin with customizing the default `form`, we must first import it. We're shipping the `SchedulerForm` component through the `@progress/kendo-react-scheduler` package, so you can import it in any React project with the following import statement.

```jsx
    // ES2015 module syntax
    import { SchedulerForm } from '@progress/kendo-react-scheduler';
```

```jsx
    // CommonJS format
    const { SchedulerForm } = require('@progress/kendo-react-scheduler');
```

## Customizing the Default Rendering

In order to reuse the default rendering, and still apply some customizations, we've exposed a set of properties which can be applied to the root element and additional render-properties for replacing some of components rendered inside as a children. This approach is most-commonly used for styling and providing additional functionalities (like validation) to the `SchedulerForm` component.

Customization is achieved by providing a custom component, which renders the default `SchedulerForm` with additional props.

### Extend Functionality

The following example demonstrates how to extend the default `SchedulerForm` by providing an additional validator for the `description` field. For the full list of properties accepted by the `SchedulerForm` please refer to the [`SchedulerFormProps`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerformprops) API.

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/customization/form/default-rendering/func/source.txt)

### Custom Components

To provide out of the box functionality we distribute the `SchedulerForm` as a standalone component, which is responsible for rendering all child components. By default the `SchedulerForm` is rendering a `Dialog` component and a `SchedulerFormEditor` component. We expose properties which enables customization of those components using the same approach as customizing the `SchedulerForm` itself.

> Customizing the `SchedulerFormEditor` component is the most common (and complex) scenario for a custom component. We are covering it in depth in the [SchedulerFormEditor Customization](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/form/editor) article.

The following example demonstrates customizing the `Dialog` component through the `dialog` property of the `SchedulerForm` by setting a wider width and adding a custom CSS class. For the full list of properties accepted by the `dialog`, please refer to the [`DialogProps`](https://www.telerik.com/kendo-react-ui/components/dialogs/api/dialog) API.

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/customization/form/custom-components/func/source.txt)

## Customizing the Quick-Create Form

The quick-create popover renders the [`SchedulerQuickCreateForm`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerquickcreateform) component. To customize it, set the [`quickCreateForm`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#quickCreateForm) property of the Scheduler. Wrap the default component to keep its layout and add a `validator`, or provide your own component and forward its `onSubmit`, `onMoreOptions`, and `onCancel` callbacks.

The following example requires a non-empty title before the event can be saved. It uses `useSchedulerFieldsContext` to support custom model field names.

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/customization/form/quick-create/source.txt)

The default popover edits only the title. If your validator requires another field, users must choose **More options** and complete that field in the full editor, so apply the same requirement to the full form as well.

## Suggested Links

* [Custom Form Editor](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/form/editor)
* [Editing](https://www.telerik.com/kendo-react-ui/components/scheduler/editing)
* [SchedulerQuickCreateFormProps API](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerquickcreateformprops)
* [KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/)