How to add custom appointment editor in WinUI Scheduler (Calendar)
The WinUI Scheduler allows to add and edit the appointments using the custom editor with the help of the AppointmentEditorOpening event.
C#
In the AppointmentEditorOpening event, show the custom editor by cancelling the scheduler built-in appointment editor window.
<Grid.DataContext>
<local:SchedulerViewModel x:Name="viewModel"/>
</Grid.DataContext>
<scheduler:SfScheduler x:Name="scheduler"
AppointmentEditorOpening="OnSchedulerAppointmentEditorOpening"
CellTapped="OnSchedulerCellTapped"
ItemsSource="{Binding ScheduleAppointmentCollection}"
ViewType="Week">
</scheduler:SfScheduler>
private void OnScheduler_AppointmentEditorOpening(object sender, AppointmentEditorOpeningEventArgs e)
{
e.Cancel = true;
this.OpenEditor(e.Appointment, e.DateTime);
}
XAML
Create custom appointment editor with the default appointment details editors.
<Grid x:Name="editorLayout" Width="500" BorderBrush="Black" BorderThickness="1" Height="400" Background="White" Grid.RowSpan="2" Visibility="Collapsed" Margin="5"> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition/> </Grid.ColumnDefinitions> <StackPanel Grid.Row="0" Margin="5" Grid.ColumnSpan="2" Orientation="Vertical"> <TextBlock x:Name="titleLabel" Text="Subject" /> <TextBox x:Name="subject" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="25" /> </StackPanel> <StackPanel Grid.Row="0" Margin="5" Grid.Column="2" Grid.ColumnSpan="2" Orientation="Vertical"> <TextBlock x:Name="locationLabel" Text="Location" /> <TextBox x:Name="location" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="25" /> </StackPanel> <StackPanel Grid.Row="1" Margin="5" Grid.ColumnSpan="2" Orientation="Vertical"> <TextBlock x:Name="startLabel" Text="Start Time" /> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="5"/> <ColumnDefinition Width="110"/> </Grid.ColumnDefinitions> <editors:SfDatePicker x:Name="startDatePicker" VerticalAlignment="Top" HorizontalAlignment="Left"/> <GridView Grid.Column="1" IsEnabled="False"/> <editors:SfTimePicker x:Name="startTimePicker" VerticalAlignment="Top" Grid.Column="2" HorizontalAlignment="Right"/> </Grid> </StackPanel> <StackPanel Grid.Row="1" Margin="5" Grid.Column="2" Grid.ColumnSpan="2" Orientation="Vertical"> <TextBlock x:Name="endLabel" Text="End Time" /> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="5"/> <ColumnDefinition Width="110"/> </Grid.ColumnDefinitions> <editors:SfDatePicker x:Name="endDatePicker" VerticalAlignment="Top" HorizontalAlignment="Left"/> <GridView Grid.Column="1" IsEnabled="False"/> <editors:SfTimePicker x:Name="endTimePicker" VerticalAlignment="Top" Grid.Column="2" HorizontalAlignment="Right"/> </Grid> </StackPanel> <CheckBox x:Name="allDay" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="5" Content="All Day" /> <CheckBox x:Name="timeZone" Grid.Row="2" Margin="5" Grid.Column="1" Checked="OnTimeZoneChecked" HorizontalAlignment="Stretch" VerticalAlignment="Center" Content="Time Zone"/> <StackPanel x:Name="timeZoneMenuPanel" Grid.Row="3" Grid.ColumnSpan="4" Visibility="Collapsed"> <ComboBox x:Name="timeZoneMenu" Margin="8, 0, 0, 0" Width="200" Height="30" HorizontalAlignment="Left" VerticalAlignment="Center"/> </StackPanel> <StackPanel Grid.Row="5" Grid.ColumnSpan="4" Margin="5" Orientation="Vertical"> <TextBlock x:Name="descriptionLabel" Text="Description" /> <TextBox x:Name="description" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="25" /> </StackPanel> <StackPanel Orientation="Horizontal" Margin="5" Grid.Row="7" Grid.ColumnSpan="4" HorizontalAlignment="Right" VerticalAlignment="Bottom"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="5"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="5"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button x:Name="save" Height="30" Grid.Column="0" Content="Save" Click="OnSaveClicked"/> <GridView Grid.Column="1" IsEnabled="False"/> <Button x:Name="delete" Height="30" Grid.Column="2" Content="Delete" Click="OnDeleteClicked"/> <GridView Grid.Column="3" IsEnabled="False"/> <Button x:Name="cancel" Height="30" Grid.Column="4" Content="Cancel" Click="OnCancelClicked"/> </Grid> </StackPanel> </Grid>
C#
Handle custom appointment editor options based on the appointment details.
private void OpenEditor( ScheduleAppointment appointment, DateTime dateTime)
{
this.GetTimeZone();
this.editorLayout.Visibility = Visibility.Visible;
this.appointment = appointment;
if (appointment != null)
{
this.subject.Text = appointment.Subject;
this.startDatePicker.SelectedDate = appointment.StartTime.Date;
this.endDatePicker.SelectedDate = appointment.EndTime.Date;
this.startTimePicker.SelectedTime = appointment.StartTime;
this.endTimePicker.SelectedTime = appointment.EndTime;
this.location.Text = appointment.Location;
this.description.Text = appointment.Notes;
this.allDay.IsChecked = appointment.IsAllDay;
this.timeZone.IsChecked = (appointment.StartTimeZone != null);
if ((bool)this.timeZone.IsChecked)
{
this.timeZoneMenu.Text = appointment.StartTimeZone.ToString();
}
}
else
{
this.startDatePicker.SelectedDate = dateTime.Date;
this.endDatePicker.SelectedDate = dateTime.Date;
this.startTimePicker.SelectedTime = dateTime;
this.endTimePicker.SelectedTime = dateTime.AddHours(1);
}
}
private void GetTimeZone()
{
this.timeZoneMenu.ItemsSource = new List<string>()
{
"Samoa Standard Time",
"Dateline Standard Time",
"UTC-11",
"Hawaiian Standard Time",
"Alaskan Standard Time",
"Pacific Standard Time",
"Pacific Standard Time (Mexico)",
"Mountain Standard Time",
"Mountain Standard Time (Mexico)",
"US Mountain Standard Time",
"Canada Central Standard Time",
"Central America Standard Time",
"Central Standard Time",
"Eastern Standard Time",
"SA Pacific Standard Time",
"US Eastern Standard Time",
"Venezuela Standard Time",
"Atlantic Standard Time",
"Central Brazilian Standard Time",
"Pacific SA Standard Time",
"Paraguay Standard Time",
"SA Western Standard Time",
"Newfoundland Standard Time",
"Argentina Standard Time",
"Bahia Standard Time",
"Greenland Standard Time",
"E. South America Standard Time",
"Montevideo Standard Time",
"SA Eastern Standard Time",
"UTC-02",
"(UTC - 01:00) Azores Standard Time",
"(UTC - 01:00) Cape Verde Standard Time",
"(UTC) GMT Standard Time",
"(UTC) Greenwich Standard Time",
"(UTC) Morocco Standard Time",
"(UTC) UTC",
"Magadan Standard Time",
"New Zealand Standard Time",
"Russia Time Zone 11",
"UTC+12",
"Line Islands Standard Time",
"Tonga Standard Time",
};
}
private void OnCancelClicked(object sender, RoutedEventArgs e)
{
this.editorLayout.Visibility = Visibility.Collapsed;
}
private void OnSaveClicked(object sender, RoutedEventArgs e)
{
if (appointment == null)
{
var scheduleAppointment = new ScheduleAppointment();
scheduleAppointment.Subject = this.subject.Text;
scheduleAppointment.StartTime = this.startDatePicker.SelectedDate.Value.Date.Add(this.startTimePicker.SelectedTime.Value.TimeOfDay);
scheduleAppointment.EndTime = this.endDatePicker.SelectedDate.Value.Date.Add(this.endTimePicker.SelectedTime.Value.TimeOfDay);
scheduleAppointment.Location = this.location.Text;
scheduleAppointment.IsAllDay = (bool)this.allDay.IsChecked;
scheduleAppointment.Notes = this.description.Text;
if ((bool)this.timeZone.IsChecked)
{
scheduleAppointment.StartTimeZone = this.timeZoneMenu.Text;
scheduleAppointment.EndTimeZone = this.timeZoneMenu.Text;
}
if (this.scheduler.ItemsSource == null)
{
this.scheduler.ItemsSource = new ScheduleAppointmentCollection();
}
(this.scheduler.ItemsSource as ScheduleAppointmentCollection).Add(scheduleAppointment);
}
else
{
appointment.Subject = this.subject.Text;
appointment.StartTime = this.startDatePicker.SelectedDate.Value.Date.Add(this.startTimePicker.SelectedTime.Value.TimeOfDay);
appointment.EndTime = this.endDatePicker.SelectedDate.Value.Date.Add(this.endTimePicker.SelectedTime.Value.TimeOfDay);
appointment.Location = this.location.Text;
appointment.IsAllDay = (bool)this.allDay.IsChecked;
appointment.Notes = this.description.Text;
appointment.StartTimeZone = this.timeZoneMenu.Text;
appointment.EndTimeZone = this.timeZoneMenu.Text;
}
this.editorLayout.Visibility = Visibility.Collapsed;
}
private void OnTimeZoneChecked(object sender, RoutedEventArgs e)
{
if (this.timeZone.IsChecked == true)
this.timeZoneMenuPanel.Visibility = Visibility.Visible;
else
this.timeZoneMenuPanel.Visibility = Visibility.Visible;
}
private void OnDeleteClicked(object sender, RoutedEventArgs e)
{
if (appointment != null)
(this.scheduler.ItemsSource as ScheduleAppointmentCollection).Remove(appointment);
this.editorLayout.Visibility = Visibility.Collapsed;
}
/// <summary>
/// Collapse the Editor layout while tapping the cell.
/// </summary>
/// <param name="sender">Sender argument</param>
/// <param name="e">CellTapped event argument</param>
private void OnSchedulerCellTapped(object sender, CellTappedEventArgs e)
{
this.editorLayout.Visibility = Visibility.Collapsed;
}
