Calendar SelectionChanged not working for UWP

1 Answer 96 Views
Calendar & Scheduling
Marco
Top achievements
Rank 1
Marco asked on 29 Apr 2022, 07:55 AM

Hello, 

I have a problem regarding the Calendar DayView on UWP. The problem does not occur for my app on iOS or Android. To load our appointments asynchronous for specific Dates I use the Event SelectionChanged with the prism:EventToCommandBehavior. Everytime the user changes the current day in the dayview new appointments should by loaded by that command and displayed afterwards. Sadly this only works for iOS and Android. On UWP the command is never executed since the event is not triggered. I am using the Telerik.UI.for.Xamarin Nuget-Package Version 2022.1.11 and Prism.Unity.Forms 8.1.97. 

Below you can find test code for the problem. In this example the same appointments are created when changing the current day in the dayview.

 

View:

<pages:vContentPage
    x:Class="v.App.Views.AboutPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:pages="clr-namespace:v.App.Styling.Pages;assembly=v.App"
    xmlns:prism="http://prismlibrary.com"
    xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
    Title="About"
    prism:ViewModelLocator.AutowireViewModel="True"
    BackgroundColor="{DynamicResource ColorBackgroundPrimary}">
        <telerikInput:RadCalendar x:Name="calendar" 
                              ViewMode="Day"
                              AppointmentsSource="{Binding Appointments}">
        <telerikInput:RadCalendar.DayViewSettings>
            <telerikInput:DayViewSettings 
                DayStartTime="6:00:00"                                     
                DayEndTime="18:00:00"                                      
                TimelineInterval="1:00"                                      
                IsCurrentTimeIndicatorVisible="True"/>
        </telerikInput:RadCalendar.DayViewSettings>
        <telerikInput:RadCalendar.Behaviors>
            <prism:EventToCommandBehavior
                        Command="{Binding DaySelectionChangedCommand}"
                        EventArgsConverter="{StaticResource TelerikValueChangedEventArgsConverter}"
                        EventName="SelectionChanged" />
        </telerikInput:RadCalendar.Behaviors>
    </telerikInput:RadCalendar>
</pages:vContentPage>

Corresponding ViewModel:

using Prism.Commands;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Drawing;
using System.Linq;
using System.Threading.Tasks;
using Telerik.XamarinForms.Input;
using v.App.Helper.Settings;
using v.App.ViewModels.Base;

namespace v.App.ViewModels
{
    public class AboutPageViewModel : BaseViewModel
    {
        #region Constructor

        public AboutPageViewModel()
        {
        }

        private ObservableCollection<Appointment> _appointments = new ObservableCollection<Appointment>();
        public ObservableCollection<Appointment> Appointments
        {
            get { return _appointments; }
            set { _appointments = value; }
        }

        private DelegateCommand<object> _daySelectionChangedCommand;
        public DelegateCommand<object> DaySelectionChangedCommand
        {
            get { return _daySelectionChangedCommand ?? (_daySelectionChangedCommand = new DelegateCommand<object>(async (parameter) => await LoadAppointments(parameter))); }
        }

        private async Task LoadAppointments(object parameter)
        {
            if (parameter == null)
                return;

            await Task.Delay(1);
            var today = DateTime.Today;

            Appointments.Add(new Appointment
            {
                Title = "Meeting with Tom",
                Detail = "Sea Garden",
                StartDate = today.AddHours(7),
                EndDate = today.AddHours(4),
                Color = Color.Tomato
            });

            Appointments.Add(new Appointment
            {
                Title = "Lunch with Sara",
                Detail = "Restaurant",
                StartDate = today.AddHours(12).AddMinutes(30),
                EndDate = today.AddHours(14),
                Color = Color.DarkTurquoise
            });

            Appointments.Add(new Appointment
            {
                Title = "Elle Birthday",
                StartDate = today,
                EndDate = today.AddHours(11),
                Color = Color.Orange,
                IsAllDay = true
            });

            Appointments.Add(new Appointment
            {
                Title = "Football Game",
                StartDate = today.AddDays(2).AddHours(15),
                EndDate = today.AddDays(2).AddHours(17),
                Color = Color.Green
            });          
        }
        #endregion Constructor

        #region Properties
        public override bool ShowOnlineOfflineTemplate { get => false;}

        #endregion Properties
    }
}
Thank you in advance.

1 Answer, 1 is accepted

Sort by
0
Accepted
Didi
Telerik team
answered on 04 May 2022, 10:10 AM

Hi Marco,

Thank you for the provided explanation. 

The SelectionChanged event is not fired on UWP for day view mode. This is expected as it is not supported in the native Telerik UI for UWP Calendar control, which is wrapped in the Telerik Xamarin.Forms calendar for UWP platform. Selection on UWP Calendar works on Month View. https://docs.telerik.com/devtools/universal-windows-platform/controls/radcalendar/selection 

The note from the Telerik UI for Xamarin Calendar Selection article: MultiDay View mode does not provide support for Selection. DayView only supports Single Selection is applicable for Android and iOS. On UWP the DayView is actually a MultiDayView with one day. I will update the Calendar Selection article and the tables inside the article. I have updated your Telerik points as a small sign of gratitude for improving our documentation. 

Let me know if you have any additional questions on this.

Regards,
Didi
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Calendar & Scheduling
Asked by
Marco
Top achievements
Rank 1
Answers by
Didi
Telerik team
Share this question
or