The .NET MAUI MAUI Scheduler provides the flexibility to customize the days view header appearance across different views such as day, week, workweek, month, and timeline using the ViewHeaderTemplate property. This customization is applicable to DaysView, TimelineView, and MonthView. You can select different DataTemplates for the view header using DataTemplateSelector. The BindingContext of the ViewHeaderTemplate is System.DateTime, allowing you to use properties from System.DateTime within your data templates. CS Define a ViewHeaderTemplateSelector class to manage DataTemplates and assign them to the ViewHeaderTemplate property of the days and timeline views. public class ViewHeaderTemplateSelector : DataTemplateSelector { public ViewHeaderTemplateSelector() { } public DataTemplate NormalDateTemplate { get; set; } public DataTemplate TodayDateTemplate { get; set; } protected override DataTemplate OnSelectTemplate(object item, BindableObject container) { var dateTime = (DateTime)item; if (dateTime.Date == DateTime.Today.Date) return TodayDateTemplate; else return NormalDateTemplate; } } XAMLThe ViewHeaderTemplateSelector chooses the DataTemplate based on whether the date is today or a normal date. <Grid> <Grid.Resources> <DataTemplate x:Key="normalDateTemplate"> <StackLayout x:Name="stackLayout" Orientation="Vertical" Background="MediumPurple"> <Label x:Name="label" HorizontalOptions="Center" VerticalOptions="Center" Text="{Binding StringFormat='{0:dd}'}" FontSize="Small" FontFamily="Bold" TextColor="White" /> <Label x:Name="label1" HorizontalOptions="Center" VerticalOptions="Center" Text="{Binding StringFormat='{0:ddd}'}" FontSize="Small" FontFamily="Bold" TextColor="White"/> </StackLayout> </DataTemplate> <DataTemplate x:Key="todayDateTemplate"> <StackLayout x:Name="stackLayout" Orientation="Vertical" Background="MediumPurple"> <Label x:Name="label" HorizontalOptions="Center" VerticalOptions="Center" Text="{Binding StringFormat='{0:dd}'}" FontSize="Small" FontFamily="Bold" TextColor="Yellow" /> <Label x:Name="label1" HorizontalOptions="Center" VerticalOptions="Center" Text="{Binding StringFormat='{0:ddd}'}" FontSize="Small" FontFamily="Bold" TextColor="Yellow"/> </StackLayout> </DataTemplate> <local:ViewHeaderTemplateSelector x:Key="viewHeaderTemplateSelector" TodayDateTemplate="{StaticResource todayDateTemplate}" NormalDateTemplate="{StaticResource normalDateTemplate}"/> </Grid.Resources> <scheduler:SfScheduler x:Name="Scheduler" View="Week" > <scheduler:SfScheduler.DaysView> <scheduler:SchedulerDaysView ViewHeaderTemplate="{StaticResource viewHeaderTemplateSelector}"/> </scheduler:SfScheduler.DaysView> <scheduler:SfScheduler.TimelineView> <scheduler:SchedulerTimelineView ViewHeaderTemplate="{StaticResource viewHeaderTemplateSelector}"/> </scheduler:SfScheduler.TimelineView> </scheduler:SfScheduler> </Grid> Output Download the complete sample on GitHub ConclusionI hope you enjoyed learning how to customize the days view header appearance in .NET MAUI Scheduler.You can refer to our .NET MAUI Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In the WPF SfScheduler, you can provide the custom font style for text of the Header, ViewHeader, MonthCell, WeekNumber, Appointment and Timeline Header, ViewHeader. Download and add the required custom fonts in the fonts folder. XAML Use the custom font in specific style by using TargetType as SchedulerHeaderControl, MonthCell, ViewHeaderControl, DayViewHeader, MonthAgendaView, WeekNumberCell, TimelineViewHeader, TimeRulerCell, AppointmentControl, MonthViewHeader. <Style TargetType="syncfusion:SchedulerHeaderControl"> <Setter Property='FontFamily' Value="fonts/bradhitc.ttf #Bradley Hand ITC"/> </Style> <Style TargetType="syncfusion:MonthCell"> <Setter Property='FontFamily' Value="fonts/bradhitc.ttf #Bradley Hand ITC"/> </Style> <Style TargetType="syncfusion:ViewHeaderControl"> <Setter Property='FontFamily' Value="fonts/bradhitc.ttf #Bradley Hand ITC"/> </Style> <Style TargetType="syncfusion:DayViewHeader"> <Setter Property='FontFamily' Value="fonts/bradhitc.ttf #Bradley Hand ITC"/> </Style> <Style TargetType="syncfusion:MonthAgendaView"> <Setter Property='FontFamily' Value="fonts/bradhitc.ttf #Bradley Hand ITC"/> </Style> <Style TargetType="syncfusion:WeekNumberCell"> <Setter Property='FontFamily' Value="fonts/bradhitc.ttf #Bradley Hand ITC"/> </Style> <Style TargetType="syncfusion:TimelineViewHeader"> <Setter Property='FontFamily' Value="fonts/bradhitc.ttf #Bradley Hand ITC"/> </Style> <Style TargetType="syncfusion:TimeRulerCell"> <Setter Property='FontFamily' Value="fonts/bradhitc.ttf #Bradley Hand ITC"/> </Style> <Style TargetType="syncfusion:AppointmentControl"> <Setter Property='FontFamily' Value="fonts/bradhitc.ttf #Bradley Hand ITC"/> </Style> <Style TargetType="syncfusion:MonthViewHeader"> <Setter Property='FontFamily' Value="fonts/bradhitc.ttf #Bradley Hand ITC"/> </Style> XAML Bind the appointments to a schedule by using the Scheduler.ItemsSource and set the ShowAgendaView and ShowWeekNumber value as True. <syncfusion:SfScheduler x:Name="Schedule" ViewType="{Binding ElementName=viewTypeComboBox, Path=SelectedValue}" ItemsSource="{Binding Appointments}"> <syncfusion:SfScheduler.MonthViewSettings> <syncfusion:MonthViewSettings ShowWeekNumber="True" ShowAgendaView="True" AppointmentDisplayMode="Indicator"> </syncfusion:MonthViewSettings> </syncfusion:SfScheduler.MonthViewSettings> </syncfusion:SfScheduler> View sample in GitHub
You can customize the default appearance of the view header by using the ViewHeaderTemplate property in WPF SfScheduler. C# Create a custom class Meeting with mandatory fields From, To, EventName and color. public class Meeting { public string EventName { get; set; } public DateTime From { get; set; } public DateTime To { get; set; } public Brush color { get; set; } } C# Create a ViewModel class and add the appointment details. public class SchedulerViewModel : INotifyPropertyChanged { private ObservableCollection<Meeting> meetings; public SchedulerViewModel() { Meetings = new ObservableCollection<Meeting>(); Meeting meeting = new Meeting(); meeting.color = colorCollection[random.Next(10)]; meeting.From = today.AddMonths(month).AddDays(day); meeting.To = meeting.From.AddHours(2); this.Meetings.Add(meeting); } } XAML Bind the appointments to a schedule using the Scheduler.ItemsSource property. You can customize the default appearance of the view header in Day, Week and Workweek views by using the ViewHeaderTemplate property of DaysViewSettings. You can customize the appearance of view header in Month and Timeline views by using the ViewHeaderTemplate property of MonthViewSettings and TimelineViewSettings in Scheduler. <Window.Resources> <ObjectDataProvider x:Key="schedulerViewTypes" MethodName="GetValues" ObjectType="{x:Type system:Enum}"> <ObjectDataProvider.MethodParameters> <x:Type Type="{x:Type syncfusion:SchedulerViewType}"/> </ObjectDataProvider.MethodParameters> </ObjectDataProvider> <DataTemplate x:Key="viewHeaderTemplate"> <StackPanel Background="Green" Width="2000" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Orientation="Vertical"> <TextBlock HorizontalAlignment="Left" Margin="20,0,0,0" Foreground="#FFFFFF" FontFamily="Arial" Text="{Binding DateText}" FontSize="25" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" /> <TextBlock HorizontalAlignment="Left" Margin="20,0,0,0" Foreground="#FFFFFF" FontFamily="Arial" Text="{Binding DayText}" FontSize="10" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" /> </StackPanel> </DataTemplate> </Window.Resources> <Window.DataContext> <local:SchedulerViewModel/> </Window.DataContext> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <syncfusion:SfScheduler x:Name="Schedule" ViewType="{Binding ElementName=viewTypeComboBox, Path=SelectedValue}" ItemsSource="{Binding Meetings}"> <syncfusion:SfScheduler.TimelineViewSettings> <syncfusion:TimelineViewSettings ViewHeaderTemplate="{StaticResource viewHeaderTemplate}" > </syncfusion:TimelineViewSettings> </syncfusion:SfScheduler.TimelineViewSettings> <syncfusion:SfScheduler.MonthViewSettings> <syncfusion:MonthViewSettings ViewHeaderTemplate="{StaticResource viewHeaderTemplate}" ViewHeaderHeight="60"> </syncfusion:MonthViewSettings> </syncfusion:SfScheduler.MonthViewSettings> <syncfusion:SfScheduler.DaysViewSettings> <syncfusion:DaysViewSettings ViewHeaderTemplate="{StaticResource viewHeaderTemplate}" > </syncfusion:DaysViewSettings> </syncfusion:SfScheduler.DaysViewSettings> <syncfusion:SfScheduler.AppointmentMapping> <syncfusion:AppointmentMapping StartTime="From" EndTime="To" AppointmentBackground="color" Subject="EventName"> </syncfusion:AppointmentMapping> </syncfusion:SfScheduler.AppointmentMapping> </syncfusion:SfScheduler> <StackPanel Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,20,25,0"> <ComboBox x:Name="viewTypeComboBox" ItemsSource="{Binding Source={StaticResource schedulerViewTypes}}" SelectedIndex="2" Width="100"/> </StackPanel> </Grid> </Window> View sample in GitHub MonthView WeekView WorkWeekView DayView TimelineView
In the Flutter date range picker, you can replace the default view header with a custom widget by hiding the built-in header and view header in the SfDateRangePicker. STEP 1: Inside the state, initialize the default values needed for replacing the view header in calendar. final List<String> _days = <String>['S', 'M', 'T', 'W', 'T', 'F', 'S']; final List<Icon> _icons = <Icon>[ Icon( Icons.ac_unit, color: Colors.black, ), Icon(Icons.wb_sunny, color: Colors.amber), Icon( Icons.wb_incandescent, color: Color(0xFF0ba0000), ), Icon(Icons.wb_auto, color: Colors.orange), Icon(Icons.wb_cloudy, color: Colors.grey), Icon(Icons.wb_sunny, color: Colors.amber), Icon( Icons.wb_incandescent, color: Color(0xFF0ba0000), ) ]; STEP 2: Set the headerHeight and viewHeaderHeight property value to 0 to hide the default headers. child: SfDateRangePicker( headerHeight: 0, view: DateRangePickerView.month, monthViewSettings: DateRangePickerMonthViewSettings( viewHeaderHeight: 0, showTrailingAndLeadingDates: true), ), STEP 3: Custom view header implementation using the ListView widgets inside the Stack widget. child: Stack( children: [ ListView.builder( padding: const EdgeInsets.fromLTRB(40, 100, 40, 300), itemCount: _days.length, scrollDirection: Axis.horizontal, itemBuilder: (BuildContext ctxt, int index) { return Container( padding: const EdgeInsets.only(left: 15, top: 5), width: cellWidth, height: 5, color: Colors.lightGreen, child: Text(_days[index]), ); }), ListView.builder( padding: const EdgeInsets.fromLTRB(40, 120, 40, 500), itemCount: _icons.length, scrollDirection: Axis.horizontal, itemBuilder: (BuildContext ctxt, int index) { return Container( padding: const EdgeInsets.only(left: 5), width: cellWidth, child: _icons[index], ); }), ], ), View the Github Sample here. ConclusionI hope you enjoyed learning about how to replace the view header with custom widget in the Flutter Date Range Picker.You can refer to our Flutter Date Range Picker feature tour page to learn about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our Flutter Date Range Picker example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In the Flutter Event Calendar, you can get the tapped `DateTime` details of the header, view header, and calendar cell using the `OnTap` event. STEP 1: First, initialize the necessary variables in your state class: CalendarController _controller = CalendarController(); String? _text='', _titleText=''; Color? _headerColor, _viewHeaderColor, _calendarColor; STEP 2: Add the `OnTap` callback for the flutter calendar. Please find the following code for the calendar. Expanded( child: SfCalendar( viewHeaderStyle: ViewHeaderStyle(backgroundColor: _viewHeaderColor), backgroundColor: _calendarColor, view: CalendarView.week, controller: _controller, allowedViews: [ CalendarView.day, CalendarView.week, CalendarView.workWeek, CalendarView.month, CalendarView.timelineDay, CalendarView.timelineWeek, CalendarView.timelineWorkWeek ], onTap: calendarTapped, ), ), STEP 3: Using the `OnTap` event you can retrieve the tapped target element details such as header, view header, calendar cells, agenda view. You can then extract the date and time values from the callback and display them in an alert dialog: void calendarTapped(CalendarTapDetails details) { if (details.targetElement == CalendarElement.header) { _text = DateFormat('MMMM yyyy').format(details.date!).toString(); _titleText = 'Header'; } else if (details.targetElement == CalendarElement.viewHeader) { _text = DateFormat('EEEE dd, MMMM yyyy').format(details.date!).toString(); _titleText = 'View Header'; } else if (details.targetElement == CalendarElement.calendarCell) { _text = DateFormat('EEEE dd, MMMM yyyy').format(details.date!).toString(); _titleText = 'Calendar cell'; } showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: Container(child: new Text(" $_titleText")), content: Container(child: new Text(" $_text")), actions: <Widget>[ new TextButton( onPressed: () { Navigator.of(context).pop(); }, child: new Text('close')) ], ); }); } View sample in GitHub ConclusionI hope you enjoyed learning about how to get Datetime details while tapping the Flutter Calendar.You can refer to our Flutter Calendar feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter Calendar example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can create custom header and add this in schedule. To achieve this, follow below steps. Step 1: Set Schedule.HeaderHeight and Schedule.ViewHeaderHeight property as zero to hide the default headers. Step 2: Create your custom header using any container (Eg: StackLayout, Grid..) Step 3: Using Schedule.VisibleDatesChanged event get the visible month, and set this to the custom header Please find the code snippet below for Month View: XAML <Grid> <Grid.RowDefinitions> <RowDefinition Height="0.1*"/> <RowDefinition Height="0.1*"/> <RowDefinition Height="0.8*"/> </Grid.RowDefinitions> <Label x:Name="Header" Grid.Row="0" VerticalOptions="Center"/> <Grid Grid.Row="1" BackgroundColor="#009688"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Label Text="Sun" Grid.Column="0" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> <Label Text="Mon" Grid.Column="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> <Label Text="Tue" Grid.Column="2" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> <Label Text="Wed" Grid.Column="3" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> <Label Text="Thu" Grid.Column="4" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> <Label Text="Fri" Grid.Column="5" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> <Label Text="Sat" Grid.Column="6" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> </Grid> <schedule:SfSchedule x:Name="schedule" Grid.Row="" ScheduleView="MonthView" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" HeaderHeight="0" ViewHeaderHeight="0"/> <Grid.Behaviors> <local:ScheduleBehavior/> </Grid.Behaviors> </Grid For Week view, you need to add one more label for timeslot labels in the left side. XAML <Grid> <Grid.RowDefinitions> <RowDefinition Height="0.1*"/> <RowDefinition Height="0.1*"/> <RowDefinition Height="0.8*"/> </Grid.RowDefinitions> <Label x:Name="Header" TextColor="Black" Grid.Row="0" VerticalOptions="Center"/> <Grid Grid.Row="1" BackgroundColor="#009688"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid Grid.Column="1" x:Name="Sunday"> <Grid.RowDefinitions> <RowDefinition Height="0.7*"/> <RowDefinition Height="0.3*"/> </Grid.RowDefinitions> <Label x:Name="SundayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> <Label x:Name="SundayLabel" Text="Sun" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> </Grid> <Grid Grid.Column="2" x:Name="Monday"> <Grid.RowDefinitions> <RowDefinition Height="0.7*"/> <RowDefinition Height="0.3*"/> </Grid.RowDefinitions> <Label x:Name="MondayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> <Label x:Name="MondayLabel" Text="Mon" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> </Grid> <Grid Grid.Column="3" x:Name="Tuesday"> <Grid.RowDefinitions> <RowDefinition Height="0.7*"/> <RowDefinition Height="0.3*"/> </Grid.RowDefinitions> <Label x:Name="TuesdayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> <Label x:Name="TuesdayLabel" Text="Tue" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> </Grid> <Grid Grid.Column="4" x:Name="Wednesday"> <Grid.RowDefinitions> <RowDefinition Height="0.7*"/> <RowDefinition Height="0.3*"/> </Grid.RowDefinitions> <Label x:Name="WednesdayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> <Label x:Name="WednesdayLabel" Text="Wed" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> </Grid> <Grid Grid.Column="5" x:Name="Thursday"> <Grid.RowDefinitions> <RowDefinition Height="0.7*"/> <RowDefinition Height="0.3*"/> </Grid.RowDefinitions> <Label x:Name="ThursdayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> <Label x:Name="ThursdayLabel" Text="Thu" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> </Grid> <Grid Grid.Column="6" x:Name="Friday"> <Grid.RowDefinitions> <RowDefinition Height="0.7*"/> <RowDefinition Height="0.3*"/> </Grid.RowDefinitions> <Label x:Name="FridayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> <Label x:Name="FridayLabel" Text="Fri" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> </Grid> <Grid Grid.Column="7" x:Name="Saturday"> <Grid.RowDefinitions> <RowDefinition Height="0.7*"/> <RowDefinition Height="0.3*"/> </Grid.RowDefinitions> <Label x:Name="SaturdayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> <Label x:Name="SaturdayLabel" Text="Sat" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> </Grid> </Grid> <schedule:SfSchedule x:Name="schedule" Grid.Row="2" ScheduleView="WeekView" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" HeaderHeight="0" ViewHeaderHeight="0"/> </Grid> For Work Week view, you need to remove the nonworking days label XAML <Grid> <Grid.RowDefinitions> <RowDefinition Height="0.1*"/> <RowDefinition Height="0.1*"/> <RowDefinition Height="0.8*"/> </Grid.RowDefinitions> <Label x:Name="Header" TextColor="Black" Grid.Row="0" VerticalOptions="Center"/> <Grid Grid.Row="1" BackgroundColor="#009688"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid Grid.Column="1" x:Name="Monday"> <Grid.RowDefinitions> <RowDefinition Height="0.7*"/> <RowDefinition Height="0.3*"/> </Grid.RowDefinitions> <Label x:Name="MondayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> <Label x:Name="MondayLabel" Text="Mon" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> </Grid> <Grid Grid.Column="2" x:Name="Tuesday"> <Grid.RowDefinitions> <RowDefinition Height="0.7*"/> <RowDefinition Height="0.3*"/> </Grid.RowDefinitions> <Label x:Name="TuesdayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> <Label x:Name="TuesdayLabel" Text="Tue" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> </Grid> <Grid Grid.Column="3" x:Name="Wednesday"> <Grid.RowDefinitions> <RowDefinition Height="0.7*"/> <RowDefinition Height="0.3*"/> </Grid.RowDefinitions> <Label x:Name="WednesdayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> <Label x:Name="WednesdayLabel" Text="Wed" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> </Grid> <Grid Grid.Column="4" x:Name="Thursday"> <Grid.RowDefinitions> <RowDefinition Height="0.7*"/> <RowDefinition Height="0.3*"/> </Grid.RowDefinitions> <Label x:Name="ThursdayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> <Label x:Name="ThursdayLabel" Text="Thu" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> </Grid> <Grid Grid.Column="5" x:Name="Friday"> <Grid.RowDefinitions> <RowDefinition Height="0.7*"/> <RowDefinition Height="0.3*"/> </Grid.RowDefinitions> <Label x:Name="FridayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> <Label x:Name="FridayLabel" Text="Fri" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> </Grid> </Grid> <schedule:SfSchedule x:Name="schedule" Grid.Row="2" ScheduleView="WorkWeekView" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" HeaderHeight="0" ViewHeaderHeight="0"/> </Grid> For Day View, make sure to have only one label XAML <Grid> <Grid.RowDefinitions> <RowDefinition Height="0.1*"/> <RowDefinition Height="0.1*"/> <RowDefinition Height="0.8*"/> </Grid.RowDefinitions> <Label x:Name="Header" TextColor="Black" Grid.Row="0" VerticalOptions="Center"/> <Grid Grid.Row="1" BackgroundColor="#009688"> <Grid.ColumnDefinitions> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid Grid.Column="0" x:Name="Monday"> <Grid.RowDefinitions> <RowDefinition Height="0.7*"/> <RowDefinition Height="0.3*"/> </Grid.RowDefinitions> <Label x:Name="MondayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> <Label x:Name="MondayLabel" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/> </Grid> </Grid> <schedule:SfSchedule x:Name="schedule" Grid.Row="2" ScheduleView="DayView" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" HeaderHeight="0" ViewHeaderHeight="0"/> </Grid> Get dates and day value for view header using Schedule.VisibleDatesChangedEvent and set this text to label C# private void Schedule_VisibleDatesChangedEvent(object sender, VisibleDatesChangedEventArgs e) { if (schedule.ScheduleView == ScheduleView.DayView) { Header.Text = e.visibleDates[0].ToString("MMMM yyyy"); // Sets the current date and day value for view header label sunday.FindByName<Label>("SundayDateLabel").Text = e.visibleDates[0].Day.ToString(); sunday.FindByName<Label>("SundayLabel").Text = e.visibleDates[0].DayOfWeek.ToString(); } } Example: CustomHeaderForWeekView
In SfSchedule, you can get the selected date details in view header of Schedule using ViewHeaderTapped event which will be fired while tapping date in the view header panel. XAML <syncfusion:SfSchedule x:Name="schedule" ScheduleView="WeekView" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" > </syncfusion:SfSchedule> In ViewHeaderTapped, DateTime of the selected date in the view header panel will be known. Selected date time will be known for all the schedule views. In month view, the dates in the first row (row immediate below the view header) will be known in the DateTime parameter in the event. C# schedule.ViewHeaderTapped += Schedule_ViewHeaderTapped; void Schedule_ViewHeaderTapped(object sender, ViewHeaderTappedEventArgs e) { //date of the selected item. var dateTime = e.DateTime; DisplayAlert("SelectedDate",e.DateTime.Day.ToString(),"Ok"); } You can also switch schedule views by setting the required ScheduleView type in the ViewHeaderTapped event. You can download the source code for entire demo of switching schedule view through event from here, ScheduleSample.
