1 answer

34 views

How can I update custom day cell in month view mode asynchronously using customized RadCalendar in .NET MAUI?

Hi,

I use the RadCalendar control (Telerik UI for .NET MAUI ) and I have already implemented the customization of day cell (in month view mode), based on the following official sample,

https://github.com/telerik/maui-samples/tree/main/Samples/ControlsSamples/Examples/CalendarControl/CustomizationExample

More specifically I need to add a small circle color bubble/dot under the specific day label. The first time that calendar loads I need to load some "Appointments" called "FocusedMonthWorkingSchedules" as follows. Every time the user changes focused month I need to perform an HTTPs API call to update the list and so to update the calendar's cells asyncronously.

The problem is when user performs month change, the RadCalendar changes UI immediately (it is logical) and when the API call returns, there is no way to trigger the following override method "SelectStyle" because it has already completed n times. At the moment that "SelectStyle" method runs, the stored data inside the list (in the ViewModel) have not been updated yet until the API calls finish, so RadCalendar shows previous state.

public partial class CalendarViewModel : BaseViewModel {

public List<WorkingScheduleView> FocusedMonthWorkingSchedules;

public async Task GetFocusedMonthScedule(DateTime selectedDate){

..... // Business Logic

FocusedMonthWorkingSchedules = await _restService.GetSchedule(request);

.... // Business Logic

}

public class CustomCalendarStyleSelector : CalendarStyleSelector {

protected override Style? SelectStyle(object item, BindableObject container) {

var node = (CalendarNode)item;

DateTime? date = node?.Date;

IView? view = (container as RadLayout)?.Children.FirstOrDefault(x => x.GetType() == typeof(Label));

if (view is not null && possibleLabel is Label bubble) {

CalendarViewModel viewModel = App.ServiceProvider?.GetService<CalendarViewModel>();

WorkingSchedule? workingSchedule =

viewModel?.FocusedMonthWorkingSchedules?.FirstOrDefault( x => x.DateTime == date);

bubble.TextColor = workingSchedule?.BubbleColor;

}

So, is there any best practice to synchronize the data in the UI (RadCalendar), as soon as the https API call finishes?

I have two thoughts, but I cannot find some docs for these,

1. Is there any way to enforce RadCalendar to refresh (e.g. Refresh( ) command)? And if so, can I prevent the initial invokation of "SelectStyle" method n times to improve rendering performance?

2. Is there any way to "pause" the changing month rendering until the asyncronous Task (https API call) finishes? (I think this is a bad practice)

Final thoughts

I can understand that a possible solution could be to use some .NET MAUI handlers, in order to utilize Telerik API for RadCalendar. Is there any example available to implement it using RadCalendar?

Thank you in advance

Calendar

answered on 03 Apr 2024

1 answer

26 views

how to make agenda in maui?

I tried to migrate xamarin agenda to Maui but i cant make it with dayview?? maybe some how i can remove the hours from the view??

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AimmsApp.Task.Views.AgendaMenu"
xmlns:resx="using:AimmsApp.Resources"
xmlns:input="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
xmlns:views="clr-namespace:AimmsApp.Task.Views;assembly=AimmsApp"
Title="{x:Static resx:Resources.Agenda}">
<AbsoluteLayout x:Name="mainLayout">
<input:RadCalendar x:Name="calendar" ViewMode="Agenda" AppointmentsSource="{Binding Appointments}">

<input:RadCalendar.AgendaViewSettings>
<input:AgendaViewSettings MonthItemFormat="YYYY MMM"
WeekItemStartDateFormat="dd MMMM"
WeekItemEndDateFormat="dd"
DayItemFormat="EEE d MMM"
AppointmentItemTimeFormat="HH mm"
AppointmentItemEndDateFormat="MMM d"
AppointmentItemStartDateFormat="MMM d"
IsHeaderSticky="True"
/>
</input:RadCalendar.AgendaViewSettings>
<input:RadCalendar.BindingContext>
<views:CalendarView />
</input:RadCalendar.BindingContext>

</input:RadCalendar>
</AbsoluteLayout>
</ContentPage>

Calendar

Scheduler

answered on 11 Mar 2024

1 answer

21 views

RadItemsView does not work when use in StackLayout for IOS

Hi Teams,

I tried to use RadItemsView in the StackLayout for IOS 17.2.

I found that it only works when the date is selected for the first time. When other dates are selected, it will not be displayed later.

It works in Android.

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             xmlns:local="clr-namespace:QSF.Examples.CalendarControl.CustomizationExample"
             x:Class="QSF.Examples.CalendarControl.CustomizationExample.CustomizationView"
             Padding="{OnIdiom Default='16, 20', Phone='16, 0'}">
    <ContentView.Resources>
        <ResourceDictionary>
            <local:ColorWithAlphaConverter x:Key="ColorWithAlphaConverter" />

            <local:ReminderStyleSelector x:Key="ReminderStyleSelector">
                <local:ReminderStyleSelector.ReminderMouseOverBorderStyle>
                    <Style TargetType="telerik:CalendarBorderLabel">
                        <Setter Property="BorderBackgroundColor" Value="{Binding Source={RelativeSource Self}, Path=TextColor, Converter={StaticResource ColorWithAlphaConverter}, ConverterParameter=0.15}" />
                    </Style>
                </local:ReminderStyleSelector.ReminderMouseOverBorderStyle>
                <local:ReminderStyleSelector.ReminderSelectedBorderStyle>
                    <Style TargetType="telerik:CalendarBorderLabel">
                        <Setter Property="BorderColor" Value="{Binding Source={RelativeSource Self}, Path=TextColor}" />
                    </Style>
                </local:ReminderStyleSelector.ReminderSelectedBorderStyle>
                <local:ReminderStyleSelector.ReminderSelectedMouseOverBorderStyle>
                    <Style TargetType="telerik:CalendarBorderLabel">
                        <Setter Property="BorderBackgroundColor" Value="{Binding Source={RelativeSource Self}, Path=TextColor, Converter={StaticResource ColorWithAlphaConverter}, ConverterParameter=0.15}" />
                    </Style>
                </local:ReminderStyleSelector.ReminderSelectedMouseOverBorderStyle>
            </local:ReminderStyleSelector>
            <local:ReminderTemplateSelector x:Key="ReminderTemplateSelector">
                <local:ReminderTemplateSelector.TaskTemplate>
                    <DataTemplate>
                        <telerik:CalendarBorderLabel Text="{Binding Text}"
                                                     TextColor="{StaticResource AccentColor4}"
                                                     HorizontalTextAlignment="Center"
                                                     VerticalTextAlignment="Center"
                                                     FontAttributes="Bold">
                            <Label FontFamily="TelerikFontExamples"
                                   Text="&#xe80b;"
                                   TextColor="{StaticResource AccentColor4}"
                                   HorizontalTextAlignment="Center"
                                   VerticalTextAlignment="End"
                                   Margin="{OnPlatform Default=0, WinUI='0, 0, 0, 4'}" />
                        </telerik:CalendarBorderLabel>
                    </DataTemplate>
                </local:ReminderTemplateSelector.TaskTemplate>
                <local:ReminderTemplateSelector.BirthdayTemplate>
                    <DataTemplate>
                        <telerik:CalendarBorderLabel Text="{Binding Text}"
                                                     TextColor="{StaticResource AccentColor3}"
                                                     HorizontalTextAlignment="Center"
                                                     VerticalTextAlignment="Center"
                                                     FontAttributes="Bold">
                            <Label FontFamily="TelerikFontExamples"
                                   FontSize="{OnPlatform Default=8, WinUI=8, iOS=6}"
                                   Text="&#xe805;"
                                   TextColor="{StaticResource AccentColor3}"
                                   HorizontalTextAlignment="Center"
                                   VerticalTextAlignment="End"
                                   Margin="{OnPlatform Default='0, 0, 0, 4', WinUI='0, 0, 0, 6'}" />
                        </telerik:CalendarBorderLabel>
                    </DataTemplate>
                </local:ReminderTemplateSelector.BirthdayTemplate>
                <local:ReminderTemplateSelector.NonWorkingDayTemplate>
                    <DataTemplate>
                        <telerik:CalendarBorderLabel Text="{Binding Text}"
                                                     TextColor="#aa8fd6"
                                                     BackgroundColor="#f2eff9"
                                                     HorizontalTextAlignment="Center"
                                                     VerticalTextAlignment="Center" />
                    </DataTemplate>
                </local:ReminderTemplateSelector.NonWorkingDayTemplate>
                <local:ReminderTemplateSelector.NonWorkingDayWithReminderTemplate>
                    <DataTemplate>
                        <telerik:CalendarBorderLabel Text="{Binding Text}"
                                                     TextColor="#aa8fd6"
                                                     BackgroundColor="#f2eff9"
                                                     HorizontalTextAlignment="Center"
                                                     VerticalTextAlignment="Center"
                                                     FontAttributes="Bold">
                            <Label FontFamily="TelerikFontExamples"
                                   Text="&#xe80b;"
                                   TextColor="#aa8fd6"
                                   HorizontalTextAlignment="Center"
                                   VerticalTextAlignment="End"
                                   Margin="{OnPlatform Default=0, WinUI='0, 0, 0, 4'}" />
                        </telerik:CalendarBorderLabel>
                    </DataTemplate>
                </local:ReminderTemplateSelector.NonWorkingDayWithReminderTemplate>
            </local:ReminderTemplateSelector>

            <DataTemplate x:Key="ReminderTemplate">
                <telerik:RadBorder BackgroundColor="{AppThemeBinding Light=#F3F3F3, Dark=#202020}"
                                   BorderColor="{AppThemeBinding Light={OnPlatform Default={StaticResource DefaultBorderColor}, WinUI={StaticResource DefaultBorderColorWinUI}},
                                                                 Dark={OnPlatform Default={StaticResource DefaultBorderColorDark}, WinUI={StaticResource DefaultBorderColorDarkWinUI}}}"
                                   BorderThickness="1"
                                   CornerRadius="4"
                                   Padding="16, 8"
                                   Margin="0, 0, 0, 4">
                    <Label Text="{Binding Title}"
                           LineBreakMode="TailTruncation"
                           MaxLines="1" />
                </telerik:RadBorder>
            </DataTemplate>

