Validate Timeslot Availability against Existing Recurrence Rules
Environment
Product | Telerik UI for ASP.NET Core Scheduler |
Product Version | Created with version 2024.4.1112 |
Description
How can I validate if the Timeslot of a new event is available based on the existing recurrence rules of the ASP.NET Core Scheduler?
Solution
The following example shows how to validate server-side when a new event is about to be created. If the validation fails, the event is not saved, and the user receives an error message that the selected time does not have available slots.
-
Validate the data of the new event in the Create action based on your requirements, and add a ModelState error if the current timeslot is not available. Return a collection with the created event and pass the ModelState to the
ToDataSourceResult()
method.public virtual JsonResult Meetings_Create([DataSourceRequest] DataSourceRequest request, MeetingViewModel meeting) { if (ModelState.IsValid) { if (CheckEventSlot(meeting)) // Validate the timeslot availability. { meetingService.Insert(meeting, ModelState); } else { ModelState.AddModelError("start", "The new event is not allowed because the timeslot is unavailable."); } } return Json(new[] { meeting }.ToDataSourceResult(request, ModelState)); } private bool CheckEventSlot(MeetingViewModel newMeeting) { foreach (var meeting in meetingService.GetAll()) { if (!string.IsNullOrEmpty(meeting.RecurrenceRule)) { var start = meeting.Start; var end = meeting.End; var recRule = meeting.RecurrenceRule; var condition = false; // Here you can use 3rd party software like iCal.Net to build up the condition. if (condition) { return false; } } } return true; }
-
Handle the
Error
event of the Scheduler DataSource and display the error message to the user.@(Html.Kendo().Scheduler<MeetingViewModel>() .Name("scheduler") ...// Additional configuration. .DataSource(d => d .Events(e => e.Error("onError")) ...// Additional configuration. ) )
@addTagHelper *, Kendo.Mvc <kendo-scheduler name="scheduler"> <!-- Other configuration --> <scheduler-datasource type="@DataSourceTagHelperType.Ajax" on-error="onError"> <!-- Other configuration --> </scheduler-datasource> </kendo-scheduler>
<script type="text/javascript"> function onError(args) { // The event will fire when there are Model State errors. var errors = args.errors; // Get the received errors. var message = ""; var scheduler = $("#scheduler").data("kendoScheduler"); if (errors) { scheduler.one("dataBinding", function (e) { // Subscribe to the "dataBinding" event of the Scheduler once. e.preventDefault(); // Prevent the default event action. $.each(errors, function (key, value) { // Loop through the errors. if ('errors' in value) { $.each(value.errors, function() { message += this + "\n"; // Store the messages in a variable. }); } }); alert(message); // Display the message. }); } } </script>
For a runnable example, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository. You can use this as a starting point to configure the same behavior in an ASP.NET Core project.