chore(calendar): updates for 2.0.0

Author: marin-bratanov

components/calendar/images/up-down-navigation.gif

@@ -24,11 +24,12 @@ You can control how far the user can go by setting the `Min` and `Max` propertie
 The user starts in April 2019 and can navigate between January 2019 and July 2019.
 <br />
 
-<TelerikCalendar Date="@startDate" View="@CalendarView.Month" Min="@minDate" Max="@maxDate"></TelerikCalendar>
+<TelerikCalendar @bind-Date="@startDate" @bind-View="@selectedView" Min="@minDate" Max="@maxDate"></TelerikCalendar>
 @code {
-	DateTime startDate = new DateTime(2019, 4, 1);
-	DateTime minDate = new DateTime(2019, 1, 1);
-	DateTime maxDate = new DateTime(2019, 7, 31);
+    DateTime startDate = new DateTime(2019, 4, 1);
+    DateTime minDate = new DateTime(2019, 1, 1);
+    DateTime maxDate = new DateTime(2019, 7, 31);
+    CalendarView selectedView { get; set; } = CalendarView.Month;
 }
 ````
 
@@ -57,22 +58,23 @@ You can control how much detail the user can go into by setting the `BottomView`
 The user starts in the Decade view and can only go down to years.
 <br />
 
-<TelerikCalendar BottomView="@CalendarView.Year" View="@CalendarView.Decade" 
-                Min="@min" Max="@max" ValueChanged="@MyValueChangeHandler">
+<TelerikCalendar BottomView="@CalendarView.Year" @bind-View="@SelectedView"
+                 Min="@min" Max="@max" ValueChanged="@MyValueChangeHandler">
 </TelerikCalendar>
 
-The selected date is: @selectedDate
+<br />The selected date is: @selectedDate
 
 @code {
-	private DateTime min = new DateTime(2015, 1, 1);
-	private DateTime max = new DateTime(2025, 12, 31);
-	private string selectedDate = "";
-
-	private void MyValueChangeHandler(DateTime newValue)
-	{
-		selectedDate = newValue.ToString();
-		StateHasChanged();
-	}
+    private DateTime min = new DateTime(2015, 1, 1);
+    private DateTime max = new DateTime(2025, 12, 31);
+    private CalendarView SelectedView { get; set; } = CalendarView.Decade;
+    private string selectedDate = "";
+
+    private void MyValueChangeHandler(DateTime newValue)
+    {
+        selectedDate = newValue.ToString();
+        StateHasChanged();
+    }
 }
 ````
 
@@ -87,12 +89,10 @@ You can make the Calendar component move to a certain date and view through its
 >caption Navigate the Calendar to a date and view programmatically
 
 ````CSHTML
-Programmatic Calendar navigation<br />
+@* Programmatic Calendar navigation *@
 
-<TelerikCalendar Date="@startDate"
-                    Min="@min"
-                    Max="@max"
-                    View="@calendarView">
+<TelerikCalendar @bind-Date="@startDate" @bind-View="@calendarView"
+                 Min="@min" Max="@max">
 </TelerikCalendar>
 <TelerikButton OnClick="@UpdateView">Update View</TelerikButton>
 

components/calendar/navigation.md

@@ -17,9 +17,10 @@ To use a Telerik Calendar for Blazor, add the `TelerikCalendar` tag.
 >caption Basic calendar with its key features, and ValueChanged event handling
 
 ````CSHTML
-Main Calendar features, ValueChanged event handling.<br />
+@* Main Calendar features, ValueChanged event handling. *@
+<br />
 
-<TelerikCalendar Min="@min" Max="@max" ValueChanged="@MyValueChangeHandler" Date="@DateTime.Now">
+<TelerikCalendar Min="@min" Max="@max" ValueChanged="@MyValueChangeHandler" @bind-Date="@theDate">
 </TelerikCalendar>
 
 <br />
@@ -29,14 +30,15 @@ The selected date is: @selectedDate
 
     private DateTime min = new DateTime(2015, 1, 1);
     private DateTime max = new DateTime(2025, 12, 31);
+    private DateTime theDate { get; set; } = DateTime.Now;
     private string selectedDate = "";
 
     private void MyValueChangeHandler(DateTime newValue)
     {
         selectedDate = newValue.ToString("dd MMM yyyy");
-        StateHasChanged();
     }
 }
+
 ````
 
 >caption The result from the code snippet above

components/calendar/overview.md

@@ -43,7 +43,7 @@ The user will not be able to select the first and second of April 2019.
 <h4>Single Selection</h4>
 
 <TelerikCalendar SelectionMode="@CalendarSelectionMode.Single" ValueChanged="@SingleSelectionChangeHandler"
-                 DisabledDates="@DisabledDates" Date="@startDate">
+                 DisabledDates="@DisabledDates" @bind-Date="@startDate">
 </TelerikCalendar>
 <br />
 @if (selectedDate != null)
@@ -55,7 +55,7 @@ The user will not be able to select the first and second of April 2019.
 <h4>Multiple Selection</h4>
 
 <TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple" ValueChanged="@MultipleSelectionChangeHandler"
-                 DisabledDates="@DisabledDates" Date="@startDate" @ref="multipleSelCalendar">
+                 DisabledDates="@DisabledDates" @bind-Date="@startDate" @ref="multipleSelCalendar">
 </TelerikCalendar>
 <br />
 @if (chosenDates != null && chosenDates.Count > 0)
@@ -69,29 +69,30 @@ The user will not be able to select the first and second of April 2019.
 }
 
 @code {
-    private DateTime startDate = new DateTime(2019, 4, 1);//set the initial date of the calendar
+    private DateTime startDate = new DateTime(2019, 4, 1); // set the initial date of the calendar
 
-    //set dates the user can't select
+    // set dates the user can't select
     private List<DateTime> DisabledDates = new List<DateTime>() { new DateTime(2019, 4, 1), new DateTime(2019, 4, 2) };
 
-    //fields to store and render the user selection
+    // fields to store and render the user selection
     private DateTime? selectedDate { get; set; } = null;
     private List<DateTime> chosenDates { get; set; }
 
     private void SingleSelectionChangeHandler(DateTime newValue)
     {
-        //with single selection, the argument is a single DateTime object with the new selection
+        // with single selection, the argument is a single DateTime object with the new selection
         selectedDate = newValue;
     }
 
-    //reference used to obtain the selected dates from a multiple selection calendar
+    // reference used to obtain the selected dates from a multiple selection calendar
     private Telerik.Blazor.Components.TelerikCalendar multipleSelCalendar;
     private void MultipleSelectionChangeHandler()
     {
         //with multiple selection, get the selected dates from a component reference
         chosenDates = multipleSelCalendar.SelectedDates;
     }
 }
+
 ````
 
 

components/calendar/selection.md

@@ -62,7 +62,8 @@ This is a list of the components that had methods removed and the new approach o
 
 ### Calendar
 
-* The `Navigate()` method is no longer available. Use binding for the `View` and `Date` parameters. An example is avalable in the [Navigate]({%slug components/calendar/navigation%}#programmatic-navigation) article.
+* The `Navigate()` method is no longer available in favor of two-way binding for the `View` and `Date` parameters. An example is avalable in the [Navigate]({%slug components/calendar/navigation%}#programmatic-navigation) article.
+* The `View` and `Date` parameters should be used with two-way binding. Otherwise, state changes (like selection) may revert them to the values set in the markup and move the user unexpectedly.
 
 ### DatePicker