How to add delete icon to each appointment of the WinUI Scheduler (Calendar)

3 mins read

In the WinUI Scheduler, add the delete icon and remove the particular appointment by using that icon in the AppointmentTemplate properties of the MonthViewSettings, DaysViewSettings, and TimelineViewSettings.

XAML

Add the scheduler appointments by using the data binding concept.

<scheduler:SfScheduler 
                x:Name="Schedule" 
                ViewType="Month"
                ItemsSource="{Binding Meetings}">
    <scheduler:SfScheduler.AppointmentMapping>
        <scheduler:AppointmentMapping
                StartTime="From"
                EndTime="To"
                AppointmentBackground="Color"
                Foreground="Foreground"
                Subject="EventName">
        </scheduler:AppointmentMapping>
    </scheduler:SfScheduler.AppointmentMapping>
</scheduler:SfScheduler>

Here, customized the month view appointments by using the AppointmentTemplate property of the MonthViewSettings.

<scheduler:SfScheduler.MonthViewSettings>
    <scheduler:MonthViewSettings>
        <scheduler:MonthViewSettings.AppointmentTemplate>
            <DataTemplate >
                <StackPanel Background="{Binding Data.Color}" >
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.8*"/>
                            <ColumnDefinition Width="0.2*"/>
                        </Grid.ColumnDefinitions>
                        <Button x:Name="button" Grid.Column="1" Background="{Binding Data.Color}">
                            <Image x:Name="Image" 
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Top" 
                                    Height="30"
                                    Width="15"
                                    Margin="5,0,0,0"
                                    Source="close-window.png"
                                    PointerPressed="OnImagePointerPressed">
                            </Image>
                        </Button>
                        <TextBlock Grid.Column="0"
                                    VerticalAlignment="Top"
                                    Margin="5,0,0,0"
                                    Foreground="White"
                                    FontStyle="Oblique"
                                    HorizontalAlignment="Stretch"
                                    Text="{Binding Data.EventName}" 
                                    TextTrimming="CharacterEllipsis"/>
                    </Grid>
                </StackPanel>
            </DataTemplate>
        </scheduler:MonthViewSettings.AppointmentTemplate>
    </scheduler:MonthViewSettings>
</scheduler:SfScheduler.MonthViewSettings>

By using the PointerPressed event of the Image, remove the appointment from the ItemsSource of the scheduler.

private void OnImagePointerPressed(object sender, PointerRoutedEventArgs e)
{
    var schedulerViewModel = this.DataContext as SchedulerViewModel;
    var appointment = ((e.OriginalSource as FrameworkElement).DataContext as ScheduleAppointment).Data as Meeting;
    var itemSource = schedulerViewModel.Meetings;
    if (itemSource != null && itemSource.Contains(appointment))
    {
        itemSource.Remove(appointment);
    }
}

Add delete icon to each appointment in the WinUI Scheduler
Take a moment to pursue the documentation. You can also find the options to show how to customize the month view appointments.

Did you find this information helpful?

Yes

Comments (0)

How to add delete icon to each appointment of the WinUI Scheduler (Calendar)

Access denied