Telerik Forums
UI for Xamarin Forum
1 answer
84 views

I am working on Xamarin UWP project and have used the following code mentioned below for calendar cell styling. I am not able to change text color of specific dates in other month, it always display other month dates as gray,  can you please provide me a solution.


private CalendarCellStyle EvaluateCellStyle(CalendarCell cell)
{
    Color background = default(Color);
    Color selectedCellForegroundColor = default(Color);
    Color todayBorderColor = Color.FromRgb(115, 174, 239);
    double dayNamesFontSize = default(double);
    double fontSize = default(double);
    Thickness todayBorderThickness = default(Thickness);

    switch (Device.RuntimePlatform)
    {
        case "iOS":
            background = Color.White;
            selectedCellForegroundColor = Color.White;
            fontSize = 14;
            dayNamesFontSize = 14;
            todayBorderThickness = new Thickness(2);
            break;
        case "Android":
            background = Color.White;
            selectedCellForegroundColor = Color.FromHex("FF0066CC");
            fontSize = 15;
            dayNamesFontSize = 15;
            todayBorderThickness = new Thickness(1);
            break;
        case "UWP":
            background = Color.FromRgb(30, 30, 30);
            selectedCellForegroundColor = Color.White;
            fontSize = 17;
            dayNamesFontSize = 17;
            todayBorderThickness = new Thickness(2);
            break;
    }

    if (cell.Type == CalendarCellType.DayName)
    {
        return new CalendarCellStyle
        {
            BackgroundColor = Color.LightGray,
            FontSize = dayNamesFontSize,
            FontAttributes = FontAttributes.Bold,
            TextColor = Color.FromRgb(0, 122, 255)
        };
    }

    var defaultStyle = new CalendarCellStyle
    {
        BackgroundColor = background,
        FontSize = fontSize,
        FontAttributes = FontAttributes.None,
        TextColor = Color.FromRgb(139, 209, 0)
    };

    if (cell is CalendarDayCell dayCell)
    {
        if (dayCell.IsFromCurrentMonth)
        {
            if (dayCell.IsToday)
            {
                defaultStyle.TextColor = Color.FromRgb(0, 122, 255);
                defaultStyle.FontAttributes = FontAttributes.Bold;
                defaultStyle.BorderColor = todayBorderColor;
                defaultStyle.BorderThickness = todayBorderThickness;
            }
        }
        else
        {
            if (dayCell.IsToday)
            {
                defaultStyle.TextColor = todayBorderColor;
                defaultStyle.BorderColor = todayBorderColor;
                defaultStyle.BorderThickness = todayBorderThickness;
            }
            else
            {
                
                  if (dayCell.Date.DayOfWeek == DayOfWeek.Sunday || dayCell.Date.DayOfWeek == DayOfWeek.Saturday)
                  {
                           defaultStyle.TextColor = Color.Red;
                  }
                  else
                  {
                           defaultStyle.TextColor = Color.Gray;
                  }

            }
        }

        if (dayCell.IsSelected)
        {
            defaultStyle.TextColor = selectedCellForegroundColor;
            defaultStyle.BorderColor = Color.FromHex("FF0066CC");
        }

        return defaultStyle;
    }

    return null; // default style
}

Didi
Telerik team
 answered on 31 Oct 2022
1 answer
64 views

Hi all,

The use case that I am triying to replicate is that we have some events and these can be daily/weekly/monthly/yearly recurring. So I decided to use the calendar & Scheduling component as it provided the recurrence option. When I tested the daily and weekly recurrended options it worked perfectly but to my surprise when trying to get the events recurring every month or year the trouble started.

