Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 142 additions & 1 deletion components/scheduler/edit-appointments.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ This article contains the following sections:

* [Basics](#basics)
* [User Experience](#user-experience)
* [Delete Confirmation Dialog](#delete-confirmation-dialog)
* [Example](#example)


Expand All @@ -33,7 +34,7 @@ Main events you need to implement so you can store the appointment information c

* `OnCreate` - fires when the user saves a new appointment, including an exception for a recurring appointment.
* `OnUpdate` - fires when the user changes an existing appointment. Fires for the recurring appointment when an exception has been created for it.
* `OnDelete` - fires when the user deletes and appointment (including a recurring appointment).
* `OnDelete` - fires when the user deletes and appointment (including a recurring appointment). You can also enable a [delete confirmation dialog](#delete-confirmation-dialog).

There are two other events that you are not required to handle - you can use them to implement application logic:

Expand Down Expand Up @@ -80,8 +81,148 @@ The UI for the scheduler provides the following options for interacting with the
* An appointment that spans multiple days but is not marked as an all-day appointment shows up in the all-day slot for the days that it spans entirely. The first and last day would render in the day portions to denote the start and end time accurately.


## Delete Confirmation Dialog

The delete confirmation dialog triggers before event deletion. You can enable it by setting the `ConfirmDelete` parameter of the Scheduler to `true`. The default texts of the dialog are exposed in the [localization]({%slug globalization-localization%}) messages of the component, and you can customize them.

>important This dialog displays only for **single** events, **not** for recurring. The built-in delete confirmation dialog for recurring events is **not** changed.

>caption Delete Confirmation dialog appearance

![](images/scheduler-delete-confirmation.gif)

>caption Enabling of the Delete Confirmation Dialog

````CSHTML
@* Scheduler with enabled Delete Confirmation Dialog *@

<TelerikScheduler Data="@Appointments"
OnDelete="@DeleteAppointment" AllowDelete="true"
@bind-Date="@StartDate" Height="500px" @bind-View="@CurrView" ConfirmDelete="true">
<SchedulerViews>
<SchedulerDayView StartTime="@DayStart" />
<SchedulerWeekView StartTime="@DayStart" />
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
</SchedulerViews>
</TelerikScheduler>

@code {
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
public DateTime StartDate { get; set; } = new DateTime(2019, 12, 2);
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);

List<SchedulerAppointment> Appointments { get; set; }

async Task DeleteAppointment(SchedulerDeleteEventArgs args)
{
SchedulerAppointment item = (SchedulerAppointment)args.Item;

await MyService.Delete(item);

await GetSchedulerData();
}

public class SchedulerAppointment
{
public Guid Id { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool IsAllDay { get; set; }
public string RecurrenceRule { get; set; }
public List<DateTime> RecurrenceExceptions { get; set; }
public Guid? RecurrenceId { get; set; }

public SchedulerAppointment()
{
Id = Guid.NewGuid();
}
}

async Task GetSchedulerData()
{
Appointments = await MyService.Read();
}

protected override async Task OnInitializedAsync()
{
await GetSchedulerData();
}

public static class MyService
{
private static List<SchedulerAppointment> _data { get; set; } = new List<SchedulerAppointment>()
{
new SchedulerAppointment
{
Title = "Board meeting",
Description = "Q4 is coming to a close, review the details.",
Start = new DateTime(2019, 12, 5, 10, 00, 0),
End = new DateTime(2019, 12, 5, 11, 30, 0)
},

new SchedulerAppointment
{
Title = "Vet visit",
Description = "The cat needs vaccinations and her teeth checked.",
Start = new DateTime(2019, 12, 2, 11, 30, 0),
End = new DateTime(2019, 12, 2, 12, 0, 0)
},

new SchedulerAppointment
{
Title = "Planning meeting",
Description = "Kick off the new project.",
Start = new DateTime(2019, 12, 6, 9, 30, 0),
End = new DateTime(2019, 12, 6, 12, 45, 0)
},

new SchedulerAppointment
{
Title = "Trip to Hawaii",
Description = "An unforgettable holiday!",
IsAllDay = true,
Start = new DateTime(2019, 11, 27),
End = new DateTime(2019, 12, 05)
},

new SchedulerAppointment
{
Title = "Morning run",
Description = "Some time to clear the head and exercise.",
Start = new DateTime(2019, 11, 27, 9, 0, 0),
End = new DateTime(2019, 11, 27, 9, 30, 0),
RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR"
}
};

public static async Task<List<SchedulerAppointment>> Read()
{
return await Task.FromResult(_data);
}

public static async Task Delete(SchedulerAppointment itemToDelete)
{
if (itemToDelete.RecurrenceId != null)
{
// a recurrence exception was deleted, you may want to update
// the rest of the data source - find an item where theItem.Id == itemToDelete.RecurrenceId
// and remove the current exception date from the list of its RecurrenceExceptions
}

if (!string.IsNullOrEmpty(itemToDelete.RecurrenceRule) && itemToDelete.RecurrenceExceptions?.Count > 0)
{
// a recurring appointment was deleted that had exceptions, you may want to
// delete or update any exceptions from the data source - look for
// items where theItem.RecurrenceId == itemToDelete.Id
}

_data.Remove(itemToDelete);
}
}
}
````
## Example

The example below shows the signature of the event handlers so you can copy the proper arguments and start implementing your business logic and data storage operations. The example only updates the local collection of appointments used in the UI.
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.