Show weeknumbers left from calendar

[E75]

I was wondering if it was possible to show week numbers on the left?
Many users like to also see the week numbers.

[ME-MarvinE]

Oo, great idea! Its not possible currently, but various template properties are available on the CalendarView if you want to implement it yourself. I'd probably use the DaysViewTemplate

[E75]

@ME-MarvinE thanks for reply. Do you have examples? of DaysViewTemplate?

[ME-MarvinE]

Its on the CalendarView. Its type is a ControlTemplate so you would use it like any element's ControlTemplate property. I'll provide an example later.

[E75]

@ME-MarvinE thanks.
I will wait for it so that I can do some puzzling myself based on that example, thanks for your effort and time.

[ME-MarvinE]

@E75 The following code shows how to add a cyan border around the section of the CalendarView that shows the days.

        <xc:CalendarView>
            <xc:CalendarView.DaysViewTemplate>
                <ControlTemplate>
                    <Border
                        Padding="10"
                        Stroke="#00A0A0"
                        StrokeThickness="10">

                        <ContentPresenter/>
                    </Border>
                </ControlTemplate>
            </xc:CalendarView.DaysViewTemplate>
        </xc:CalendarView>

This is what the "Getting Started" repo's Maui project looks like with and without the template:

With:

Without:

[E75]

@ME-MarvinE

Thanks, but are you sure I can use this? I see that your example is more about styling, while the week numbers are really part of the calendar view. In other words, if you navigate by month, the weeks must also change.

The way I see it is that this is more of an extension of DaysViewTemplate, sort of a DaysWeeksViewTemplate

Do you have an example of a custom DaysViewTemplate where it is derived, where, for example, instead of 7 days, you show an extra day with an extra label or something?

That would fit my scenario more.

[ME-MarvinE]

It was to demonstrate how to use the DaysViewTemplate property as requested. You can use it both for styling or adding controls.

It would be easier if the control was based on grids, but its based on CollectionViews. So the way I'm thinking if doing it is using the DaysViewTemplate to add a Vertical CollectionView to the left with the week numbers.

But I also wanted to do it without adding any extra controls since it reduces speed, and I want the layout to be managed by one thing instead of several things trying to emulate each other's spacing and size etc. That's what I'm figuring out when thinking of how to implement this.

[E75]

@ME-MarvinE

It would be easier if the control was based on grids, but its based on CollectionViews. So the way I'm thinking if doing it is using the DaysViewTemplate to add a Vertical CollectionView to the left with the week numbers.

That's what I expected it. Personally, I would say that there should be two extra (optional) properties on the calendar view, for example "ShowWeekNumbers" and "Weeks".

Then set it like this:

Underwater it uses collectionview as far as I understand it, so instead of 7 columns, it shows 8 columns.
Using the DaysNamesOrder property, he determines where he should show the week numbers, is that the beginning (left) or the end (right).

'[Week, Mon,Tues]' <> '[Fri, Sat, Week]'
By default it could show it on the left, but I can imagine that some users want to see it on the right.

Then you don't have to add extra controls for this, do you?

[ME-MarvinE]

Yeah I was thinking of using the DaysOfWeek CollectionView and Days CollectionView somehow but there are a few issues I need to think about:

• The column length of the Days CollectionView is tied to the column length of the DaysOfWeek CollectionView.

• There wouldn't be an easy way to template the view for the Weeks.

• Switching it between left and right would be complicated due to the implementation being spread across several controls/templates.

• The CollectionViews are strongly typed and binded to backing data items, so I can't easily add a view to the DaysOfWeek or DaysCollectionView that is binded to a different type of data or doesn't have a backing data item.

Maybe it's not as bad as it seems, I haven't used it before, but I was thinking using a DataTemplateSelector would be the way.

What is the Weeks property in your image referring to and what will it do? Is it the numbers on the side or is it the maximum of the numbers on the side?

[E75]

@ME-MarvinE

What is the Weeks property in your image referring to and what will it do? Is it the numbers on the side or is it the maximum of the numbers on the side?

That will be a array with the weeknumbers => [15,16,17,18,19], same flow what you did with the EventCalendar.Days

Something else: now that we're talking about it, do you know how the text color works for Day names?

I have read through your wiki, but the color always remains black for me. no matter what color I have set in the styling/color xmls

[ME-MarvinE]

@E75 Ah sorry, I didn't reply sooner, I didn't see the edit with the additional question.

There is no direct property on the CalendarView to change the DayOfWeek colour. You would have to use the DayNameTemplate property of the CalendarView. It's a DataTemplate with a BindingContext of DayOfWeek. So you would just put a Label in a DataTemplate and change the Label's TextColor property.

Seems like I forgot to dedicate a space in the wiki that explains this, I've added it to the Displaying Dates page.