Even tought I am using the   RecurrenceFrequency.Monthly as my frecuency rule, as we can see from the image it still seem to put it as a daily recurrence. Same happens when the  RecurrenceFrequency.Yearly option is used. Here the code used:

 foreach (Evento evento in this.ListaEventosAgenda)
            {

                EventData eventoNuevo = new EventData() {StartDate=evento.fechaInciio,EndDate=evento.fechaFin,Title=evento.titulo,LeadBorderColor = Color.FromHex(evento.colorCategoria),ItemBackgroundColor=Color.White,
                Id=evento.id,idOrg=evento.idOrg,idCategoria=evento.idCategoria,imageUrl=evento.fotoUrl,Detail=evento.descripcion,IsAllDay=evento.isAllDay,recurrenciaAnual= evento.recurrenciaAnual,recurrenciaMensual=evento.recurrenciaMensual,
                recurrenciaSemanal=evento.recurrenciaSemanal,recurrenciaDiaria=evento.recurrenciaDiaria, categoria=evento.categoria,Color = Color.FromHex(evento.colorCategoria)
                };
            //StartDate: evento.fechaInciio,endTime: evento.fechaFin,eventText: evento.titulo,leadColor: Color.FromHex("59B6B8"),itemColor: Color.White,
            //detalles: evento.descripcion, id: evento.id,imageUrl: evento.fotoUrl, IsAllDay: evento.isAllDay

             RecurrenceRule recurrenceRule = null;
                if (evento.recurrenciaDiaria)
                {
                    //var recurrencePattern = new RecurrencePattern(new int[] { }, RecurrenceDays.WeekDays, RecurrenceFrequency.Daily, 1, null, null);// { MaxOccurrences = 37 };
                    //recurrenceRule = new RecurrenceRule(recurrencePattern);


                    recurrenceRule = new RecurrenceRule(new RecurrencePattern()
                    {
                        Frequency = RecurrenceFrequency.Daily,
                    });

                    eventoNuevo.RecurrenceRule = recurrenceRule;
                }

                  else if (evento.recurrenciaSemanal)
                {

                    //var recurrencePattern = new RecurrencePattern(new int[] { }, RecurrenceDays.WeekDays, RecurrenceFrequency.Weekly, 7, null, null);// { MaxOccurrences = 37 };
                    recurrenceRule = new RecurrenceRule(new RecurrencePattern()
                    {
                        Frequency = RecurrenceFrequency.Weekly,

                    });
                    try
                    {

                    eventoNuevo.RecurrenceRule = recurrenceRule;
                    }
                    catch (Exception error)
                    {

                        Debug.WriteLine(error.Message); ;
                    }
                }

               else if (evento.recurrenciaMensual)
                {
                    var a = eventoNuevo.StartDate.DayOfWeek;
                    //var recurrencePattern = new RecurrencePattern(new int[] { }, RecurrenceDays.WeekDays, RecurrenceFrequency.Monthly, 30, null, null);// { MaxOccurrences = 37 };
                    recurrenceRule = new RecurrenceRule(new RecurrencePattern()
                    {
                        Frequency = RecurrenceFrequency.Monthly,
                    });
                    eventoNuevo.RecurrenceRule = recurrenceRule;
                }

                 else if (evento.recurrenciaAnual)
                {
                    //var recurrencePattern = new RecurrencePattern(new int[] { }, RecurrenceDays.WeekDays, RecurrenceFrequency.Daily, 365, null, null);// { MaxOccurrences = 37 };
                    recurrenceRule = new RecurrenceRule(new RecurrencePattern()
                    {
                        Frequency = RecurrenceFrequency.Yearly,

                    });
                    eventoNuevo.RecurrenceRule = recurrenceRule;
                }

                this.Events.Add(eventoNuevo);
            }

Yana
Telerik team
 answered on 20 Jul 2022
1 answer
60 views

Hello,

I have a problem regarding the custom appointments in UWP. When I specify my new appointment class and define a corresponding template the properties of my new class are not shown in the view. The standard properties of the Telerik appointment class are shown normally. This problem only occurs on UWP for me. On Android and iOS everything works as intended.

To show my problem I have attached an example project. In this project I have added my custom appointment class named TestAppointment. This custom class has one additional property Test which is set "Hello" for every appointment. To display this property I have added a label to my custom appointment template.

I hope my example project can help debug/fix this problem.

Thank you in advance

Didi
Telerik team
 answered on 11 May 2022
1 answer
90 views

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.
Didi
Telerik team
 answered on 04 May 2022
0 answers
61 views

Hello, 

I have a problem regarding the Calendar DayView on UWP. The problem does not occur for my app on iOS or Android. When opening my page including the DayView the appointments are loaded correctly but the app is completly frozen and no further action can be taken. I tried multiple ways of loading the appointments and i will be posting my current setup below. For appointment loading i have tried the solution in the bug report https://feedback.telerik.com/xamarin/1497171-calendar-nullreferenceexception-when-setting-the-appointmentssource-in-uwp, which sadly does not fix the freezing problem.

