How to integrate DatePicker control into the month header of the WinUI Scheduler (Calendar)
In the WinUI Scheduler, it is possible to add the WinUI DatePicker control in the month header of the Scheduler.
XAML
Set the HeaderHeight value as ‘0’ for the scheduler to hide the default header, and add the DatePicker as a custom header for the scheduler.
<Grid x:Name="grid"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <syncfusion:SfDatePicker x:Name="DatePicker" Margin="5,0,0,0" DateChanged="OnDatePickerDateChanged" Grid.Row="0"/> <scheduler:SfScheduler x:Name="Scheduler" Grid.Row="1" ViewType="Month" ViewChanged="OnScheduleViewChanged" SelectionChanged="OnScheduleSelectionChanged" HeaderHeight="0"> </scheduler:SfScheduler> </Grid>
C#
Using the DateChanged event of the DatePicker, assign the value for the DisplayDate of the scheduler. In the same way, using the ViewChanged event of the scheduler, get the middle date and assign that date to the picker.
private void OnDatePickerDateChanged(object sender, Syncfusion.UI.Xaml.Editors.SelectedDateTimeChangedEventArgs e)
{
Scheduler.DisplayDate = (e.NewDateTime as DateTimeOffset?).Value.DateTime;
}
private void OnScheduleViewChanged(object sender, ViewChangedEventArgs e)
{
var totalDays = (int)(e.NewValue.EndDate - e.NewValue.StartDate).TotalDays;
int midDate = totalDays / 2;
DatePicker.SelectedDate = e.NewValue.StartDate.AddDays(midDate);
}
private void OnScheduleSelectionChanged(object sender, Syncfusion.UI.Xaml.Scheduler.SelectionChangedEventArgs e)
{
DatePicker.SelectedDate = e.NewValue;
}
Take a moment to pursue the documentation. You can also find the options like customizing the Header.