            <Style x:Key="CalendarHeaderBorderStyle" TargetType="telerik:RadBorder">
                <Setter Property="BackgroundColor" Value="#40DFDFDF" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="Padding" Value="{OnPlatform Default='16, 0', Android=0, WinUI='12, 4'}" />
            </Style>
        </ResourceDictionary>
    </ContentView.Resources>

    <Grid RowDefinitions="Auto, *"
          ColumnDefinitions="Auto, *">
        <telerik:RadCalendar x:Name="calendar"
                             Grid.Column="{OnIdiom Default=1, Desktop=0}"
                             MaxDisplayMode="Month"
                             FirstDayOfWeek="Sunday"
                             SelectedDate="{Binding SelectedDate, Mode=TwoWay}"
                             DayStyleSelector="{StaticResource ReminderStyleSelector}"
                             DayTemplate="{StaticResource ReminderTemplateSelector}"
                             HeaderBorderStyle="{StaticResource CalendarHeaderBorderStyle}"
                             MaximumHeightRequest="{OnPlatform iOS=350, Android=320}"
                             BorderThickness="1"
                             Margin="{OnIdiom Default=0, Phone='0, 24, 0, 0'}" />
        <Grid Grid.Row="{OnIdiom Default=1, Desktop=0}"
              Grid.RowSpan="{OnIdiom Default=1, Desktop=2}"
              Grid.Column="1"
              RowDefinitions="Auto, *"
              Margin="{OnIdiom Default='0, 16, 0, 0', Desktop='16, 0, 0, 0'}">
            <Label Text="{Binding SelectedDate, StringFormat='Reminders for {0:M}:'}"
                   FontSize="16"
                   FontAttributes="Bold" />
            <Grid Grid.Row="1"
                  Margin="0, 8, 0, 0">
                <telerik:RadItemsView Grid.Row="1"
                                      ItemsSource="{Binding FilteredRemindersList}"
                                      ItemTemplate="{StaticResource ReminderTemplate}" />
                <Label IsVisible="{Binding IsEmptyMessageVisible}"
                       Text="No reminders for this day"
                       TextColor="{StaticResource AccentColor4}" />
            </Grid>
        </Grid>
    </Grid>
</ContentView>

Thanks.

Calendar

answered on 01 Mar 2024

1 answer

35 views

MAUI Calendar: How to load RadCalendar's DayTemplate based on monthly changes

Hi There,

I want to load the DayTemplate according to the month displayed in the current calendar.

The DayTemplate xaml codes:

