ScheduleView WPF specific layout

1 Answer 35 Views
ScheduleView
Marnic
Top achievements
Rank 1
Marnic asked on 01 Feb 2022, 10:33 AM

Hi,

I'm trying to use the ScheduleView control to create a kind of calender for shift planning. (a bit like the Shifts app in Teams)
But I'm having some troubles styling it in the way I want.

Based on the documentation, I have this at the moment.


<telerik:RadScheduleView x:Name="ScheduleView" AppointmentsSource="{Binding Appointments}">
	<telerik:RadScheduleView.ViewDefinitions>
		<!--<telerik:DayViewDefinition/>-->
		<telerik:WeekViewDefinition Orientation="Vertical" ShowWeekGroupHeaders="True" ShowAllDayArea="False" ShowTimeRuler="True" MinorTickLength="1d" MajorTickLength="1d" WeekGroupHeaderStringFormat="Week number {0}, {1:D}" FirstDayOfWeek="Monday"/>
	</telerik:RadScheduleView.ViewDefinitions>
	<telerik:RadScheduleView.ResourceTypesSource>
		<telerik:ResourceTypeCollection>
			<telerik:ResourceType Name="Team">
				<telerik:Resource ResourceName="DAG" DisplayName="Dag"/>
				<telerik:Resource ResourceName="PL1" DisplayName="Ploeg 1"/>
				<telerik:Resource ResourceName="PL2" DisplayName="Ploeg 2"/>
				<telerik:Resource ResourceName="NA" DisplayName="Nacht"/>
				<telerik:Resource ResourceName="WK1" DisplayName="Weekend 1"/>
				<telerik:Resource ResourceName="WK2" DisplayName="Weekend 2"/>
			</telerik:ResourceType>
		</telerik:ResourceTypeCollection>
	</telerik:RadScheduleView.ResourceTypesSource>
	<telerik:RadScheduleView.GroupDescriptionsSource>
		<telerik:GroupDescriptionCollection>
			<telerik:DateGroupDescription/>
			<telerik:ResourceGroupDescription ResourceType="Team"/>
		</telerik:GroupDescriptionCollection>
	</telerik:RadScheduleView.GroupDescriptionsSource>
</telerik:RadScheduleView>

This is already pretty close to what I need. But I want my Team resource to be displayed horizontally.
The goal is that per day, I can fill in if for that team it's a working day or a not. So 1 entry per day per team. (I don't care about the shift timing yet since it's fixed per shift anyway)

Something like this

Is this possible? And could somebody help me guide me in the right direction please? :-)

1 Answer, 1 is accepted

Sort by
0
Dilyan Traykov
Telerik team
answered on 04 Feb 2022, 08:51 AM

Hi Marnic,

Thank you for the provided code snippet and image.

If I correctly understand your requirement, I believe you can use the TimelineViewDefinition with a Horizontal Orientation like so:

    <telerik:RadScheduleView x:Name="ScheduleView" AppointmentsSource="{Binding Appointments}">
        <telerik:RadScheduleView.ViewDefinitions>
            <!--<telerik:DayViewDefinition/>-->
            <telerik:TimelineViewDefinition Orientation="Horizontal" ShowTimeRuler="True" MinorTickLength="1d" MajorTickLength="1d" FirstDayOfWeek="Monday"/>
        </telerik:RadScheduleView.ViewDefinitions>
        <telerik:RadScheduleView.ResourceTypesSource>
            <telerik:ResourceTypeCollection>
                <telerik:ResourceType Name="Team">
                    <telerik:Resource ResourceName="DAG" DisplayName="Dag"/>
                    <telerik:Resource ResourceName="PL1" DisplayName="Ploeg 1"/>
                    <telerik:Resource ResourceName="PL2" DisplayName="Ploeg 2"/>
                    <telerik:Resource ResourceName="NA" DisplayName="Nacht"/>
                    <telerik:Resource ResourceName="WK1" DisplayName="Weekend 1"/>
                    <telerik:Resource ResourceName="WK2" DisplayName="Weekend 2"/>
                </telerik:ResourceType>
            </telerik:ResourceTypeCollection>
        </telerik:RadScheduleView.ResourceTypesSource>
        <telerik:RadScheduleView.GroupDescriptionsSource>
            <telerik:GroupDescriptionCollection>
                <telerik:DateGroupDescription/>
                <telerik:ResourceGroupDescription ResourceType="Team"/>
            </telerik:GroupDescriptionCollection>
        </telerik:RadScheduleView.GroupDescriptionsSource>
    </telerik:RadScheduleView>

Can you please give this a try and let me know if such a setup would work for you?

Regards,
Dilyan Traykov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ScheduleView
Asked by
Marnic
Top achievements
Rank 1
Answers by
Dilyan Traykov
Telerik team
Share this question
or