Last Updated: 08 Nov 2022 09:14 by ADMIN
Release 3.7.0 (09 Nov 2022)
Created on: 14 Aug 2020 07:33
Category: Scheduler
Type: Feature Request
Customize scheduler slot

I would like to alter some special slots in the scheduler like in WPF. Sample images is attached.

The slot should be customizable to define custom size and template.

*** Thread created by admin on customer behalf ***

Marin Bratanov
Posted on: 25 Aug 2020 09:18

Hello Roberto,

Here are links to the feature requests corresponding to the features I see:

I've added your Vote on your behalf for the two that didn't have it so it raises their priority.


Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Posted on: 25 Aug 2020 07:43
Ideally being able to get this functionality in Blazor would have allowed me to deploy a cross platform app.
As for now I'm keeping it Windows only, because WPF + your components can get me there, while Blazor not yet.
Hopefully .Net MAUI + your components will give us this chance.
Posted on: 25 Aug 2020 07:39
Please take a look at this short video (Agenda_01), showing the Agenda.
You can see there are 2 options in Office View

1) Location (Dental Chair) view
2) Operators view

If you choose operators view, then you have 1 column per operator (in the right bottom corner you can see all the operators, while only the 4 operators who have appointments are shown). In operators view, each appointment has a number that indicates the location (number 1 means Dental Chair 1, number 2 Dental Chair 2).
If you choose Location view, then you see one column per location, and every appointment shows the initials of the operator. In my case DR (Dalmonte Roberto).

I'd love to be able to customize each appointment in order to add custom symbols/letters/colors.


In this second video (Agenda_02) you can see:
Each appointment can have several states
1) To be confirmed
2) Confirmed
3) To be moved
4) Terminated
5) Operator is Late
6) Patient is late
7) Patient missed appointment (but called the office before)
8) Patient missed (did not call)
9) Patient is being served right now
10) Patient is in the waiting room

Each state has a color that shows in the perimeter of the appointment in agenda
Furthermore, you have the option of indicate, via a custom color code, some other properties that will show (colored square inside the appointment). Example:
A red square might mean that this specific appointment is a surgery procedure (the Dental Assistant might need to prepare a surgery-tray in advance).

At the moment I'm using Telerik WPF components, and I can get the same functionality with the following classes and XAML code:

using System.Windows;
using Telerik.Windows.Controls;

namespace OneClick.DentalSoftware.Domain
    public class SpecialSlotStyleSelector : ScheduleViewStyleSelector
        public Style? BreakSlotStyle { get; set; }

        public override Style SelectStyle(object item, DependencyObject container, ViewDefinitionBase activeViewDefinition)
            if (item is BreakSlot)
                return BreakSlotStyle;

            return base.SelectStyle(item, container, activeViewDefinition);

                <Border Grid.Row="1" Style="{StaticResource StandardBorder}">
                        <telerik:StringToGlyphConverter x:Key="StringToGlyphConverter" />
                        <DataTemplate x:Key="CustomAppointmentItemTemplate">
                            <StackPanel Orientation="Vertical">
                                <StackPanel Orientation="Horizontal">
                                    <telerik:RadGlyph HorizontalAlignment="Left"
                                                      Visibility="{Binding Appointment.AppointmentStateVisibility}"
                                                      FontSize="{x:Static common:FontHelper.BigFontSize}"
                                                      Glyph="{Binding Appointment.AppointmentStateGlyph, Converter={StaticResource StringToGlyphConverter}}"
                                                      Foreground="{telerik:MaterialResource ResourceKey= ValidationBrush}" />
                                    <telerik:RadGlyph Margin="0,0,5,0" HorizontalAlignment="Center"
                                                      Visibility="{Binding Appointment.GlyphVisibility}"
                                                      FontSize="{x:Static common:FontHelper.BigFontSize}"
                                                      Glyph="{Binding Appointment.Glyph, Converter={StaticResource StringToGlyphConverter}}"
                                                      Foreground="{Binding Appointment.GlyphForeground}" />
                                    <TextBlock Text="{Binding Appointment.Subject}" HorizontalAlignment="Center"
                                               VerticalAlignment="Center" TextWrapping="Wrap"
                                               FontSize="{x:Static common:FontHelper.BiggerFontSize}"
                                               TextTrimming="WordEllipsis" />
                                <TextBlock Text="{Binding Appointment.Body}" FontStyle="Italic" TextWrapping="Wrap"
                                           TextTrimming="WordEllipsis" />
                        <domain:SpecialSlotStyleSelector x:Key="SpecialSlotStyleSelector">
                                <Style TargetType="telerik:HighlightItem">
                                    <Setter Property="Template">
                                                <StackPanel Margin="5" Orientation="Horizontal" VerticalAlignment="Top"
                                                        Glyph="{Binding Slot.Glyph, Converter={StaticResource StringToGlyphConverter}}"
                                                        Foreground="Transparent" />
                                                    <TextBlock Text="{Binding Slot.Description}" />

                    <telerik:RadScheduleView x:Name="robdalScheduleView" Margin="3" NavigationHeaderVisibility="Collapsed"
                                             AppointmentItemContentTemplate="{StaticResource CustomAppointmentItemTemplate}"
                                             SpecialSlotsSource="{Binding SpecialSlots}"
                                             SpecialSlotStyleSelector="{StaticResource SpecialSlotStyleSelector}"
                                             SnapAppointments="True" ShowDialog="ScheduleView_OnShowDialog">
                            <domain:OneClickDragDropBehavior />
                                <telerik:ResourceGroupDescription ResourceType="Locations" />
Here I use the RadGlyph in order to customize the slot and add symbols or colors
Attached Files:
Marin Bratanov
Posted on: 24 Aug 2020 22:00

Posting on customer behalf (original thread) to keep all information and suggestions in one place.

I've had this implemented using other tools where I had two collections on a schedule control: one with appointments and one with (in my own project terms) "time slots" which only had  start date time, duration and CSS class to render, and were rendered on background. Appointments had a little padding, so background would also be visible.

So it could either be two different source data collection, or an appointment may have a flag that turns it into a"timeslot" that gets rendered as a background.


Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Attached Files: