System.ArgumentOutOfRangeException: Year, Month, and Day parameters describe an un-representable DateTime.
This issue happens when using DayView, MultiDayView, Month view modes and when scrolling through the calendar to change the selected date.
The issue happens on specific devices with android 14, Pixel 7, Galaxy S22.
Workaround:
Setting the time zone in calendar renderer to the DayView timelabelformat
public override bool TrySetViewMode(CalendarViewMode view, bool isAnimated)
{
if (view == CalendarViewMode.Day)
{
Control.DayView.DayEventsViewStyle.TimeLabelFormat.TimeZone = Java.Util.TimeZone.GetTimeZone("add time zone here");
}
return base.TrySetViewMode(view, isAnimated);
}
It would be handy to enable dates/disable dates based on an array of dates.
I have a situation where drivers are scheduled jobs that may exclude days within a 3-week period. Currently I can only select set the minimum and maximum dates for this period which allows them to select dates where no work is scheduled. Consequently my code must check if the selected date "is valid" before allowing displaying the jobs for the selected date.
Obviously it would be far easier if those dates were never enabled in the first place.
Hi,
I have been using Telerik controls for the last 4 years in WPF. One of the controls widely used is the RadScheduleView in which I manage customer appointments in hair dresser salons. Recently I tried to implement the same functionality on Mobile Apps using Xamarin.
Some of the appointments generated by users contain overlapping times since they are serviced by different employees. This functionality in WPF is managed perfectly using RadScheduleView. Now I am using the same data by downloading it into a MobileApp (for now Android App) and reproducing similar appointments but on RadCalendar. Every time an appointment have overlaps, the way system is recreating it on the calendar is misleading and sometimes appointments are also hidden.
The following is a Code snippet that also produce the same results.
Steps to reproduce:
1. Appointment View module that inherits from Telerik.XamarinForms.Input.Appointment and add additional properties to manage appointments:
public class AppointmentViewModel : Telerik.XamarinForms.Input.Appointment { public Int32 PK { get; set; } = -1; public String DisplayStartTime { get { return StartDate.ToString("HH:mm"); } } public String DisplayEndTime { get { return EndDate.ToString("HH:mm"); } } public double AppointmentDate { get { return StartDate.Date.ToOADate(); } } public string AppointmentDisplayDate { get { return StartDate.Date.ToString("ddd dd MMM"); } } }
Note: To render appointments, I am still using default properties of the class Telerik.XamarinForms.Input.Appointment, see point 3.
2. Create Page (XAML) with calendar and a refresh button:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
xmlns:zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
xmlns:telerikGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid"
xmlns:helper="clr-namespace:ProductManager.Helper_Code"
xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
x:Class="ProductManager.Pages.pgAppointments" Appearing="ContentPage_Appearing" Disappearing="ContentPage_Disappearing" >
<ContentPage.Content>
<Gride HorizontalOptions="Fill" VerticalOptions="Fill" Margin="0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<telerikInput:RadCalendar x:Name="cntAppoints"
Grid.Row="0"
VerticalOptions="Fill" HorizontalOptions="Fill"
GridLinesDisplayMode="Show"
ViewMode="Day"
DisplayDateChanged="CntAppoints_DisplayDateChanged"
SelectionMode="Single" SelectionChanged="CntAppoints_SelectionChanged"
NativeControlLoaded="CntAppoints_NativeControlLoaded"
TimeSlotTapped="CntAppoints_TimeSlotTapped"
ViewChanged="CntAppoints_ViewChanged" CellTapped="CntAppoints_CellTapped"
SchedulingUiEnabled="True" AppointmentTapped="CntAppoints_AppointmentTapped" >
<telerikInput:RadCalendar.DayViewSettings>
<telerikInput:DayViewSettings DayStartTime="00:00:00"
DayEndTime="23:40:00"
TimelineInterval="15" />
</telerikInput:RadCalendar.DayViewSettings>
<telerikInput:RadCalendar.DayViewStyle>
<telerikInput:DayViewStyle
AllDayAppointmentFontSize="10"
TimelineLabelsTextColor="DarkGray"
TimelineLabelsFontSize="10"
AppointmentFontSize="10"
AppointmentDetailsFontSize="8"/>
</telerikInput:RadCalendar.DayViewStyle>
<telerikInput:RadCalendar.MultiDayViewSettings>
<telerikInput:MultiDayViewSettings DayStartTime="00:00:00"
DayEndTime="23:40:00"
TimelineInterval="15" />
</telerikInput:RadCalendar.MultiDayViewSettings>
<telerikInput:RadCalendar.MultiDayViewStyle>
<telerikInput:MultiDayViewStyle
AllDayAppointmentFontSize="10"
TimelineLabelsTextColor="DarkGray"
TimelineLabelsFontSize="10"
AppointmentFontSize="10"
AppointmentDetailsFontSize="8"/>
</telerikInput:RadCalendar.MultiDayViewStyle>
</telerikInput:RadCalendar>
<telerikInput:RadButton x:Name="btnRefresh"
Clicked="BtnRefresh_Clicked" HorizontalContentAlignment="End" VerticalContentAlignment="Center"
HorizontalOptions="Center" VerticalOptions="Center"
BackgroundColor="Transparent"
Grid.Row="1" Text="Refresh" />
</Grid>
</ContentPage.Content>
</ContentPage>
3. Code Behind the Refresh Button :
private void BtnRefresh_Clicked(object sender, EventArgs e)
{
cntAppoints.DisplayDate = DateTime.Parse("11/05/2019");
ObservableCollection<AppointmentViewModel> apps = new ObservableCollection<AppointmentViewModel>() {
new AppointmentViewModel()
{
PK =1,
Title="Customer 1",
StartDate=DateTime.Parse("2019-05-11T08:00:00"),
EndDate=DateTime.Parse("2019-05-11T08:45:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =2,
Title="Customer 2",
StartDate=DateTime.Parse("2019-05-11T08:00:00"),
EndDate=DateTime.Parse("2019-05-11T18:00:00"),
Detail="Station: STATION 3",
IsAllDay=true
},
new AppointmentViewModel()
{
PK =3,
Title="Customer 3",
StartDate=DateTime.Parse("2019-05-11T08:00:00"),
EndDate=DateTime.Parse("2019-05-11T08:30:00"),
Detail="Station: STATION 4"
},
new AppointmentViewModel()
{
PK =4,
Title="Customer 4",
StartDate=DateTime.Parse("2019-05-11T08:30:00"),
EndDate=DateTime.Parse("2019-05-11T08:45:00"),
Detail="Station: STATION 4"
},
new AppointmentViewModel()
{
PK =5,
Title="Customer 5",
StartDate=DateTime.Parse("2019-05-11T09:00:00"),
EndDate=DateTime.Parse("2019-05-11T09:30:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =6,
Title="Customer 6",
StartDate=DateTime.Parse("2019-05-11T09:00:00"),
EndDate=DateTime.Parse("2019-05-11T09:15:00"),
Detail="Station: STATION 4"
},
new AppointmentViewModel()
{
PK =7,
Title="Customer 7",
StartDate=DateTime.Parse("2019-05-11T09:15:00"),
EndDate=DateTime.Parse("2019-05-11T10:00:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =8,
Title="Customer 8",
StartDate=DateTime.Parse("2019-05-11T09:30:00"),
EndDate=DateTime.Parse("2019-05-11T09:45:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =9,
Title="Customer 9",
StartDate=DateTime.Parse("2019-05-11T09:45:00"),
EndDate=DateTime.Parse("2019-05-11T10:30:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =10,
Title="Customer 10",
StartDate=DateTime.Parse("2019-05-11T10:00:00"),
EndDate=DateTime.Parse("2019-05-11T10:30:00"),
Detail="Station: STATION 4"
},
new AppointmentViewModel()
{
PK =11,
Title="Customer 11",
StartDate=DateTime.Parse("2019-05-11T11:30:00"),
EndDate=DateTime.Parse("2019-05-11T12:15:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =12,
Title="Customer 12",
StartDate=DateTime.Parse("2019-05-11T12:00:00"),
EndDate=DateTime.Parse("2019-05-11T12:45:00"),
Detail="Station: STATION 4"
},
new AppointmentViewModel()
{
PK =13,
Title="Customer 13",
StartDate=DateTime.Parse("2019-05-11T12:30:00"),
EndDate=DateTime.Parse("2019-05-11T13:15:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =14,
Title="Customer 14",
StartDate=DateTime.Parse("2019-05-11T12:30:00"),
EndDate=DateTime.Parse("2019-05-11T13:00:00"),
Detail="Station: STATION 4"
},
new AppointmentViewModel()
{
PK =15,
Title="Customer 15",
StartDate=DateTime.Parse("2019-05-11T13:00:00"),
EndDate=DateTime.Parse("2019-05-11T13:15:00"),
Detail="Station: STATION 2"
},
new AppointmentViewModel()
{
PK =16,
Title="Customer 16",
StartDate=DateTime.Parse("2019-05-11T13:15:00"),
EndDate=DateTime.Parse("2019-05-11T13:30:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =17,
Title="Customer 17",
StartDate=DateTime.Parse("2019-05-11T13:15:00"),
EndDate=DateTime.Parse("2019-05-11T13:30:00"),
Detail="Station: STATION 4"
},
new AppointmentViewModel()
{
PK =18,
Title="Customer 18",
StartDate=DateTime.Parse("2019-05-11T13:30:00"),
EndDate=DateTime.Parse("2019-05-11T14:00:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =19,
Title="Customer 19",
StartDate=DateTime.Parse("2019-05-11T13:30:00"),
EndDate=DateTime.Parse("2019-05-11T14:00:00"),
Detail="Station: STATION 4"
},
new AppointmentViewModel()
{
PK =20,
Title="Customer 20",
StartDate=DateTime.Parse("2019-05-11T14:00:00"),
EndDate=DateTime.Parse("2019-05-11T14:30:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =21,
Title="Customer 21",
StartDate=DateTime.Parse("2019-05-11T14:30:00"),
EndDate=DateTime.Parse("2019-05-11T15:00:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =22,
Title="Customer 22",
StartDate=DateTime.Parse("2019-05-11T14:30:00"),
EndDate=DateTime.Parse("2019-05-11T15:00:00"),
Detail="Station: STATION 4"
},
new AppointmentViewModel()
{
PK =23,
Title="Customer 23",
StartDate=DateTime.Parse("2019-05-11T15:00:00"),
EndDate=DateTime.Parse("2019-05-11T15:30:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =24,
Title="Customer 24",
StartDate=DateTime.Parse("2019-05-11T15:00:00"),
EndDate=DateTime.Parse("2019-05-11T15:45:00"),
Detail="Station: Station 1nServices: head massage and shampoo, short to medium blowdry"
},
new AppointmentViewModel()
{
PK =25,
Title="Customer 25",
StartDate=DateTime.Parse("2019-05-11T15:15:00"),
EndDate=DateTime.Parse("2019-05-11T15:30:00"),
Detail="Station: STATION 2"
},
new AppointmentViewModel()
{
PK =26,
Title="Customer 26",
StartDate=DateTime.Parse("2019-05-11T15:30:00"),
EndDate=DateTime.Parse("2019-05-11T16:00:00"),
Detail="Station: STATION 4"
},
new AppointmentViewModel()
{
PK =27,
Title="Customer 27",
StartDate=DateTime.Parse("2019-05-11T15:45:00"),
EndDate=DateTime.Parse("2019-05-11T16:15:00"),
Detail="Station: STATION 2"
},
new AppointmentViewModel()
{
PK =28,
Title="Customer 28",
StartDate=DateTime.Parse("2019-05-11T16:00:00"),
EndDate=DateTime.Parse("2019-05-11T16:30:00"),
Detail="Station: STATION 4"
},
new AppointmentViewModel()
{
PK =29,
Title="Customer 29",
StartDate=DateTime.Parse("2019-05-11T16:30:00"),
EndDate=DateTime.Parse("2019-05-11T16:45:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =30,
Title="Customer 30",
StartDate=DateTime.Parse("2019-05-11T16:45:00"),
EndDate=DateTime.Parse("2019-05-11T17:15:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =31,
Title="Customer 31",
StartDate=DateTime.Parse("2019-05-11T17:00:00"),
EndDate=DateTime.Parse("2019-05-11T17:30:00"),
Detail="Station: STATION 4"
},
new AppointmentViewModel()
{
PK =32,
Title="Customer 32",
StartDate=DateTime.Parse("2019-05-11T17:15:00"),
EndDate=DateTime.Parse("2019-05-11T17:45:00"),
Detail="Station: Station 1"
},
new AppointmentViewModel()
{
PK =33,
Title="Customer 33",
StartDate=DateTime.Parse("2019-05-11T17:15:00"),
EndDate=DateTime.Parse("2019-05-11T17:45:00"),
Detail="Station: STATION 4"
}
};
cntAppoints.AppointmentsSource = null;
cntAppoints.AppointmentsSource = apps;
//GetData(cntAppoints.DisplayDate);
//expFilters.IsExpanded = false;
}
4. After running the above code, the following issues are encountered when appointments are generated on the calendar (screens taken from original application):
Can you please give me an indication what I am doing wrong in my code or how can avoid such cases. The scenarios indicated above are misleading to the final users. I notised that such tickets for similar issues where raised since 2017 but never finally answered.
Currently there are areas in the MultiDayView that cannot be styled using the background color. Provide an option to set a background color to the entire the MultiDayView:
When adding a RadCalendar with Day ViewMode in a TabView and switching tabs, null ref exception is thrown.
Workaround: Set TabView.IsContentPreserved to True
When changing the view mode from Day to MultiDay or opposite, and having an AppointmentTemplateSelector, exception is thrown on iOS.
workaround:
Return the default template when platform is iOS.
if(Device.RuntimePlatform == Device.iOS)
{
return default;
}
An arrow is displayed inside the appointment in cases when:
- when editing the appointment star end date and navigating to another week and then returning back to the week with the modified appointment
- adding new appointments to the week
when using DayViewSettings and applying AppointmentTemplate, the template is not applied, the default one is applied.
Workaround: apply AppointmentTemeplate to MultiDayViewSettings for UWP.