 <local:ReminderTemplateSelector.TaskTemplate>
     <DataTemplate>
         <telerik:CalendarBorderLabel Text="{Binding Text}"
                                      TextColor="{StaticResource AccentColor4}"
                                      HorizontalTextAlignment="Center"
                                      VerticalTextAlignment="Center"
                                      FontAttributes="Bold">
             <Label FontFamily="TelerikFontExamples"
                    Text="&#xe80b;"
                    TextColor="{StaticResource AccentColor4}"
                    HorizontalTextAlignment="Center"
                    VerticalTextAlignment="End"
                    Margin="{OnPlatform Default=0, WinUI='0, 0, 0, 4'}" />
         </telerik:CalendarBorderLabel>
     </DataTemplate>
 </local:ReminderTemplateSelector.TaskTemplate>

ReminderTemplateSelector :

public class ReminderTemplateSelector : DataTemplateSelector
{

    public static readonly BindableProperty TasksProperty = BindableProperty.Create(nameof(Tasks), typeof(ReminderTemplateSelector), typeof(ReminderTemplateSelector), null);

    private List<DateTime> tasks;
    public ReminderTemplateSelector()
    {
      
    }

    public DataTemplate TaskTemplate { get; set; }

    public List<DateTime> Tasks
    {
        get => this.tasks;
        set
        {
            this.tasks = value;
        }
    }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var node = item as CalendarNode;
        var date = node.Date.Value;
          
