Category / Section
How to integrate DatePicker control into the month header of the WPF Scheduler (Calendar)
1 min read
In the WPF SfScheduler, it is possible to add the SfDatePicker control in the month header of the SfScheduler.
C#
Using the ValueChanged event of the SfDatePicker, 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.
public class ScheduleBehavior : Behavior<Grid>
{
Grid grid;
SfDatePicker sfDatePicker;
SfScheduler schedule;
protected override void OnAttached()
{
grid = this.AssociatedObject as Grid;
sfDatePicker = grid.Children[0] as SfDatePicker;
schedule = grid.Children[1] as SfScheduler;
sfDatePicker.ValueChanged += SfDatePicker_ValueChanged;
schedule.ViewChanged += Schedule_ViewChanged;
}
private void Schedule_ViewChanged(object sender, ViewChangedEventArgs e)
{
var totalDays = (int)(e.NewValue.EndDate - e.NewValue.StartDate).TotalDays;
int midDate = totalDays / 2;
sfDatePicker.Value = e.NewValue.StartDate.AddDays(midDate);
}
private void SfDatePicker_ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
this.schedule.DisplayDate = (e.NewValue as DateTime?).Value;
}
protected override void OnDetaching()
{
base.OnDetaching();
sfDatePicker.ValueChanged -= SfDatePicker_ValueChanged;
schedule.ViewChanged -= Schedule_ViewChanged;
grid = null;
schedule = null;
sfDatePicker = null;
}
}
XAML
Set the HeaderHeight value as ‘0’ for the scheduler, for hiding the default header.
<Grid x:Name="grid"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <syncfusion:SfDatePicker x:Name="sfDatePicker" Width="Auto" Grid.Row="0"/> <syncfusion:SfScheduler x:Name="schedule" Grid.Row="1" ViewType="Month" HeaderHeight="0"> </syncfusion:SfScheduler> <interactivity:Interaction.Behaviors> <local:ScheduleBehavior/> </interactivity:Interaction.Behaviors> </Grid>
