or
1 answer
75 views
Hi
I im using the RadCalendar on mode day (image attached) and i need to modify the upper week days line - to be smaller and include only the day of month, and exclude the abbreviated daily tasks.
I couldnt find any lead in the documentations.
I have created custom renderer but i really struggle to find the right way to achieve this.
Didi
Telerik team
answered
on
16 Jul 2024
1 answer
149 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
117 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
116 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
168 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
}
}
Didi
Telerik team
answered
on
04 May 2022
0 answers
119 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
Rank 1
asked
on
14 Apr 2022
1 answer
220 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
120 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
Rank 1
Iron
asked
on
02 Aug 2021
1 answer
622 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.
Yana
Telerik team
answered
on
04 Jun 2021
3 answers
185 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.
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
