@progress/kendo-react-scheduler 10.2.0-develop.6 → 10.2.0-develop.8

package/index.d.mts

@@ -2928,141 +2928,265 @@ export declare const schedulerProportionalViewItemDefaultProps: {
 export declare interface SchedulerProps {
     /**
      * Specifies the `id` of the wrapping element of the Scheduler.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler id="my-scheduler" />
+     * ```
      */
     id?: string;
     /**
      * Specifies the `tabIndex` attribute of the wrapping element of the Scheduler.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
      * Specifies the `role` attribute of the Scheduler wrapping element.
      *
-     * For more information, refer to the [Scheduler Accessibility Compliance]({% slug accessibility_scheduler %}) article
+     * For more information, refer to the [Scheduler Accessibility Compliance]({% slug accessibility_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler role="application" />
+     * ```
      */
     role?: string;
     /**
      * The `aria-labelledby` attribute to be applied to the Scheduler component.
      *
-     * For more information, refer to the [Scheduler Accessibility Compliance]({% slug accessibility_scheduler %}) article
+     * For more information, refer to the [Scheduler Accessibility Compliance]({% slug accessibility_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler ariaLabelledby="scheduler-label" />
+     * ```
      */
     ariaLabelledby?: string;
     /**
      * The `aria-label` attribute to be applied to the Scheduler component.
      *
-     * For more information, refer to the [Scheduler Accessibility Compliance]({% slug accessibility_scheduler %}) article
+     * For more information, refer to the [Scheduler Accessibility Compliance]({% slug accessibility_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler ariaLabel="Scheduler component" />
+     * ```
      */
     ariaLabel?: string;
     /**
      * Specifies the `style` object of the wrapping element of the Scheduler.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler style={{ height: '500px' }} />
+     * ```
      */
     style?: React_2.CSSProperties;
     /**
      * Specifies the `className` attribute of the wrapping element of the Scheduler.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler className="custom-scheduler" />
+     * ```
      */
     className?: string;
     /**
      * Overrides the default item. Specifying the `item` property of a specific view will override this property.
      *
-     * The default component is: [SchedulerItem]({% slug api_scheduler_scheduleritem %})
+     * The default component is: [SchedulerItem]({% slug api_scheduler_scheduleritem %}).
      *
      * For more information on customizing the scheduler items, refer to the [Item Customization]({% slug overview_items_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomItem = (props) => <div>{props.title}</div>;
+     * <Scheduler item={CustomItem} />
+     * ```
      */
     item?: React_2.ComponentType<SchedulerItemProps>;
     /**
      * Overrides the default viewItem. Specifying the `viewItem` property of a specific view will override this property.
      *
-     * The default component is: [SchedulerViewItem]({% slug api_scheduler_schedulerviewitem %})
+     * The default component is: [SchedulerViewItem]({% slug api_scheduler_schedulerviewitem %}).
      *
      * For more information on customizing the scheduler items, refer to the [Item Customization]({% slug overview_items_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomViewItem = (props) => <div>{props.title}</div>;
+     * <Scheduler viewItem={CustomViewItem} />
+     * ```
      */
     viewItem?: React_2.ComponentType<SchedulerViewItemProps>;
     /**
      * Overrides the default editItem. Specifying the `editItem` property of a specific view will override this property.
      *
-     * The default component is: [SchedulerEditItem]({% slug api_scheduler_scheduleredititem %})
+     * The default component is: [SchedulerEditItem]({% slug api_scheduler_scheduleredititem %}).
      *
      * For more information on customizing the scheduler items, refer to the [Item Customization]({% slug overview_items_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomEditItem = (props) => <div>{props.title}</div>;
+     * <Scheduler editItem={CustomEditItem} />
+     * ```
      */
     editItem?: React_2.ComponentType<SchedulerEditItemProps>;
     /**
      * Overrides the default task. Specifying the `task` property of a specific view will override this property.
      * Currently, the `task` is being used in the [AgendaView]({% slug agenda_view_scheduler %}) only.
      *
-     * The default component is: [SchedulerTask]({% slug api_scheduler_schedulertask %})
+     * The default component is: [SchedulerTask]({% slug api_scheduler_schedulertask %}).
      *
      * For more information on customizing the scheduler tasks, refer to the [Task Customization]({% slug overview_tasks_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomTask = (props) => <div>{props.title}</div>;
+     * <Scheduler task={CustomTask} />
+     * ```
      */
     task?: React_2.ComponentType<SchedulerTaskProps>;
     /**
      * Overrides the default viewTask. Specifying the `viewTask` property of a specific view will override this property.
      * Currently, the `viewTask` is being used in the [AgendaView]({% slug agenda_view_scheduler %}) only.
      *
-     * The default component is: [SchedulerViewTask]({% slug api_scheduler_schedulerviewtask %})
+     * The default component is: [SchedulerViewTask]({% slug api_scheduler_schedulerviewtask %}).
      *
      * For more information on customizing the scheduler tasks, refer to the [Task Customization]({% slug overview_tasks_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomViewTask = (props) => <div>{props.title}</div>;
+     * <Scheduler viewTask={CustomViewTask} />
+     * ```
      */
     viewTask?: React_2.ComponentType<SchedulerTaskProps>;
     /**
      * Overrides the default editTask. Specifying the `editTask` property of a specific view will override this property.
-     * Currently, the `viewTask` is being used in the [AgendaView]({% slug agenda_view_scheduler %}) only.
+     * Currently, the `editTask` is being used in the [AgendaView]({% slug agenda_view_scheduler %}) only.
      *
-     * The default component is: [SchedulerEditTask]({% slug api_scheduler_scheduleredittask %})
+     * The default component is: [SchedulerEditTask]({% slug api_scheduler_scheduleredittask %}).
      *
      * For more information on customizing the scheduler tasks, refer to the [Task Customization]({% slug overview_tasks_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomEditTask = (props) => <div>{props.title}</div>;
+     * <Scheduler editTask={CustomEditTask} />
+     * ```
      */
     editTask?: React_2.ComponentType<SchedulerTaskProps>;
     /**
      * Overrides the default header component of the Scheduler.
      *
-     * The default component is: [SchedulerHeader]({% slug api_scheduler_schedulerheader %})
+     * The default component is: [SchedulerHeader]({% slug api_scheduler_schedulerheader %}).
      *
      * For more information on customizing the scheduler header, refer to the [Header Customization]({% slug overview_header_footer_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomHeader = (props) => <div>Custom Header</div>;
+     * <Scheduler header={CustomHeader} />
+     * ```
      */
     header?: React_2.ComponentType<SchedulerHeaderProps>;
     /**
      * Overrides the default footer component of the Scheduler.
      *
-     * The default component is: [Scheduler]({% slug api_scheduler_schedulerfooter %})
+     * The default component is: [SchedulerFooter]({% slug api_scheduler_schedulerfooter %}).
      *
      * For more information on customizing the scheduler footer, refer to the [Footer Customization]({% slug overview_header_footer_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomFooter = (props) => <div>Custom Footer</div>;
+     * <Scheduler footer={CustomFooter} />
+     * ```
      */
     footer?: React_2.ComponentType<SchedulerFooterProps>;
     /**
      * Overrides the default slot component. Specifying the `slot` property of a specific view will override this property.
      *
-     * The default component is: [SchedulerSlot]({% slug api_scheduler_schedulerslot %})
+     * The default component is: [SchedulerSlot]({% slug api_scheduler_schedulerslot %}).
      *
      * For more information on customizing the scheduler slots, refer to the [Slot Customization]({% slug overview_slots_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomSlot = (props) => <div>{props.title}</div>;
+     * <Scheduler slot={CustomSlot} />
+     * ```
      */
     slot?: React_2.ComponentType<SchedulerSlotProps>;
     /**
      * Overrides the default viewSlot component. Specifying the `viewSlot` property of a specific view will override this property.
      *
-     * The default component is: [SchedulerViewSlot]({% slug api_scheduler_schedulerviewslot %})
+     * The default component is: [SchedulerViewSlot]({% slug api_scheduler_schedulerviewslot %}).
      *
      * For more information on customizing the scheduler slots, refer to the [Slot Customization]({% slug overview_slots_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomViewSlot = (props) => <div>{props.title}</div>;
+     * <Scheduler viewSlot={CustomViewSlot} />
+     * ```
      */
     viewSlot?: React_2.ComponentType<SchedulerViewSlotProps>;
     /**
      * Overrides the default editSlot component. Specifying the `editSlot` property of a specific view will override this property.
      *
-     * The default component is: [SchedulerEditSlot]({% slug api_scheduler_schedulereditslot %})
+     * The default component is: [SchedulerEditSlot]({% slug api_scheduler_schedulereditslot %}).
      *
      * For more information on customizing the scheduler slots, refer to the [Slot Customization]({% slug overview_slots_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomEditSlot = (props) => <div>{props.title}</div>;
+     * <Scheduler editSlot={CustomEditSlot} />
+     * ```
      */
     editSlot?: React_2.ComponentType<SchedulerEditSlotProps>;
     /** @hidden */
     form?: React_2.ComponentType<SchedulerFormProps>;
     /**
      * Sets the currently selected view. The value is matched with the `name` property of the view.
+     *
+     * Sets the initially selected view. The available values are:
+     * * `day`
+     * * `week`
+     * * `month`
+     * * `agenda`
+     * * `timeline`
+     *
+     * @example
+     * ```jsx
+     * <Scheduler view="day" />
+     * ```
      */
     view?: string;
     /**
-     * Sets the data of the Scheduler component. The data is then parsed and rendered as a visual Scheduler items.
+     * Sets the data of the Scheduler component. The data is then parsed and rendered as visual Scheduler items.
+     *
+     * @example
+     * ```jsx
+     * const data = [{ id: 1, title: 'Event', start: new Date(), end: new Date() }];
+     * <Scheduler data={data} />
+     * ```
      */
     data?: DataItem[];
     /**
      * Sets if the Scheduler component is editable. The value can be either a `boolean` or an Object to specify different types of editing.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler editable={true} />
+     * ```
      */
     editable?: EditableProp | boolean;
     /**
@@ -3076,26 +3200,59 @@ export declare interface SchedulerProps {
      * * `month`
      * * `agenda`
      * * `timeline`
+     *
+     * @example
+     * ```jsx
+     * <Scheduler defaultView="week" />
+     * ```
      */
     defaultView?: string;
     /**
-     * Sets the current selected `Date`. The current selected date is passed to the selected view and transformed in to a range.
+     * Sets the current selected `Date`. The current selected date is passed to the selected view and transformed into a range.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler date={new Date()} />
+     * ```
      */
     date?: Date;
     /**
      * Sets a default selected `Date`. The `defaultDate` property is used to specify the initial rendered date, while still remaining in an uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler defaultDate={new Date()} />
+     * ```
      */
     defaultDate?: Date;
     /**
-     * Force a `rtl` mode. For more information refer to [RTL Support]({% slug globalization_scheduler %}#toc-right-to-left-support)
+     * Force a `rtl` mode. For more information refer to [RTL Support]({% slug globalization_scheduler %}#toc-right-to-left-support).
+     *
+     * @example
+     * ```jsx
+     * <Scheduler rtl={true} />
+     * ```
      */
     rtl?: boolean;
     /**
      * Sets the `height` of the Scheduler.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler height={600} />
+     * ```
      */
     height?: number | string;
     /**
      * Specify the available `view` components as `children` and the Scheduler will match the currently selected view and render it.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler>
+     *   <DayView />
+     *   <WeekView />
+     * </Scheduler>
+     * ```
      */
     children?: SchedulerView[] | SchedulerView;
     /**
@@ -3103,34 +3260,75 @@ export declare interface SchedulerProps {
      * For example, `Europe/Sofia`.
      *
      * Defaults to `Etc/UTC`.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler timezone="Europe/Sofia" />
+     * ```
      */
     timezone?: string;
     /**
      * Specifies the groups of the Scheduler.
+     *
+     * @example
+     * ```jsx
+     * const group = { resources: ['Rooms'], orientation: 'horizontal' };
+     * <Scheduler group={group} />
+     * ```
      */
     group?: SchedulerGroup;
     /**
      * Specifies the resources of the Scheduler.
+     *
+     * @example
+     * ```jsx
+     * const resources = [{ name: 'Rooms', data: [{ text: 'Room 1', value: 1 }] }];
+     * <Scheduler resources={resources} />
+     * ```
      */
     resources?: SchedulerResource[];
     /**
      * The names of the model fields from which the Scheduler will read its data
      * ([see example]({% slug data_binding_scheduler %})).
+     *
+     * @example
+     * ```jsx
+     * const modelFields = { id: 'TaskID', start: 'Start', end: 'End' };
+     * <Scheduler modelFields={modelFields} />
+     * ```
      */
     modelFields?: SchedulerModelFields;
     /**
      * Called when new `date` is selected.
+     *
+     * @example
+     * ```jsx
+     * const handleDateChange = (args) => console.log(args.value);
+     * <Scheduler onDateChange={handleDateChange} />
+     * ```
      */
     onDateChange?: (args: SchedulerDateChangeEvent) => void;
     /**
-     * Called when new `view` is selected. [(see example)]({% slug views_scheduler %}#toc-controlling-the-selected-view)
+     * Called when new `view` is selected. [(see example)]({% slug views_scheduler %}#toc-controlling-the-selected-view).
+     *
+     * @example
+     * ```jsx
+     * const handleViewChange = (args) => console.log(args.value);
+     * <Scheduler onViewChange={handleViewChange} />
+     * ```
      */
     onViewChange?: (args: SchedulerViewChangeEvent) => void;
     /**
      * Called each time when editing occurs.
-     * To enable editing set the `editable` property to `true` or an [`EditableProp`]({% slug api_scheduler_editableprop %})
+     * To enable editing set the `editable` property to `true` or an [`EditableProp`]({% slug api_scheduler_editableprop %}).
      *
      * For more information refer to the [Scheduler Editing]({% slug editing_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const handleDataChange = (event) => console.log(event);
+     * <Scheduler onDataChange={handleDataChange} />
+     * ```
      */
     onDataChange?: (event: SchedulerDataChangeEvent) => void;
 }