Declined
Last Updated: 19 Aug 2019 09:29 by ADMIN

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):

  •  Customer_8.jpg - Appointment for Customer 8 is overlapping appointment with customer 7 when on calendar there is enough space in the other columns;
  •  Customer_14.jpg - Appointment for Customer 14 is overlapping appointment with customer 12.  Appointment for Customer 13 is hidden under Customer 14;
  • Customers_26_27_28.jpg - Appointments for Customers 26,27,28 are overlapping with appointment for customer 24 when on calendar their is ample space were to generate these appoints.
  • Customer_32.jpg - This is the worst scenario.   Appointments for Customer 32 and 33 are sharing the same time slot.  This appointments overlapping and users can only view appointment 33.

 

 

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. 

Approved
Last Updated: 30 Jul 2019 12:23 by ADMIN
If Calendar TitleCellStyle and DisplayDate are set, control shows the title as current month ..not the month of the display date.
Approved
Last Updated: 23 Jul 2019 08:06 by ADMIN
Created by: Thomas
Comments: 0
Category: Calendar & Scheduling
Type: Bug Report
1
The visual representation of an appointment is wrong when DayViewSettings.StartTime is set so that the appointment is initially visible
Approved
Last Updated: 17 Jul 2019 12:33 by ADMIN
Created by: Scott
Comments: 0
Category: Calendar & Scheduling
Type: Feature Request
1
Add a View that displays a list of the scheduled appointments.
Approved
Last Updated: 09 Jul 2019 14:28 by ADMIN

When RadCalendar is inside Xamarin Forms Tabbed Page. Switching between tabs triggers Calendar SelectionChanged and the calendar DisplayDate is changed. 

Workaround:
the issue could not be reproduced when RadTabView is used and its IsContentPreserved property is set to true.

Approved
Last Updated: 05 Jul 2019 07:58 by ADMIN
If the TimelineInterval property of the DayViewSettings is set to 1 hour, and the DayEndTime is, for example, "18.30", the last 30 minutes are not visualized in the Calendar View.
Approved
Last Updated: 03 Jul 2019 09:46 by ADMIN

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.

Approved
Last Updated: 02 Jul 2019 07:52 by ADMIN
Created by: n/a
Comments: 0
Category: Calendar & Scheduling
Type: Feature Request
0
 I would like to have an export to PDF function as in UI for ASP.NET AJAX
https://demos.telerik.com/aspnet-ajax/scheduler/examples/pdfexport/defaultcs.aspx
Approved
Last Updated: 17 Jul 2019 10:01 by ADMIN
when the RadCalendar is hosted inside a ScrollView, users cannot navigate to other month using the swipe gesture
Approved
Last Updated: 24 Jun 2019 12:14 by ADMIN
Created by: John
Comments: 0
Category: Calendar & Scheduling
Type: Feature Request
2
When you switch from Day/Week modes to Month -> the selected date is preserved. However, the other way around does not work.
Approved
Last Updated: 17 Jun 2019 08:37 by ADMIN
When RadCalendar is used in Xamarin.Forms Shell project, the vertical scrolling is not possible.
Completed
Last Updated: 19 Jun 2019 12:49 by ADMIN
Release R2 2019 SP1

Region.Op.REPLACE is deprecated and therefore the exception is thrown:


[AndroidRuntime] java.lang.IllegalArgumentException: Invalid Region.Op - only INTERSECT and DIFFERENCE are allowed
[AndroidRuntime] at android.graphics.Canvas.checkValidClipOp(Canvas.java:779)
[AndroidRuntime] at android.graphics.Canvas.clipRect(Canvas.java:826)
[AndroidRuntime] at com.telerik.widget.calendar.CalendarFragment.drawRows(CalendarFragment.java:589)
[AndroidRuntime] at com.telerik.widget.calendar.CalendarFragment.render(CalendarFragment.java:259)
[AndroidRuntime] at com.telerik.widget.calendar.CalendarScrollManager$FragmentHolder$LayerView.onDraw(CalendarScrollManager.java:136)
[AndroidRuntime] at android.view.View.draw(View.java:20207)

Approved
Last Updated: 28 May 2019 12:44 by ADMIN
When we have overlapping appointments in DayView with different Start and End times, TimeSlotTapped is not triggered for empty slots in between appointments.
Approved
Last Updated: 13 May 2019 10:22 by ADMIN
In DayView mode, when TimelineInterval is set to "0:30", in Android it shows just the hour component. Like 1 PM, 1 PM, 2PM, 2 PM etc. 
Completed
Last Updated: 05 Jun 2019 11:09 by ADMIN
Release 2019.2.603.360 (R2 2019 minor release)

The RadCalendar DayView.EventView get stuck in a shifted position. This only occurs on iOS.

 

Steps to reproduce:

1. Load calendar.

2. Slowly slide the event view (lower portion) either right or left until the time labels (1am, 2am, etc.) are no longer in their starting positions.

3. Without releasing the scroll, tap the button to change the view to Month view mode.

4. Tap the button to change back to Day view mode.

5. Observe that the entire events view is still shifted and will remain so until the RadCalendar control is destroyed and a new one is created.

 

Attached are pictures showing the correct view and the incorrect view. Also, a sample project is attached that can be used to replicate this issue.

I have attempted to use a custom renderer to manually reset the events view, but nothing seems to work.

Approved
Last Updated: 10 May 2019 07:54 by ADMIN
Created by: n/a
Comments: 0
Category: Calendar & Scheduling
Type: Feature Request
0
Add pinch/zoom support to the RadCalendar control.
Approved
Last Updated: 09 May 2019 13:20 by ADMIN
Created by: SLM
Comments: 0
Category: Calendar & Scheduling
Type: Feature Request
1
Allow the customer to set "special" dates collection and provide different styling to/disable those dates.
In Development
Last Updated: 19 Aug 2019 11:05 by ADMIN
Created by: Quentin
Comments: 0
Category: Calendar & Scheduling
Type: Bug Report
1
DisplayDateChanged event is not fired in UWP
Approved
Last Updated: 18 Apr 2019 07:46 by ADMIN
Created by: Quentin
Comments: 0
Category: Calendar & Scheduling
Type: Feature Request
7
We should consider adding a mechanism to set a template for the appointments in Xamarin.Forms so that users can add additional elements to the appointments such as images, additional info, etc.
Completed
Last Updated: 19 Jun 2019 12:47 by ADMIN
Release R2 2019 SP1
The calendar does not scroll to the updated DisplayDate when MultiDayView is used and the DisplayDate is set in DisplayDateChanged event.
1 2 3 4 5