Sync with Kendo UI Professional

Author: kendo-bot

CODEOWNERS

@@ -1,7 +1,7 @@
 # jQuery Docs owners
 /docs/ @NikoPenev21 @nelito987 @martintabakov
 # MVC/Core Docs owners
-/docs-aspnet/ @eyupyusein @alestoya @yanisslav @aleksandarevangelatov @StoyanGoranov @mihaela-lukanova @antonmironovv @VicTachev @IvanDanchev
+/docs-aspnet/ @eyupyusein @alestoya @aleksandarevangelatov @mihaela-lukanova @antonmironovv @VicTachev @IvanDanchev
 # Source owners
 /src/ @Iankodj @ag-petrov @pepinho24 @gdenchevprog @iordanGrancharov
 /tests/ @Iankodj @ag-petrov @pepinho24 @gdenchevprog @iordanGrancharov

docs-aspnet/html-helpers/data-management/grid/columns/resizing.md

@@ -12,7 +12,7 @@ The resizing behavior of the Grid columns depends on whether scrolling is enable
 
 For a runnable example, refer to the [demo on resizing columns in the Grid](https://demos.telerik.com/{{ site.platform }}/grid/column-resizing).
 
-When scrolling is disabled and a Grid column is resized, other columns change widths too, so that the sum of all column widths remains constant. If both the columns and the Grid `<div>` already have their minimum possible widths applied, then the resizing of the columns stops working. In such scenarios, use either of the following approaches:
+When scrolling is disabled and a Grid column is resized, other columns change widths too, including the ones with `Resizable` configuration options set to `false`, so that the sum of all column widths remains constant. If both the columns and the Grid `<div>` already have their minimum possible widths applied, then the resizing of the columns stops working. In such scenarios, use either of the following approaches:
 * Apply a larger width to the Grid, or
 * Enable scrolling.
 
@@ -21,6 +21,45 @@ When scrolling is enabled and a column is resized, all other columns maintain th
 * If the sum of all column widths is equal to the width of the Grid, no horizontal scrollbar appears.
 * If the sum of all column widths is less than the width of the Grid, an empty space after the last column appears.
 
+The `2024 Q2` release introduces a `Resizable` configuration option that allows you to disable resizing for specific columns. 
+
+The example below demonstrates how to disable resizing for the `ShipCity` column:
+
+```HtmlHelper
+    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
+        .Name("grid")
+        .Scrollable()
+        .Resizable(resize => resize.Columns(true))    
+        .Columns(columns =>
+        {
+            columns.Bound(o => o.OrderDate).Width(110).Format("{0:MM/dd/yyyy}");
+            columns.Bound(o => o.ShipCountry).Width(110).MinResizableWidth(100);
+            columns.Bound(o => o.ShipCity).Resizable(false).Width(110);
+            columns.Bound(o => o.ShipName).Width(200);
+            columns.Bound(o => o.ShipAddress).Format("{0:MM/dd/yyyy}");
+            columns.Bound(o => o.OrderID).Width(60);
+        })
+    )
+
+```
+{% if site.core %}
+```TagHelper
+    @addTagHelper *, Kendo.Mvc
+
+    <kendo-grid name="grid" resizable="true">
+        <scrollable enabled="true"/>
+        <columns>
+            <column field="OrderDate" width="110" format="{0:MM/dd/yyyy}"/>
+            <column field="ShipCountry" width="110" min-resizable-width="100"/>
+            <column field="ShipCity" resizable="false" width="110"/>
+            <column field="ShipName" width="200"/>
+            <column field="ShipAddress"/>
+            <column field="OrderID" width="60"/>
+        </columns>
+    </kendo-grid>
+```
+{% endif %}
+
 By design, the last column of the Grid has no right border, so that no double border appears at the right end of the Grid if the Grid table width matches the Grid width. If needed, you can apply a right border with the CSS code from the following example. The color value of the `#ccc` border has to match the color of the cell border from the Kendo UI theme. To obtain this, check the styles of the table cell by using a DOM inspector.
 
     .k-grid-header-wrap > table,

docs/api/javascript/ui/calendar.md

@@ -12,6 +12,38 @@ Represents the Kendo UI Calendar widget. Inherits from [Widget](/api/javascript/
 
 ## Configuration
 
+### allowReverse `Boolean` *(default: false)*
+
+Enables the user to select an end date that is before the start date. This option is available only when the [`selectable`](/api/javascript/ui/calendar/configuration/selectable) configuration is set to **range**.
+
+#### Example - enable reverse selection
+
+    <div id="calendar"></div>
+    <script>
+        $("#calendar").kendoCalendar({
+            selectable: "range",
+            allowReverse: true,
+            showOtherMonthDays: false
+        });
+    </script>
+
+### centuryCellsFormat `String`*(default: "long")*
+
+ Specifies the format of the century cells.
+
+* `"long"` - The cells will display a decade range **2000-2009**, **2010-2019**.
+* `"short"` - The cells will display just the starting year of the decade **2000**, **2010**.
+
+#### Example - render the short version of the century cells
+
+    <div id="calendar"></div>
+    <script>
+        $("#calendar").kendoCalendar({
+            centuryCellsFormat: "short",
+            start: "century"
+        });
+    </script>
+
 ### componentType `String`*(default: "classic")*
 
  Specifies the component type of the widget.
@@ -410,7 +442,7 @@ Allows customization of the text of the Today button present in the widget in it
 
 ### selectable `String`  *(default: "single")*
 
-By default user is able to select a single date. The property can also be set to "multiple" in order the multiple  date selection to be enabled. More information about multiple selection can be found in the [Selection]({% slug overview_kendoui_calendar_widget %}#selection) article.
+By default user is able to select a single date. The property can also be set to **multiple** or **range**. More information about the different selection modes can be found in the [Selection]({% slug overview_kendoui_calendar_widget %}#selection) article.
 
 #### Example - enable the multiple selection
 
@@ -485,6 +517,35 @@ The following settings are available for the **start** value:
         });
     </script>
 
+### range `Object`*(default: { start: null, end: null })*
+
+Specifies an initial range selection. This option is available only when the [`selectable`](/api/javascript/ui/calendar/configuration/selectable) configuration is set to `range`. 
+
+#### Example - specify the selected range of the component
+
+    <div id="calendar"></div>
+    <script>
+        $("#calendar").kendoCalendar({
+            selectable: "range",
+            range: { start: new Date(2024, 3, 3), end: new Date(2024, 3, 13) }
+        });
+    </script>
+
+### showOtherMonthDays `Boolean`*(default: true)*
+
+When this configuration is enabled, the calendar will render days from the previous and next months in the current view.
+
+> The `showOtherMonthDays` configuration is not compatible with the [`range`](/api/javascript/ui/calendar/configuration/selectable) selection. It is advised that this property is set to **false** when `selectable` is set to **range**.
+
+#### Example - Hide dates from the other months
+
+    <div id="calendar"></div>
+    <script>
+        $("#calendar").kendoCalendar({
+            showOtherMonthDays: false
+        });
+    </script>
+
 ## Methods
 
 ### current

docs/api/javascript/ui/daterangepicker.md

@@ -11,6 +11,32 @@ Represents the Kendo UI DateRangePicker widget. Inherits from [Widget](/api/java
 
 ## Configuration
 
+### allowReverse `Boolean` *(default: false)*
+
+Enables the user to select an end date that is before the start date.
+
+#### Example - enable reverse selection
+
+    <div id="daterangepicker"></div>
+    <script>
+        $("#daterangepicker").kendoDateRangePicker({
+            allowReverse: true
+        });
+    </script>
+
+### autoClose `Boolean` *(default: true)*
+
+Specifies whether the calendar popup should close automatically when a range is selected.
+
+#### Example - prevent the popup closure
+
+    <div id="daterangepicker"></div>
+    <script>
+        $("#daterangepicker").kendoDateRangePicker({
+            autoClose: false
+        });
+    </script>
+
 ### adaptiveMode `String`*(default: "none")*
 
 Specifies the adaptive rendering of the component. The supported values are: `none` *(default)*, `auto`.
@@ -32,6 +58,32 @@ Specifies the adaptive rendering of the component. The supported values are: `no
     });
     </script>
 
+### calendarButton `Boolean` *(default: false)*
+
+If this configuration is enabled, a calendar button will appear inside the date inputs. This is similar to the calendar button in the DatePicker component. The calendar popup will be opened only when the button is clicked. Clicking inside the input itself will have no effect.
+
+#### Example - render the calendar buttons
+
+    <div id="daterangepicker"></div>
+    <script>
+        $("#daterangepicker").kendoDateRangePicker({
+            calendarButton: true
+        });
+    </script>
+
+### clearButton `Boolean` *(default: false)*
+
+If this configuration is enabled, a clear button will appear in the date inputs where a date is selected. Clicking on the clear button will remove the selected date from the input.
+
+#### Example - render the clear button
+
+    <div id="daterangepicker"></div>
+    <script>
+        $("#daterangepicker").kendoDateRangePicker({
+            clearButton: true
+        });
+    </script>
+
 ### culture `String`*(default: "en-US")*
 
  Specifies the culture info used by the widget.

docs/api/javascript/ui/multiviewcalendar.md

@@ -12,6 +12,37 @@ Represents the Kendo UI MultiViewCalendar widget. Inherits from [Widget](/api/ja
 
 ## Configuration
 
+### allowReverse `Boolean` *(default: false)*
+
+Enables the user to select an end date that is before the start date. This option is available only when the [`selectable`](/api/javascript/ui/multiviewcalendar/configuration/selectable) configuration is set to **range**.
+
+#### Example - enable reverse selection
+
+    <div id="multiViewCalendar"></div>
+    <script>
+        $("#multiViewCalendar").kendoMultiViewCalendar({
+            selectable: "range",
+            allowReverse: true
+        });
+    </script>
+
+### centuryCellsFormat `String`*(default: "long")*
+
+ Specifies the format of the century cells.
+
+* `"long"` - The cells will display a decade range **2000-2009**, **2010-2019**.
+* `"short"` - The cells will display just the starting year of the decade **2000**, **2010**.
+
+#### Example - render the short version of the century cells
+
+    <div id="multiViewCalendar"></div>
+    <script>
+        $("#multiViewCalendar").kendoMultiViewCalendar({
+            centuryCellsFormat: "short",
+            start: "century"
+        });
+    </script>
+
 ### culture `String`*(default: "en-US")*
 
  Specifies the culture info used by the widget.
@@ -442,6 +473,21 @@ The following settings are available for the **start** value:
         });
     </script>
 
+### showOtherMonthDays `Boolean`*(default: false)*
+
+When this configuration is enabled, the MultiViewCalendar will render days from the previous and next months in the current views.
+
+> The `showOtherMonthDays` configuration is not compatible with the [`range`](/api/javascript/ui/multiviewcalendar/configuration/selectable) selection. It is advised that this property is set to **false** when `selectable` is set to **range**.
+
+#### Example - Show dates from the other months
+
+    <div id="multiViewCalendar"></div>
+    <script>
+        $("#multiViewCalendar").kendoCalendar({
+            showOtherMonthDays: true
+        });
+    </script>
+
 ## Methods
 
 ### current

docs/controls/calendar/century-cells-format.md

@@ -0,0 +1,27 @@
+---
+title: Calendar Century Cells Format
+page_title: jQuery Calendar Documentation - Calendar Century Cells Format
+description: "Learn the possible formats for the century cells in the Kendo for jQuery Calendar."
+slug: century_cells_format_calendar
+position: 9
+---
+
+# Century Cells Format
+
+As of R2 2024 version of the Kendo UI suite, the Calendar component on option to choose from two formats for the century cells in the Calendar century view. The default value of the [`centuryCellsFormat`](/api/javascript/ui/calendar/configuration/centurycellsformat) configuration is `long` which causes the cells to render like "2010-2019". The below example shows how you can change the format to display only the starting year of the decade.
+
+```dojo
+    <div id="calendar"></div>
+    <script>
+        $("#calendar").kendoCalendar({
+            centuryCellsFormat: "short",
+            start: "century"
+        });
+    </script>
+```
+ 
+
+## See Also
+
+* [Century Cells Format Demo of the Calendar](https://demos.telerik.com/kendo-ui/calendar/century-cells-format)
+* [JavaScript API Reference of the Calendar](/api/javascript/ui/calendar)

docs/controls/calendar/component-type.md

@@ -1,7 +1,7 @@
 ---
 title: Calendar Component Types
-page_title: jQuery DatePicker Documentation - Calendar Component Types
-description: "Get started with the jQuery DatePicker by Kendo UI and learn how to enable the modern component type."
+page_title: jQuery Calendar Documentation - Calendar Component Types
+description: "Get started with the jQuery Calendar by Kendo UI and learn how to enable the modern component type."
 slug: componenttypes_calendar
 position: 8
 ---

docs/controls/calendar/overview.md

@@ -22,6 +22,9 @@ The component also supports custom templates for its Month view and configuratio
 * [Day template]({% slug daytemplate_kendoui_calendar %})–You can modify the appearance of one or more Calendar days.
 * [Week numbers]({% slug weeknum_kendoui_calendar %})–The Calendar also enables you to showcase the week number.
 * [Selection]({% slug selection_kendoui_calendar %})–You can also enable the user to select one or more Calendar dates.
+* [Century Cells Format]({% slug century_cells_format_calendar %})—The component exposes two formats for the century cells.
+* [Reverse Selection]({% slug reverse_selection_calendar %})—The component allows you to pick an end date which is before the start date.
+* [Show Other Month Days]({% slug other_month_days_calendar %})—The component allows you to pick an end date which is before the start date.
 * [Accessibility]({% slug accessibility_calendar %})–The Calendar is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.
 
 ## Next Steps

docs/controls/calendar/reverse-selection.md

@@ -0,0 +1,28 @@
+---
+title: Calendar Reverse Selection
+page_title: jQuery Calendar Documentation - Calendar Reverse Selection
+description: "Check the reverse selection feature in the Kendo for jQuery Calendar."
+slug: reverse_selection_calendar
+position: 10
+---
+
+# Reverse Selection
+
+As of R2 2024 version of the Kendo UI suite, the Calendar provides an [`allowReverse`](/api/javascript/ui/calendar/configuration/allowreverse) selection. It allows you to pick an end date which is before the selected start date when the [`selectable`](/api/javascript/ui/calendar/configuration/selectable) option is set to `range`.
+
+```dojo
+    <div id="calendar"></div>
+    <script>
+        $("#calendar").kendoCalendar({
+            selectable: "range",
+            allowReverse: true,
+            showOtherMonthDays:false
+        });
+    </script>
+```
+> When range selection is configured, the [`showOtherMonthDays`](/api/javascript/ui/calendar/configuration/showothermonthdays) needs to be set to `false`.
+
+## See Also
+
+* [Reverse Selection Demo of the Calendar](https://demos.telerik.com/kendo-ui/calendar/reverse-selection)
+* [JavaScript API Reference of the Calendar](/api/javascript/ui/calendar)

docs/controls/calendar/selection.md

@@ -30,8 +30,8 @@ To perform the multiple date selection, the user can also use the keyboard:
    <div id="calendar"></div>
    <script>
     $("#calendar").kendoCalendar({
-		selectable: "multiple"
-	});
+		  selectable: "multiple"
+	  });
   </script>
 ```
 
@@ -41,9 +41,9 @@ The following image demonstrates a Calendar with selected multiple dates.
 
 ## Range Date Selection
 
-The Calendar enables the range date selection over the keyboard.
+The Calendar enables the range date selection over the keyboard. As of R2 2024 release, the component supports `range` selection through the [`selectable`](/api/javascript/ui/calendar/configuration/selectable) option.
 
-The usage of the `Shift` key allows the user to select a range of dates in the same month or across different months:
+The usage of the `Shift` key allows the user to select a range of dates in the same month or across different months when the [`selectable`](/api/javascript/ui/calendar/configuration/selectable) configuration is set to `multiple`:
 
 * `Shift` + mouse-clicking specific dates&mdash;Selects all dates between the most recently selected one (with `Space` or mouse click) and the clicked cell.
 * `Shift` + mouse clicking specific dates&mdash;If no previous selection was made, selects all dates from the beginning to the clicked cell.