diff --git a/components/calendar/appearance.md b/components/calendar/appearance.md new file mode 100644 index 0000000000..345911e060 --- /dev/null +++ b/components/calendar/appearance.md @@ -0,0 +1,53 @@ +--- +title: Appearance +page_title: Calendar Appearance +description: Appearance settings of the Calendar for Blazor. +slug: calendar-appearance +tags: telerik,blazor,calendar,appearance +published: True +position: 30 +--- + +# Appearance Settings + +This article outlines the available Calendar parameters, which control its appearance. + +## Size + +You can increase or decrease the size of the Calendar by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.Calendar.Size` class: + +| Class member | Manual declaration | +|---|---| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| + +This configuration affects the size of the whole Calendar and its inner elements - header, navigation buttons, cells. The elements' size, padding and font-size vary depending on the selected Calendar size. + +>caption The built-in Calendar sizes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Calendar.Size) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + foreach (var field in fields) + { + string size = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code { + private DateTime DateValue { get; set; } = DateTime.Now; +} +```` + +## See Also + +* [Live Demo: Calendar - Appearance](https://demos.telerik.com/blazor-ui/calendar/appearance) diff --git a/components/calendar/images/calendar-multiple-views.png b/components/calendar/images/calendar-multiple-views.png deleted file mode 100644 index b1c2ca051b..0000000000 Binary files a/components/calendar/images/calendar-multiple-views.png and /dev/null differ diff --git a/components/calendar/multiview.md b/components/calendar/multiview.md index 68b23e2731..106a95683b 100644 --- a/components/calendar/multiview.md +++ b/components/calendar/multiview.md @@ -19,7 +19,16 @@ You can render several instances of the current calendar view next to each other ```` -![Blazor Calendar Multiple Views](images/calendar-multiple-views.png) +Additionally, you may configure the orientation of the views through the `Orientation` parameter of the Calendar. It takes a member of the `CalendarOrientation` enum and defaults to `Horizontal`. + +>caption Render 2 months at a time with vertical orientation + +````CSHTML + + +```` >tip You can still use the other features of the calendar like setting a starting `Date` and [Selection](selection), or the `Min` and `Max` constraints. @@ -27,5 +36,8 @@ You can render several instances of the current calendar view next to each other ## See Also * [Calendar Overview]({%slug components/calendar/overview%}) - * [Live Demo: MultiView Calendar](https://demos.telerik.com/blazor-ui/calendar/multiview) + * [Live Demo: Calendar - MultiView](https://demos.telerik.com/blazor-ui/calendar/multiview) + * [Live Demo: Calendar - Orientation](https://demos.telerik.com/blazor-ui/calendar/orientation) + + diff --git a/components/calendar/overview.md b/components/calendar/overview.md index f5bcc61efb..97dbd6bf16 100644 --- a/components/calendar/overview.md +++ b/components/calendar/overview.md @@ -49,8 +49,6 @@ The selected date is: @selectedDate ```` ->tip The `Date` parameter indicates the view the user is in. You can use its `DateChanged` event to know when the user browses through the Calendar. - ## Navigation The Calendar navigation allows the user to navigate through several views that represent different periods of time, for example, a month or a year. You can control the calendar level (view) at which the user starts, to what detail (view) they can go, the min, max, and current date. To make the Calendar display a specific date programmatically, you can use the `Date` and `View` parameters that support two-way binding. [Read more about the Calendar navigation...]({%slug components/calendar/navigation%}) @@ -71,6 +69,37 @@ You can display a wider range of dates by rendering multiple instances of the Ca The Calendar generates events that you can handle and further customize ist behavior. [Read more about the Blazor Calendar events...]({%slug components/calendar/events%}). +## Calendar Parameters + +The Blazor Calendar provides various parameters that allow you to configure the component. Also check the [Calendar's public API](/blazor-ui/api/Telerik.Blazor.Components.TelerikCalendar). + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Attribute | Type and Default Value | Description | +|----------|----------|----------| +| `BottomView` | `CalendarView` enum
(`Month`) | The most detailed view of the Calendar to which the user can navigate to. | +| `Date` | `DateTime` | The date that indicates the view the user is currently in. Supports two-way binding. | +| `DisabledDates` | `List` | A list of dates that cannot be selected as the start or end of the range. See the Live Demo: Calendar - Disabled Dates. | +| `Max` | `DateTime` | The latest date that the user can select. | +| `Min` | `DateTime` | The earliest date that the user can select. | +| `Orientation` | `CalendarOrientation` enum
(`Horizontal`) | The orientation of the Calendar. The available options are `Horizontal` and `Vertical`. Applicable when using [more than one view]({%slug components/calendar/multiview%}). | +| `RangeStart` | `DateTime` | The selected start date when [range selection]({%slug components/calendar/selection%}#range-selection-mode) is enabled. Supports two-way binding. | +| `RangeEnd` | `DateTime` | The selected end date when [range selection]({%slug components/calendar/selection%}#range-selection-mode) is enabled. Supports two-way binding. | +| `SelectedDates` | `List` | The selected dates when [multiple selection]({%slug components/calendar/selection%}#multiple-selection-mode) is used. | +| `SelectionMode` | `CalendarSelectionMode` enum
(`Single`) | The [selection mode]({%slug components/calendar/selection%}) of the calendar. | +| `Value` | `DateTime` or `DateTime?` | The current value of the component when [single selection]({%slug components/calendar/selection%}#single-selection-mode) is used. Supports two-way binding. | +| `View` | ` CalendarView` enum
(`Month`)| The current view that will be displayed in the Calendar. Supports two-way binding. | +| `Views` | ` int`
(`1`) | The [number of views]({%slug components/calendar/multiview%}) that will be rendered to each other. | +| `TopView` | `CalendarView` enum
(`Century`) | The most aggregated view of the Calendar to which the user can navigate. | + +### Styling and Appearance + +The following parameters enable you to customize the appearance of the Blazor Calendar: + +| Attribute | Type and Default Value | Description | +|----------|----------|----------| +| `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the Calendar (`
Live Demo: Date Range Picker Disabled Dates. -| `Enabled` | `bool` | Specifies whether typing in the input is allowed. -| `Format` | `string` | Specifies the format of the DateInputs of the DateRangePicker. [Read more about supported data formats in Telerik DateInput for Blazor UI]({%slug components/dateinput/supported-formats%}) article. -|`EndId` and `StartId` | `string` | render as the `id` attribute on the `` element, so you can attach a `