Customize DayView header

[Vadim Koystinen]

Is there any way to customize DayView header on droid?

Out of the box behavior takes way too much vertical space to only show "Month" and one giant "Date" and day of the week to the point that if phone is used in the landscape mode, navigation bar and day view header take more than half of the screen... leaving very little space to work with appointments

Moving date and day along the month would save a lot of screen estate.

Ideally I would like to customize the day view header by making date-month label respond to tap gestures too.

How can I do this?

[Vigneshkumar Ramasamy]

Hi Vadim Koystein 

  

Thanks for contacting Syncfusion support.  

 

Regarding “Custom day view header” 

 

We have checked with the provided information. In schedule custom header can be added by assigning the HeaderHeight and ViewHeaderHeight property as 0. We have prepared a simple sample for custom header which contains grid with label to display the day and date of week. You can set the current visible dates in the date label by using VisibleDatesChagedEvent where you can get visible dates collection using VisibleDates property. Kindly refer the code snippet and sample below.   

   

Code snippet:   

        <Grid x:Name="customViewHeader" BackgroundColor="white" Grid.Row="1"> 

            <Grid.ColumnDefinitions> 

                <ColumnDefinition Width="Auto" /> 

                <ColumnDefinition Width="Auto" /> 

            </Grid.ColumnDefinitions> 

            <Label x:Name="DateText"  VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> 

            <Label x:Name="DayText"  Grid.Column="1"  VerticalTextAlignment="Center" HorizontalTextAlignment="Start"/> 

        </Grid> 

 

   

void Schedule_VisibleDatesChangedEvent(object sender, VisibleDatesChangedEventArgs e) 

        { 

            Header.Text = e.visibleDates[e.visibleDates.Count / 2].ToString("MMMM yyyy"); 

            

            if (schedule.ScheduleView == ScheduleView.DayView) 

            { 

                DateText.Text = e.visibleDates[0].Day.ToString(); 

                DayText.Text= e.visibleDates[0].DayOfWeek.ToString(); 

 

                this.ClearPreviousDateSelection(); 

            } 

        } 

 

  

Regrading “Ideally I would like to customize the day view header by making date-month label respond to tap gestures too.”  

You can also assign the custom style on date label tapped event by using gesture recognizer. Kindly refer the code snippet and sample below.   

   

Code snippet:   

            TapGestureRecognizer dateLabel_tab = new TapGestureRecognizer(); 

            dateLabel_tab.Tapped += DateTappedEvent; 

            DateText.GestureRecognizers.Add(dateLabel_tab); 

            DayText.GestureRecognizers.Add(dateLabel_tab); 

            …   

  void DateTappedEvent(object sender, EventArgs e) 

        { 

            this.ClearPreviousDateSelection(); 

            (sender as Label).BackgroundColor = Color.Gray; 

        } 

 

   

Sample: CustomHeader 

  

Currently, schedule doesn’t have direct support for custom view header in day view with the swiping functionality. We have considered to provide DataTemplate support for view header. We have logged feature report for the same and it can be tracked through our Features Management System:   

   

Link: https://www.syncfusion.com/support/directtrac/features/XAMARIN-19218    

   

We will implement this feature in any of our upcoming volume release.    

   

Please let us know if you need further assistance on this.   

   

Regards,   

Vigneshkumar R