I have a problem with my RadCalendar. Whenever I create a calendar in Agenda view and populate it with appointments, I get a visual bug that shows a colored square on top of the calendar. This only happens in iOS and both in real phones and simulations.
Image 1 shows the calendar page without appointments and it loads normally. Image 2 shows the page when calendar is populated with appointments. You can get rid of the square by scrolling either up or down, 'till the square is no longer in view and then going back, this is shown in image 3.
So far I have found that the color of the square is linked to the Dark/Light mode of the phone. When changing UIUserInterfaceStyle in Info.plist, to "Dark", the square is dark, when Light, it is white.
Dummy Appointment code:
var date = DateTime.Today;
this.Appointments = new ObservableCollection<Appointment>
{
new Appointment {
Title = "Meeting with Tom",
Detail = "Sea Garden",
StartDate = date.AddHours(10),
EndDate = date.AddHours(11),
Color = Color.Tomato
},
new Appointment {
Title = "Lunch with Sara",
Detail = "Restaurant",
StartDate = date.AddHours(12).AddMinutes(30),
EndDate = date.AddHours(14),
Color = Color.DarkTurquoise
},
new Appointment {
Title = "Elle Birthday",
StartDate = date.AddHours(9),
EndDate = date.AddHours(11),
Color = Color.Orange,
IsAllDay = true
},
new Appointment {
Title = "Football Game",
StartDate = date.AddDays(2).AddHours(15),
EndDate = date.AddDays(2).AddHours(17),
Color = Color.Green
},
};RadCalendar code:
private RadCalendar TelerikCalendar()
{
LogWriter.LogWrite("Calendar: TelerikCalendar()");
AgendaViewSettings agendaViewSettings = new AgendaViewSettings
{
MonthItemFormat = "MMM yyyy", //"MMM yyyy",
DayItemFormat = "EEEE d.MMM", //"EEEE d.MMM"
AppointmentItemTimeFormat = "HH.mm",
IsHeaderSticky = false,
StickyHeaderFormat = "MMM yyyy",
};
calendar = new RadCalendar
{
ViewMode = CalendarViewMode.Agenda,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
AgendaViewSettings = agendaViewSettings,
Margin = new Thickness(0, 0, 13, 0),
SchedulingUiEnabled = false,
IsAddAppointmentButtonVisible = false,
DisplayDate = DateTime.Now,
AppointmentsSource = this.Appointments,
BackgroundColor = Color.Black,
};
return calendar;
}
This issue could be related to the parent layout in which the calendar is positioned. Send me the complete page where the calendar is defined.
We do not have this issue in our Telerik Sample app on iOS when testing in dark mode. You can download the app from the Apple app store and check all agenda view examples: https://docs.telerik.com/devtools/xamarin/demos-and-sample-apps/sdk-browser-overview#telerik-ui-for-xamarin-samples-application
Sure. Side note, I did also try to make the page again with a completely new Xamarin mobile app project, but the same issue still persists.
using System; using System.Collections.ObjectModel; using Telerik.XamarinForms.Input; using Xamarin.Forms; namespace TestiAppis { public class CalendarCopy : ContentPage { private RadCalendar calendar = null; public ObservableCollection<Appointment> Appointments { get; set; } public CalendarCopy() { var date = DateTime.Today; this.Appointments = new ObservableCollection<Appointment> { new Appointment { Title = "Meeting with Tom", Detail = "Sea Garden", StartDate = date.AddHours(10), EndDate = date.AddHours(11), Color = Color.Tomato }, new Appointment { Title = "Lunch with Sara", Detail = "Restaurant", StartDate = date.AddHours(12).AddMinutes(30), EndDate = date.AddHours(14), Color = Color.DarkTurquoise }, new Appointment { Title = "Elle Birthday", StartDate = date.AddHours(9), EndDate = date.AddHours(11), Color = Color.Orange, IsAllDay = true }, new Appointment { Title = "Football Game", StartDate = date.AddDays(2).AddHours(15), EndDate = date.AddDays(2).AddHours(17), Color = Color.Green }, }; calendar = TelerikCalendar(); Content = Get(); } private StackLayout Get() { StackLayout stack = new StackLayout { BackgroundColor = Color.Black, Margin = new Thickness(7, 10, 7, 5), HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand, Children = { calendar } }; return stack; } private RadCalendar TelerikCalendar() { AgendaViewSettings agendaViewSettings = new AgendaViewSettings { MonthItemFormat = "MMM yyyy", DayItemFormat = "EEEE d.MMM", AppointmentItemTimeFormat = "HH.mm", IsHeaderSticky = false, StickyHeaderFormat = "MMM yyyy", }; calendar = new RadCalendar { ViewMode = CalendarViewMode.Agenda, HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand, AgendaViewSettings = agendaViewSettings, Margin = new Thickness(0, 0, 13, 0), SchedulingUiEnabled = false, IsAddAppointmentButtonVisible = false, DisplayDate = DateTime.Now, AppointmentsSource = this.Appointments, BackgroundColor = Color.Black, }; return calendar; } private StackLayout GetTitleView() { Label title = new Label() { Text = "Calendar", FontSize = 24, TextColor = Color.Black, }; StackLayout stack = new StackLayout() { Orientation = StackOrientation.Horizontal, Margin = new Thickness(0, 15, 0, 3), VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.EndAndExpand, Spacing = 10, Children = { title } }; return stack; } protected override void OnAppearing() { base.OnAppearing(); App.Current.Resources["backColor"] = Color.White; App.Current.Resources["foreColor"] = Color.Black; Shell.SetTitleView(this, GetTitleView()); Shell.SetNavBarHasShadow(this, false); } } }Hi,
Thank you for the provided code.
I have tested the scenario and reproduced the white/dark space on Telerik Xamarin iOS calendar in agenda view mode. I have logged this behavior on your side. Follow the item to track its progress: https://feedback.telerik.com/xamarin/1567068-calendar-ios-dark-white-space-is-shown-on-top-of-the-agendaview
I couldn't find a workaround for this issue.