@progress/kendo-react-scheduler
Version:
React Scheduler brings the functionality of Outlook's Calendar to a single UI component. KendoReact Scheduler package
110 lines (109 loc) • 3.9 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { MultiDayViewProps } from '../day/MultiDayView.js';
import { Day } from '@progress/kendo-date-math';
import { SchedulerViewDateRangeArgs, DateRange } from '../../models/index.js';
import * as React from 'react';
/**
* Represents the properties of the KendoReact [WeekView](https://www.telerik.com/kendo-react-ui/components/scheduler/api/weekview) Component.
*/
export interface WeekViewProps extends Omit<MultiDayViewProps, 'step' | 'numberOfDays'> {
/**
* The long-date format for displaying the
* selected date in the Scheduler toolbar.
* Defaults to `{0:D} - {1:D}`
* ([more information](https://www.github.com/telerik/kendo-intl/blob/develop/docs/date-formatting/index.md))
*/
selectedDateFormat?: string;
/**
* The short-date format for displaying the
* selected date in the Scheduler toolbar.
* Defaults to `{0:d} - {1-d}`
* ([more information](https://www.github.com/telerik/kendo-intl/blob/develop/docs/date-formatting/index.md))
*/
selectedShortDateFormat?: string;
/**
* Overrides the general `editable` prop of the Scheduler for the specified view only.
*/
editable?: boolean;
/**
* The start time of the view. The WeekView displays events which are visible after the start time.
* Accepts string values in the `HH:mm` format.
*/
startTime?: string;
/**
* The end time of the view. The WeekView displays events which are visible before the end time.
* Accepts string values in the `HH:mm` format.
*/
endTime?: string;
/**
* The start time of the view when `showWorkHours` is set to `true`.
* Accepts string values in the `HH:mm` format.
*/
workDayStart?: string;
/**
* The end time of the view when `showWorkHours` is set to `true`.
* Accepts string values in the `HH:mm` format.
*/
workDayEnd?: string;
/**
* The start of the work week.
*/
workWeekStart?: Day;
/**
* The end of the work week.
*/
workWeekEnd?: Day;
/**
* The number of divisions of the time slots.
*/
slotDivisions?: number;
/**
* The duration (in minutes) of the time slots.
*/
slotDuration?: number;
/**
* If set to `true`, the view will be shown in the business-hours mode only.
*
* This will always override the internal `showWorkHours` state.
*/
showWorkHours?: boolean;
/**
* Sets the initial business-hour mode. Default `true`.
*
* This option applies only the initial `showWorkHours` state.
*/
defaultShowWorkHours?: boolean;
/**
* Sets a custom `className` to the wrapping element of the `DayView`.
*/
className?: string;
/**
* Sets a custom `id` to the wrapping element of the `DayView`.
*/
id?: string;
/**
* Sets a custom `style` property to the wrapping element of the `DayView`.
*/
style?: React.CSSProperties;
}
/**
* Represents the KendoReact [WeekView](https://www.telerik.com/kendo-react-ui/components/scheduler/views/week) Component.
*/
export declare const WeekView: React.FunctionComponent<WeekViewProps>;
/** @hidden */
export declare const weekViewDefaultProps: {
name: string;
slotDuration: number;
slotDivisions: number;
numberOfDays: number;
dateRange: ({ intl, date, timezone }: SchedulerViewDateRangeArgs) => DateRange;
title: (localization: any) => any;
selectedDateFormat: string;
selectedShortDateFormat: string;
};