[Solved] Switch visible time range between fullday and workhours?

[Michel]

I am using the RadSchedular for Maui. It is showing the full day from 00:00 to 24:00 while almost all activities take place in work hours from 08:00 to 17:00. With a special slot I marked the non working hours which works very nice.
Now by default I would like to show only workhours with an extra checkbox so the user can switch to full day view when desired. 

Maybe I missed something but I cannot find anything in the documentation how to set the visible time range. With the time ruler you can only set some sizes but not the visible range.

Anyone has a suggestion how to do this?

[Didi]

Hi Michel,

You can use the DayStartTime and DayEndTime properties of the multiday, day and week view definitions. Here is an example:

    <Grid RowDefinitions="Auto,*" Padding="8" RowSpacing="8">
        <HorizontalStackLayout Grid.Row="0" Spacing="8" VerticalOptions="Center">
            <telerik:RadCheckBox x:Name="fullDayCheckBox"
                                 IsChecked="{Binding IsFullDay, Mode=TwoWay}"
                                 VerticalOptions="Center" />
            <Label Text="Show full day (00:00 - 24:00)" VerticalOptions="Center" />
        </HorizontalStackLayout>

        <telerik:RadScheduler x:Name="scheduler" Grid.Row="1">
            <telerik:RadScheduler.ViewDefinitions>
                <telerik:MultidayViewDefinition x:Name="dayview" VisibleDays="3"
                                                DayStartTime="{Binding DayStartTime, Mode=TwoWay}"
                                                DayEndTime="{Binding DayEndTime, Mode=TwoWay}" />
                <telerik:MonthViewDefinition />
                <telerik:DayViewDefinition DayStartTime="{Binding DayStartTime, Mode=TwoWay}"
                                                DayEndTime="{Binding DayEndTime, Mode=TwoWay}" />
            </telerik:RadScheduler.ViewDefinitions>
        </telerik:RadScheduler>
    </Grid>

public partial class SchedulerPage : ContentPage
{
    public SchedulerPage()
    {
        InitializeComponent();

        this.BindingContext = new ViewModel();
    }
}
public class ViewModel : NotifyPropertyChangedBase
{
    private static readonly TimeOnly WorkingDayStart = new(8, 0, 0);
    private static readonly TimeOnly WorkingDayEnd = new(18, 0, 0);
    private static readonly TimeOnly FullDayStart = new(0, 0, 0);
    private static readonly TimeOnly FullDayEnd = new(23, 59, 59);

    private TimeOnly dayStartTime = WorkingDayStart;
    private TimeOnly dayEndTime = WorkingDayEnd;
    private bool isFullDay;

    public ViewModel()
    {

    }

    public bool IsFullDay
    {
        get => this.isFullDay;
        set
        {
            if (this.isFullDay != value)
            {
                this.isFullDay = value;
                this.OnPropertyChanged();

                this.DayStartTime = value ? FullDayStart : WorkingDayStart;
                this.DayEndTime = value ? FullDayEnd : WorkingDayEnd;
            }
        }
    }

    public TimeOnly DayStartTime
    {
        get => this.dayStartTime;
        set
        {
            if (this.dayStartTime != value)
            {
                this.dayStartTime = value;
                this.OnPropertyChanged();
            }
        }
    }

    public TimeOnly DayEndTime
    {
        get => this.dayEndTime;
        set
        {
            if (this.dayEndTime != value)
            {
                this.dayEndTime = value;
                this.OnPropertyChanged();
            }
        }
    }
}

Hope this will be of help.

Regards,
Didi
Progress Telerik