Form CustomizationPremium
The SchedulerForm
is a composite component, built on top of the KendoReact 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
property on a couple of different levels:
- Scheduler
form
customization—Customize allform
components across the Scheduler.
<Scheduler form={CustomForm} />
- View
form
customization—Customizeform
components for a specific view only.
<Scheduler>
<WeekView />
<MonthView form={MonthViewForm} />
</Scheduler>
- Item/Slot
form
customization—Customize theform
component of a specificSchedulerEditItem
orSchedulerEditSlot
instance.
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 and Scheduler 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.
// ES2015 module syntax
import { SchedulerForm } from '@progress/kendo-react-scheduler';
// 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
API.
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 article.
The following example demonstrates customizing the Dialog
component through the dialog
property of the SchedulerForm
by adding a remove
icon next to the title which triggers the remove
sequence of actions when clicked. For the full list of properties accepted by the dialog
, please refer to the DialogProps
API.