Custom header with both day and weekview

[Dimitri]

I am trying to make a custom header in my project.

However, it has not been working, due to the fact that I have a button which changes the schedule view from day to weekview, or from week to dayview.

I have tried using this guide https://www.syncfusion.com/kb/10083/how-to-create-custom-header-and-view-header-in-xamarin-forms-schedule, but have been unsuccesful.

How would I create a custom header that functions with both dayview and weekview (which means having one schedule object, that changes the view upon pressing a button)?

[SaiGanesh Sakthivel]

Hi Dimitri, 

 

Thank you for contacting Syncfusion support. 

 

We have checked the reported query “Custom header with both day and weekview” from our end. We have prepared sample based on the provided information by zero the HeaderHeight and added Custom header. 

 

We have attached the reference sample and you can download the same from the following location. 

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScheduleViewCustom385697234 

 

Please let us know if you would require further assistance. 

 

Regards, 

SaiGanesh Sakthivel 

[Dimitri]

Thanks for your reply.

However, this has not worked with my project. I could already switch my schedule from day- to weekview and from week- to dayview based on a button click.

What I need help with is making a custom header that changes upon pressing that button.

Example:

Schedule is in dayview, so it has a custom dayview header.

User clicks the change view button.

Schedule changes to weekview, and also changes the custom header so that it would work with the weekview format.

I hope I clarified my issue and hope you can assist me.

[Karthikraja Arumugam]

Hi Dimitri, 

 

Thank you for the update. 

 

Based on the shared information we suspect that you have separate header for dayview and weekview, on switching the ScheduleView header also needs to change. As you have two headers you can achieve your requirement by handling visibility of headers on view change. On switching to day view make day header as visible and week header as collapsed and do the same for week view also.  

 

Please refer the following code example for the same, 

  

//Schedule with custom header 

 <Grid Grid.Row="1"> 

            <Grid.RowDefinitions> 

                <RowDefinition Height="0.1*"/> 

                <RowDefinition Height="0.9*"/> 

            </Grid.RowDefinitions> 

            <Label BackgroundColor="White" x:Name="dayHeader" Grid.Row="0" TextColor="Black" VerticalTextAlignment="Center" HorizontalTextAlignment="Start"/> 

            <Label BackgroundColor="White" x:Name="weekHeader" Grid.Row="0" IsVisible="False" TextColor="Black" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> 

            <schedule:SfSchedule Grid.Row="1" x:Name="schedule"   

                             ScheduleView="DayView"  

                             VerticalOptions="FillAndExpand"  

                             HorizontalOptions="FillAndExpand" 

                             HeaderHeight="0" /> 

        </Grid> 

 

         /// <summary> 

        /// Change schedule view and handle visibility of header views 

        /// </summary> 

        private void Button_Clicked(object sender, EventArgs e) 

        { 

            if (schedule.ScheduleView == ScheduleView.WeekView) 

            { 

                schedule.ScheduleView = ScheduleView.DayView; 

                dayHeader.IsVisible = true; 

                weekHeader.IsVisible = false; 

            } 

            else 

            { 

                schedule.ScheduleView = ScheduleView.WeekView; 

                dayHeader.IsVisible = false; 

                weekHeader.IsVisible = true; 

            } 

        } 

 

         /// <summary> 

        /// Set header text 

        /// </summary> 

        private void Schedule_VisibleDatesChangedEvent(object sender, VisibleDatesChangedEventArgs e) 

        { 

            if (schedule.ScheduleView == ScheduleView.DayView) 

            { 

                dayHeader.Text = e.visibleDates[0].ToString("MMMM yyyy"); 

            } 

            else if (schedule.ScheduleView == ScheduleView.WeekView) 

            { 

                weekHeader.Text = e.visibleDates[0].ToString("MMMM yyyy"); 

            } 

        } 

 

We have prepared a sample for the same, 

Sample link: ScheduleViewCustom 

 

We hope this helps. Please let us know if you have any concerns. 

 

Regards, 

Karthik Raja A