@progress/kendo-angular-scheduler
Version:
Kendo UI Scheduler Angular - Outlook or Google-style angular scheduler calendar. Full-featured and customizable embedded scheduling from the creator developers trust for professional UI components.
106 lines (105 loc) • 4.33 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { CalendarView, DateInputFormatPlaceholder, PopupSettings } from '@progress/kendo-angular-dateinputs';
import { Day } from '@progress/kendo-date-math';
/**
* The available configuration options for the DatePicker component, used internally in the recurrence editor.
*/
export interface DatePickerOptions {
/**
* Defines the active view that the Calendar initially renders.
* ([See example]({% slug viewoptions_calendar %}#toc-active-view)).
* By default, the active view is `month`.
*
* Always configure the `activeView` within the range defined by `topView` and `bottomView`.
*/
activeView?: CalendarView;
/**
* Defines the bottommost Calendar view to which the user can navigate.
* ([See example](slug:datepicker_calendar_options#toc-view-selection-depth)).
*/
bottomView?: CalendarView;
/**
* Determines whether the built-in validator for disabled
* date ranges is enforced when validating a form.
* ([see example]( slug:disabled_dates_datepicker#toc-using-a-function)).
*/
disabledDatesValidation?: boolean;
/**
* Specifies the focused date of the Calendar component.
* ([see example](slug:datepicker_calendar_options#toc-focused-dates)).
*/
focusedDate?: Date;
/**
* Specifies the date format that is used to display the input value.
* ([see example]({% slug formats_datepicker %})).
*/
format?: string;
/**
* Defines the descriptions of the format sections in the input field.
* ([More information and examples]({% slug placeholders_datepicker %})).
*/
formatPlaceHolder?: DateInputFormatPlaceholder;
/**
* Specifies the biggest valid date.
* ([See example]({% slug dateranges_datepicker %})).
*/
max?: Date;
/**
* Specifies the smallest valid date.
* ([See example]({% slug dateranges_datepicker %})).
*/
min?: Date;
/**
* Sets or gets the `navigation` property of the Calendar
* and determines whether the navigation side-bar is displayed.
* ([See example]({% slug sidebar_datepicker %})).
*/
navigation?: boolean;
/**
* Specifies the hint the DatePicker displays when its value is `null`.
* ([More information and examples]({% slug placeholders_datepicker %})).
*/
placeholder?: string;
/**
* Sets the read-only state of the DatePicker input field.
* ([See example]({% slug readonly_datepicker %}#toc-read-only-input)).
*
* If [`readonly`]({% slug api_dateinputs_datepickercomponent %}#toc-readonly) property is set to `true`, the input will appear in a read-only state, without regard to the `readOnlyInput` value.
*/
readOnlyInput?: boolean;
/**
* Sets the read-only state of the DatePicker.
* ([See example]({% slug readonly_datepicker %}#toc-read-only-datepicker)).
*/
readonly?: boolean;
/**
* Sets the title of the input element of the DatePicker.
*/
title?: string;
/**
* Defines the topmost Calendar view to which the user can navigate.
* ([See example](slug:viewdepth_calendar)).
*/
topView?: CalendarView;
/**
* Determines whether to display a week number column in the `month` view of the Calendar.
* ([See example](slug:datepicker_calendar_options#toc-week-number-column)).
*/
weekNumber?: boolean;
/**
* Sets the dates of the DatePicker that will be disabled.
* ([See example]({% slug disabled_dates_datepicker %})).
*/
disabledDates?: ((date: Date) => boolean) | Date[] | Day[];
/**
* Configures the popup options of the DatePicker.
*
* The available options are:
* - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
*/
popupSettings?: PopupSettings;
}