[3.7] docs(calendar, daterangepicker): size and orientation documentation

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();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikCalendar @bind-Value="@DateValue" Size="@size"></TelerikCalendar>
+        </div>
+    }
+}
+
+@code {
+    private DateTime DateValue { get; set; } = DateTime.Now;
+}
+````
+
+## See Also
+
+* [Live Demo: Calendar - Appearance](https://demos.telerik.com/blazor-ui/calendar/appearance)

components/calendar/multiview.md

@@ -19,13 +19,25 @@ You can render several instances of the current calendar view next to each other
 </TelerikCalendar>
 ````
 
-![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
+<TelerikCalendar Orientation="@CalendarOrientation.Vertical"
+                 Views="2"
+                 View="CalendarView.Month">
+</TelerikCalendar>
+````
 
 >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.
 
 
 ## 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)
+
+
 

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 <br /> (`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<DateTime>` | A list of dates that cannot be selected as the start or end of the range. See the <a href="https://demos.telerik.com/blazor-ui/calendar/disabled-dates" target="_blank">Live Demo: Calendar - Disabled Dates</a>. |
+| `Max` | `DateTime` | The latest date that the user can select. |
+| `Min` | `DateTime` | The earliest date that the user can select. |
+| `Orientation` | `CalendarOrientation` enum <br /> (`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<DateTime>` | The selected dates when [multiple selection]({%slug components/calendar/selection%}#multiple-selection-mode) is used. |
+| `SelectionMode` | `CalendarSelectionMode` enum <br /> (`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 <br /> (`Month`)| The current view that will be displayed in the Calendar. Supports two-way binding. |
+| `Views` | ` int` <br/> (`1`) | The [number of views]({%slug components/calendar/multiview%}) that will be rendered to each other. |
+| `TopView` | `CalendarView` enum <br /> (`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 (`<div class="k-calendar>`). |
+
 ## Calendar Reference and Methods
 
 Add a reference to the component instance to use the [Calendar methods](/blazor-ui/api/Telerik.Blazor.Components.TelerikCalendar).

components/dateinput/appearance.md

@@ -124,3 +124,6 @@ The `FillMode` controls how the TelerikDateInput is filled. You can set it to a
 }
 ````
 
+## See Also
+
+* [Live Demo: DateInput - Appearance](https://demos.telerik.com/blazor-ui/dateinput/appearance)

components/datepicker/appearance.md

@@ -124,3 +124,6 @@ The `FillMode` controls how the TelerikDatePicker is filled. You can set it to a
 }
 ````
 
+## See Also
+
+* [Live Demo: DatePicker - Appearance](https://demos.telerik.com/blazor-ui/datepicker/appearance)

components/datepicker/overview.md

@@ -76,7 +76,7 @@ The Blazor Date Picker provides various parameters that allow you to configure t
 | `Placeholder` | `string` | The `placeholder` attribute of the HTML element. The placeholder will appear if the component is bound to a **nullable** DateTime object - `DateTime?`. It will not be rendered if the component is bound to the default value of a non-nullable DateTime object. The Placeholder value will be displayed when the input is not focused. Once the user focuses it to start typing, the Format Placeholder (default or [customized one](#format-placeholder)) will override the Placeholder to indicate the format the date should be entered in. |
 | `ValidateOn` | `ValidationEvent` enum <br/> (`Input`) | Configures the event that will trigger validation (if validation is enabled). Read more at [Validation Modes for Simple Inputs]({%slug common-features/input-validation%}#validation-modes-for-simple-inputs). |
 | `Value` | `DateTime` or `DateTime?` | The current value of the component. Supports two-way binding. |
-| `View` | ` CalendarView` | The current view that will be displayed in the popup calendar. |
+| `View` | ` CalendarView` enum <br/> (`Month`) | The current view that will be displayed in the popup calendar. |
 
 The date picker is, essentially, a [date input]({%slug components/dateinput/overview%}) and a [calendar]({%slug components/calendar/overview%}) and the properties it exposes are mapped to the corresponding properties of these two components. You can read more about their behavior in the respective components' documentation.
 

components/daterangepicker/appearance.md

@@ -130,3 +130,6 @@ The `FillMode` controls how the TelerikDateRangePicker is filled. You can set it
 }
 ````
 
+## See Also
+
+* [Live Demo: DateRangePicker - Appearance](https://demos.telerik.com/blazor-ui/daterangepicker/appearance)

components/daterangepicker/overview.md

@@ -54,26 +54,27 @@ To restrict the user from writing dates in the input so that the end is after th
 
 The DateRangePicker allows you to customize the rendering of the Calendar popup header. Learn more from the [Header Template article]({%slug daterangepicker-header-template%}).
 
-## Parameters
+## DateRangePicker Parameters
 
 The Blazor Date Range Picker provides various parameters that allow you to configure the component. Also check the [DateRangePicker's public API](/blazor-ui/api/Telerik.Blazor.Components.TelerikDateRangePicker-1).
 
 @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
 | Attribute | Type and Default Value | Description |
 |----------|----------|----------|
-| `BottomView` | ` CalendarView` <br/> `CalendarView.Month` | Defines the bottommost view in the popup calendar to which the user can navigate to. Defaults to `CalendarView.Month`.
-| `DebounceDelay` | `int` <br/> 150 | Time in milliseconds between the last typed symbol and the value update. Use it to balance between client-side performance and number of database queries.
-| `DisabledDates` | `List<DateTime>` | Specifies a list of dates that can not be selected as the start or end of the range, see the <a href="https://demos.telerik.com/blazor-ui/daterangepicker/disabled-dates" target="_blank">Live Demo: Date Range Picker Disabled Dates</a>.
-| `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 `<input />` element, so you can attach a `<label for="">` to the input.
-| `Min` | `DateTime` | The earliest date that the user can select.
-|`Max` | `DateTime` | The latest date that the user can select.
-| `StartValue` and `EndValue` | `T` | The current values of the inputs for start and end of the range. Can be used for two-way binding.
-| `View` | ` CalendarView` | Specifies the current view that will be displayed in the popup calendar.
-| `TabIndex` | `int?` | maps to the `tabindex` attribute of both `input` HTML elements in the component and them both will have the same `tabindex`. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
-| `Placeholder` |`string` | maps to the `placeholder` attribute of the HTML element. The `Placeholder` will appear if the component is bound to **nullable** DateTime object - `DateTime?`, but will not be rendered if the component is bound to the default value of a non-nullable DateTime object. The Placeholder value will be displayed when the input is not focused. Once the user focuses it to start typing, the Format Placeholder (default or [customized one](#format-placeholder)) will override the Placeholder to indicate the format the date should be entered in.
+| `BottomView` | ` CalendarView` enum <br/> (`Month`) | Defines the bottommost view in the popup calendar to which the user can navigate to. |
+| `DebounceDelay` | `int` <br/> (`150`) | Time in milliseconds between the last typed symbol and the value update. Use it to balance between client-side performance and number of database queries. |
+| `DisabledDates` | `List<DateTime>` | A list of dates that can not be selected as the start or end of the range. See the <a href="https://demos.telerik.com/blazor-ui/daterangepicker/disabled-dates" target="_blank">Live Demo: Date Range Picker Disabled Dates</a>. |
+| `Enabled` | `bool` | Whether typing in the inputs is allowed. |
+| `Format` | `string` | 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` | The `id` attribute on the `<input />` element, so you can attach a `<label for="">` to the input. |
+| `Min` | `DateTime` | The earliest date that the user can select. |
+| `Max` | `DateTime` | The latest date that the user can select. |
+| `Orientation` | `CalendarOrientation`enum <br /> (`Horizontal`) | The orientation of the calendar popup. The available options are `Horizontal` and `Vertical`. |
+| `StartValue` and `EndValue` | `T` | The current values of the inputs for start and end of the range. Can be used for two-way binding. |
+| `View` | ` CalendarView` enum <br/> (`Month`) | The current view that will be displayed in the popup calendar. |
+| `TabIndex` | `int?` | The `tabindex` attribute of both `input` HTML elements in the component. They both will have the same `tabindex`. Use it to customize the tabbing (focus) order of the inputs on your page. |
+| `Placeholder` |`string` | The `placeholder` attribute of the two `<input />` elements. The `Placeholder` will appear if the component is bound to **nullable** DateTime objects - `DateTime?`, but will not be rendered if the component is bound to the default value of a non-nullable DateTime objects. The Placeholder value will be displayed when the input is not focused. Once the user focuses it to start typing, the Format Placeholder (default or [customized one](#format-placeholder)) will override the Placeholder to indicate the format the date should be entered in. |
 
 The date range picker is, essentially, a [date input]({%slug components/dateinput/overview%}) and a [calendar]({%slug components/calendar/overview%}) and the properties it exposes are mapped to the corresponding properties of these two components. You can read more about their behavior in the respective components' documentation.
 
@@ -83,7 +84,7 @@ The following parameters enable you to customize the appearance of the Blazor Da
 
 | Attribute | Type and Default Value | Description |
 |----------|----------|----------|
-| `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the Date Range Picker
+| `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the Date Range Picker.
 | `PopupClass` | `string` | additional CSS class to customize the appearance of the Date Range Picker's dropdown.
 
 You can find more options for customizing the Date Range Picker styling in the [Appearance article]({%slug daterangepicker-appearance%}).

components/datetimepicker/appearance.md

@@ -124,3 +124,6 @@ The `FillMode` controls how the TelerikDateTimePicker is filled. You can set it
 }
 ````
 
+## See Also
+
+* [Live Demo: DateTimePicker - Appearance](https://demos.telerik.com/blazor-ui/datetimepicker/appearance)

components/timepicker/appearance.md

@@ -124,3 +124,6 @@ The `FillMode` controls how the TelerikTimePicker is filled. You can set it to a
 }
 ````
 
+## See Also
+
+* [Live Demo: TimePicker - Appearance](https://demos.telerik.com/blazor-ui/timepicker/appearance)