Below is my code for the page:

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"
                              NativeControlLoaded="MyCalendar_OnNativeControlLoaded">
        <telerikInput:RadCalendar.DayViewSettings>
            <telerikInput:DayViewSettings 
                DayStartTime="9:00:00"                                     
                DayEndTime="18:00:00"                                      
                TimelineInterval="2:00"                                      
                IsCurrentTimeIndicatorVisible="True"/>
        </telerikInput:RadCalendar.DayViewSettings>
    </telerikInput:RadCalendar>
</pages:vContentPage>

View.xaml.cs:

using System;
using System.Collections.ObjectModel;
using System.Drawing;
using Telerik.XamarinForms.Input;

namespace v.App.Views
{
    public partial class AboutPage 
    {
        public AboutPage()
        {
            InitializeComponent();
        }

        private void MyCalendar_OnNativeControlLoaded(object sender, EventArgs e)
        {
            var today = DateTime.Today;

            var items = new ObservableCollection<Appointment>
            {
                new Appointment {
                    Title = "Meeting with Tom",
                    Detail = "Sea Garden",
                    StartDate = today.AddHours(10),
                    EndDate = today.AddHours(11),
                    Color = Color.Tomato
                },
                new Appointment {
                    Title = "Lunch with Sara",
                    Detail = "Restaurant",
                    StartDate = today.AddHours(12).AddMinutes(30),
                    EndDate = today.AddHours(14),
                    Color = Color.DarkTurquoise
                },
                new Appointment {
                    Title = "Elle Birthday",
                    StartDate = today,
                    EndDate = today.AddHours(11),
                    Color = Color.Orange,
                    IsAllDay = true
                },
                    new Appointment {
                    Title = "Football Game",
                    StartDate = today.AddDays(2).AddHours(15),
                    EndDate = today.AddDays(2).AddHours(17),
                    Color = Color.Green
                }
            };

            (sender as RadCalendar).AppointmentsSource = items;
        }
    }
}

I have attached a screenshot from the loaded page aswell.

I am using the Telerik.UI.for.Xamarin Nuget-Package Version 2022.1.11.

Thank you in advance.

Marco
Top achievements
Rank 1
 asked on 14 Apr 2022
1 answer
155 views

I'm using <telerikInput:RadCalendar> with All Day option, in which I am able to set the background color dynamically for all appointments within the time slots, but I cannot able to set the background color dynamically for All Day slot alone.

 

 

Yana
Telerik team
 answered on 17 Aug 2021
0 answers
80 views

Hello,

Starting from one of the GitHub examples of the Calendar I have implemented the calendar with the viewmodel that I put later. When adding a daily and weekly event, the calendar shows it correctly, but when the event is monthly or yearly, it is wrongly shown as a daily event.

Attached in this post my view and my viewmodel.

 

Thanks for the help.

XTZ
Top achievements
Rank 1
Iron
 asked on 02 Aug 2021
1 answer
444 views

Hi,

Our team is planning to apply Telerik UI for our Xamarin Forms application specifically on Calendar and Scheduling functionality. Before buying the said product, we would want to explore it first using the free trial. I installed the Telerik UI for Xamarin package on my Mac and I can't seem to install it. I am getting this message, is there a newer version for this trial package?



Moreover, Telerik.UI.for.Xamarin is not available on the nuget package when I add it as per advised on the documentation here (https://docs.telerik.com/devtools/xamarin/installation-and-deployment/telerik-nuget-server#add-telerik-ui-for-xamarin-pack-in-visual-studio-for-mac ) Is there a newer documentation for this one?

Hoping someone can help. Thank you.

3 answers
102 views
Hi, anybody knows any setting for the calendar for highlighting or identifying days with appointments in the year view mode?
I mean, when in year view mode, those days with appointments, have different color for example. Currently, just today is highlighted.
I am looking for some way without having to write separate custom renderers for Android/iOS/UWP.
Didi
Telerik team
 answered on 23 Feb 2021
3 answers
97 views

Is there a way to "standardize" (make similar on iOS and Android) Telerik RadCalendar in Xamarin Forms, in case of Year View?

Currently, on Android, Year View shows days of months "thumbnails", which looks crappy on small devices displays - causing "overlapping", like:
attached Android_overlapping.png


On bigger devices screens it looks quite fine, but there is a difference between Android and iOS:
attached Android.png
and
attached iOS.png

Is there a way to disable days of months "thumbnails" on Android and leave only months names (like on iOS) OR to enable days of months "thumbnails" on iOS (like on Android)?

Mehdi
Top achievements
Rank 1
Veteran
 answered on 19 Feb 2021
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?