        bool hasTaskReminder = false;
        if (this.tasks != null)
        {
            hasTaskReminder = this.tasks.Contains(date);
        }
         

        if (hasTaskReminder)
        {
            return this.TaskTemplate;
        }
         
        return null;
    }
}

I am trying to reload the "Task" by month on OnDisplayDate event, but OnSelectTemplate executed before the date change.

It is unable to load the correct DayTemplate based on the current month changes. How should I do it?

        private async void OnDisplayDateChanged(object sender, ValueChangedEventArgs<System.DateTime> e)
        {

            this.ReminderTemplateSelector.Tasks = LoadTask(e.NewValue);
        }

Calendar

answered on 12 Feb 2024

1 answer

50 views

Memory leaks in RadDataGrid, RadCalendar and RadAutocomplete

Edit: RadTabView also leaks. Attached new sample app.

We have found leaks in these controls. I have attached a sample app that demonstrates the problem.

I have logged a support ticket but is anyone else experience similar leaks with these controls?

From the included readme.md:-

Description

Memory leaks when using

Telerik RadDataGrid
Telerik RadCalendar
Telerik RadAutoComplete
Telerik RadTabView

Configuration

Dotnet 8
Telerik.UI.for.Maui 6.6 (also happens with 6.5)
Windows 10

Steps to reproduce

Build and run application

Run publish.ps1 to build the application in release mode
Run _temp/publish/Maui-Memleaks.exe

Leaks for every instance (RED buttons)

Click a RED button.
Close the "Close" button
Click the "GC.Collect" button. Note that the "Alive" count will keep increasing every time you click a RED button (ie memory leak)

Leaks for last instance (ORANGE buttons)

Click a ORANGE button.
Close the "Close" button
Click the "GC.Collect" button. Note that the "Alive" count will only increase the first time (ie memory leak), on subsequent clicks the "Release" count will increase.

No leaks (GREEN buttons)

Click a GREEN button.
Close the "Close" button
Click the "GC.Collect" button. Note that the "Release" count will always increase (ie no leaks)

answered on 23 Jan 2024

1 answer

30 views

Unable to remove CurrentDate background colour (RadCalendar)

I'm implementing the RadCalendar in my MAUI app but there is a problem. I need to remove the current date coloured circle over a date and just change the background colour. of the current date. I've tried to change the template for the day, but that changes all days.

The forms version doesn't have the current day shown as anyything orther than the border of the current day shown. Can this be replicated in the MAUI version?

Calendar

answered on 02 Nov 2023

1 answer

32 views

.Net Maui Calendar Control UI broken?

UPDATE: I just stumbled across this after i posted but it was crashing because i had the Telerik Example: DayStyleSelector applied with the DayTemplate. If i were to remove the DayStyleSelector the control no longer crashes.

The attached image is my Calendar control as you can see it seems like its a bit sqiushed where sunday is right as the edge of the control and saturday has some space to the right of it.

Additionally the dates are not centered in the middle of the selection circles.

I tried to use the example Day template(https://docs.telerik.com/devtools/maui/controls/calendar/templates) to see if i can fix this myself but when applied i get a crash...

    <DataTemplate x:Key="DayLabelTemplate">
        <telerik:RadBorder>
            <Label TextColor="#8660C5"
                   TextDecorations="Underline"
                   Text="{Binding Text}"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center"
                   FontSize="20"
                   FontAttributes="Bold"/>
        </telerik:RadBorder>
    </DataTemplate>

Am I doing something wrong or is there currently something wrong with the Calendar control?
I've only done testing on Android and have not tested anything out on an iOS device yet.

Code behind.....

Calendar

answered on 31 Oct 2023

1 answer

36 views

How to select week range in Calendar?

Hi, I want to select a week range.

When I select a weekday (just one), I want to highlight selected day for the full week.

For example, if I select a 4 October, the calendar will display week select from 2 October to 8 October.

Thank you in advance.

Calendar

answered on 20 Oct 2023

1 answer

493 views

Clang++ exited with code 1:

Hey there,

I am using Telerik UI for my MAUI mobile application.

The only component i am currentyl using is the RadCalendar at .NET MAUI Calendar Documentation - Getting Started - Telerik UI for .NET MAUI

Currently the android version works flawlessly, but when i try to run the simulator on IOS, the simulator crashes with this error;

Severity Code Description Project File Line Suppression State
Error clang++ exited with code 1:
ld: in /Users/user999999/Library/Caches/Xamarin/mtbs/builds/MedewerkersApp/19815057d8f14eca6f8ead78220059f52ec430fa301f2c67a1834144ed4e811f/obj/Debug/net7.0-ios/iossimulator-x64/linker-cache/TelerikUI.a(TKChartAnnotation.o), building for iOS Simulator, but linking in object file built for iOS, file '/Users/user999999/Library/Caches/Xamarin/mtbs/builds/MedewerkersApp/19815057d8f14eca6f8ead78220059f52ec430fa301f2c67a1834144ed4e811f/obj/Debug/net7.0-ios/iossimulator-x64/linker-cache/TelerikUI.a' for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation) MedewerkersApp C:\Program Files\dotnet\packs\Microsoft.iOS.Sdk\16.4.7098\targets\Xamarin.Shared.Sdk.targets 1274

Calendar

answered on 27 Sep 2023

0 answers

42 views

Xamarin RadCalendar strange jumping behaviour

Hi.

When we set the DayViewSettings DayStartTime and DayEndTime in runtime on appointments changes for a day, the RadCalendar control behaves strange, jumping from day to day.

TimeSpan dayStartTime = todayAppointments.Min(next => next.StartDate.TimeOfDay);
TimeSpan dayEndTime = todayAppointments.Min(next => next.EndDate.TimeOfDay);
calendar.DayViewSettings.DayStartTime
= calendar.MultiDayViewSettings.DayStartTime
= dayStartTime > defaultDayStartTime ? defaultDayStartTime : dayStartTime;
calendar.DayViewSettings.DayEndTime
= calendar.MultiDayViewSettings.DayEndTime
= dayEndTime > defaultDayEndTime ? dayEndTime : defaultDayEndTime;

Calendar

updated question on 27 Sep 2023

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Docs & Resources

Productivity and Design Tools

Description

Configuration

Steps to reproduce

Build and run application

Leaks for every instance (RED buttons)

Leaks for last instance (ORANGE buttons)

No leaks (GREEN buttons)