This knowledge base article explains you about the way to perform the CRUD actions with Editor Template in the Asp.Net Core Scheduler.Database configurationStep 1: Create the Asp.Net Core application with the help of this getting started documentation.Step 2: Create the database with the name of ScheduleEvent. Refer the following image for the fields. Step 3: Connect the database with the project. Editor Template Step 4: Write the Event editor template script as like the following code snippet in the index.cshtml file. <script id="EventEditorTemplate" type="text/template"> <table class="custom-event-editor" width="100%" cellpadding="5"> <tbody> <tr> <td class="e-textlabel">Summary</td> <td colspan="4"> <input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" /> </td> </tr> <tr> <td class="e-textlabel">Status</td> <td colspan="4"> <input type="text" id="ProjectId" name="EmployeeId" class="e-field" style="width: 100%" /> </td> </tr> <tr> <td class="e-textlabel">Status</td> <td colspan="4"> <input type="text" id="CategoryId" name="EmployeeId" class="e-field" style="width: 100%" /> </td> </tr> <tr> <td class="e-textlabel">From</td> <td colspan="4"> <input id="StartTime" class="e-field" type="text" name="StartTime" /> </td> </tr> <tr> <td class="e-textlabel">To</td> <td colspan="4"> <input id="EndTime" class="e-field" type="text" name="EndTime" /> </td> </tr> </tbody> </table> </script> Step 5: Bind the Syncfusion control for all the Editor window elements in the popupOpen event. <script type="text/javascript"> var projectData = JSON.parse('@Html.Raw(Json.Serialize(ViewBag.Projects))'); var categoriesData = JSON.parse('@Html.Raw(Json.Serialize(ViewBag.Categories))'); function onPopupOpen(args) { if (args.type === 'Editor') { var projectElement = args.element.querySelector('#ProjectId'); if (!projectElement.classList.contains('e-dropdownlist')) { var dropDownListObject = new ej.dropdowns.DropDownList({ placeholder: 'Choose status', value: args.data.ProjectId, fields: { text: 'text', value: 'id' }, dataSource: projectData, }); dropDownListObject.appendTo(projectElement); projectElement.setAttribute('name', 'ProjectId'); } var categoryElement = args.element.querySelector('#CategoryId'); if (!categoryElement.classList.contains('e-multiselect')) { var multiSelectObject = new ej.dropdowns.MultiSelect({ placeholder: 'Choose status', value: args.data.CategoryId, fields: { text: 'text', value: 'id' }, dataSource: categoriesData, query: new ej.data.Query().where('groupId', 'equal', args.data.ProjectId) }); multiSelectObject.appendTo(categoryElement); categoryElement.setAttribute('name', 'CategoryId'); } if (args.target.classList.contains('e-appointment')) { var catObj = args.element.querySelector('#CategoryId').ej2_instances[0]; catObj.value = [args.data.CategoryId]; } var startElement = args.element.querySelector('#StartTime'); if (!startElement.classList.contains('e-datetimepicker')) { new ej.calendars.DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement); } var endElement = args.element.querySelector('#EndTime'); if (!endElement.classList.contains('e-datetimepicker')) { new ej.calendars.DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement); } } } function onDataBinding(args) { // Before Loading the data to the scheduler, you need to convert the string to array let data = args.result; let scheduleData = []; data.forEach(element => { let res = element.CategoryId.split(','); element.CategoryId = res.map(function (x) { return parseInt(x, 10); }); scheduleData.push(element); }); args.result = scheduleData; } </script> Step 6: Write the server action in HomeController.cs file. private ScheduleDataContext _context; public IActionResult Index() { List<ResourceDataSourceModel> projects = new List<ResourceDataSourceModel>(); projects.Add(new ResourceDataSourceModel { text = "PROJECT 1", id = 1, color = "#cb6bb2" }); projects.Add(new ResourceDataSourceModel { text = "PROJECT 2", id = 2, color = "#56ca85" }); projects.Add(new ResourceDataSourceModel { text = "PROJECT 3", id = 3, color = "#df5286" }); ViewBag.Projects = projects; List<ResourceDataSourceModel> categories = new List<ResourceDataSourceModel>(); categories.Add(new ResourceDataSourceModel { text = "Nancy", id = 1, groupId = 1, color = "#df5286" }); categories.Add(new ResourceDataSourceModel { text = "Steven", id = 2, groupId = 1, color = "#7fa900" }); categories.Add(new ResourceDataSourceModel { text = "Robert", id = 3, groupId = 2, color = "#ea7a57" }); categories.Add(new ResourceDataSourceModel { text = "Smith", id = 4, groupId = 2, color = "#5978ee" }); categories.Add(new ResourceDataSourceModel { text = "Micheal", id = 5, groupId = 3, color = "#df5286" }); categories.Add(new ResourceDataSourceModel { text = "Root", id = 6, groupId = 3, color = "#00bdae" }); categories.Add(new ResourceDataSourceModel { text = "RK", id = 7, groupId = 4, color = "#5978ee" }); categories.Add(new ResourceDataSourceModel { text = "Dk", id = 8, groupId = 5, color = "#df5286" }); categories.Add(new ResourceDataSourceModel { text = "Stev", id = 9, groupId = 6, color = "#df5286" }); ViewBag.Categories = categories; List<ResourceDataSourceModel> projectsList = new List<ResourceDataSourceModel>(); projectsList.Add(new ResourceDataSourceModel { text = "PROJECT 4", id = 4, color = "#bbdc00" }); projectsList.Add(new ResourceDataSourceModel { text = "PROJECT 5", id = 5, color = "#9e5fff" }); ViewBag.ProjectsList = projectsList; List<ResourceDataSourceModel> personsList = new List<ResourceDataSourceModel>(); personsList.Add(new ResourceDataSourceModel { text = "Alice", id = 11, groupId = 4, color = "#bbdc00" }); personsList.Add(new ResourceDataSourceModel { text = "Nancy", id = 12, groupId = 5, color = "#9e5fff"}); personsList.Add(new ResourceDataSourceModel { text = "Robert", id = 13, groupId = 5, color = "#bbdc00"}); personsList.Add(new ResourceDataSourceModel { text = "Robson", id = 14, groupId = 4, color = "#9e5fff"}); personsList.Add(new ResourceDataSourceModel { text = "Laura", id = 15, groupId = 4, color = "#bbdc00" }); personsList.Add(new ResourceDataSourceModel { text = "Margaret", id = 16, groupId = 5, color = "#9e5fff"}); ViewBag.PersonsList = personsList; ViewBag.Resources = new string[] { "Projects", "Categories" }; return View(); } public IActionResult Schedule() { return View(); } class ResourceDataSourceModel { public int id { set; get; } public string text { set; get; } public string color { set; get; } public int? groupId { set; get; } } [HttpPost] public List<ScheduleEvent> LoadData([FromBody]Params param) { DateTime start = (param.CustomStart != new DateTime()) ? param.CustomStart : param.StartDate; DateTime end = (param.CustomEnd != new DateTime()) ? param.CustomEnd : param.EndDate; return _context.ScheduleEvents.Where(app => (app.StartTime >= start && app.StartTime <= end) || (app.RecurrenceRule != null && app.RecurrenceRule != "")).ToList(); // Here, filtering the events based on the start and end date value. } public class Params { public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } public DateTime CustomStart { get; set; } public DateTime CustomEnd { get; set; } } public class EditParams { public string key { get; set; } public string action { get; set; } public List<ScheduleEvent> added { get; set; } public List<ScheduleEvent> changed { get; set; } public List<ScheduleEvent> deleted { get; set; } public ScheduleEvent value { get; set; } } [HttpPost] public List<ScheduleEvent> UpdateData([FromBody]EditParams param) { if (param.action == "insert" || (param.action == "batch" && param.added.Count > 0)) // this block of code will execute when inserting the appointments { int intMax = _context.ScheduleEvents.ToList().Count > 0 ? _context.ScheduleEvents.ToList().Max(p => p.Id) : 1; for (var i = 0; i < param.added.Count; i++) { var value = (param.action == "insert") ? param.value : param.added[i]; DateTime startTime = Convert.ToDateTime(value.StartTime); DateTime endTime = Convert.ToDateTime(value.EndTime); ScheduleEvent appointment = new ScheduleEvent() { StartTime = startTime, EndTime = endTime, Subject = value.Subject, IsAllDay = value.IsAllDay, StartTimezone = value.StartTimezone, EndTimezone = value.EndTimezone, RecurrenceRule = value.RecurrenceRule, RecurrenceID = value.RecurrenceID, RecurrenceException = value.RecurrenceException, Description = value.Description, CategoryId = value.CategoryId, ProjectId = value.ProjectId }; _context.ScheduleEvents.Add(appointment); _context.SaveChanges(); } } if (param.action == "update" || (param.action == "batch" && param.changed.Count > 0)) // this block of code will execute when removing the appointment { var value = (param.action == "update") ? param.value : param.changed[0]; var filterData = _context.ScheduleEvents.Where(c => c.Id == Convert.ToInt32(value.Id)); if (filterData.Count() > 0) { DateTime startTime = Convert.ToDateTime(value.StartTime); DateTime endTime = Convert.ToDateTime(value.EndTime); ScheduleEvent appointment = _context.ScheduleEvents.Single(A => A.Id == Convert.ToInt32(value.Id)); appointment.StartTime = startTime; appointment.EndTime = endTime; appointment.StartTimezone = value.StartTimezone; appointment.EndTimezone = value.EndTimezone; appointment.Subject = value.Subject; appointment.IsAllDay = value.IsAllDay; appointment.RecurrenceRule = value.RecurrenceRule; appointment.RecurrenceID = value.RecurrenceID; appointment.RecurrenceException = value.RecurrenceException; appointment.Description = value.Description; appointment.ProjectId = value.ProjectId; appointment.CategoryId = value.CategoryId; } _context.SaveChanges(); } if (param.action == "remove" || (param.action == "batch" && param.deleted.Count > 0)) // this block of code will execute when updating the appointment { if (param.action == "remove") { int key = Convert.ToInt32(param.key); ScheduleEvent appointment = _context.ScheduleEvents.Where(c => c.Id == key).FirstOrDefault(); if (appointment != null) _context.ScheduleEvents.Remove(appointment); } else { foreach (var apps in param.deleted) { ScheduleEvent appointment = _context.ScheduleEvents.Where(c => c.Id == apps.Id).FirstOrDefault(); if (apps != null) _context.ScheduleEvents.Remove(appointment); } } _context.SaveChanges(); } return _context.ScheduleEvents.ToList(); } Step 7: Compile and run the application. To perform the basic CRUD actions, please visit the UG documentation.You can download the same sample in GitHub.Conclusion I hope you enjoyed learning about how to perform the CRUD operations with editor template in the ASP.Net Core Scheduler.You can refer to our ASP.NET Core Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core Scheduler example to understand how to create and manipulate data.For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-trac, or feedback portal. We are always happy to assist you!
The knowledge base article covers the way to customize the event with multi-color based on its timing. Step 1: Create the sample with the scheduler component. A brief explanation about getting started is available here. Step 2: Define the Model with built-in fields for Appointment. Add an additional filed in events object to set a different color for that duration. For example, we have used the ClosingTime in the below object. Model public class RoomData { public int Id { get; set; } public string Subject { get; set; } public string Location { get; set; } public string Description { get; set; } public DateTime StartTime { get; set; } public DateTime EndTime { get; set; } public DateTime ClosingTime { get; set; } } Step 3: Create the data source using the Model class for Scheduler. List<RoomData> roomData = new List<RoomData>(); roomData.Add(new RoomData { Id = 1, Subject = "Board Meeting", Description = "Meeting to discuss business goal of 2018.", StartTime = new DateTime(2018, 8, 1, 9, 0, 0), EndTime = new DateTime(2018, 8, 1, 12, 0, 0), ClosingTime = new DateTime(2018, 8, 1, 11, 0, 0) }); Step 4: Bind the eventRendered event to apply the color while rendering the events. Control section @Html.EJS().Schedule("schedule").Width("100%").Height("650px").SelectedDate(new DateTime(2020, 8, 1)).ActionBegin("onActionBegin").CurrentView(View.TimelineWeek).Views(view => { view.Option(View.TimelineDay).Add(); view.Option(View.TimelineWeek).Add(); Step 5: The below script code is handling the customization of appointment in the event. Script section function onEventRendered(args) { if (args.data.ClosingTime > args.data.StartTime) { args.element.querySelector('.e-subject').style.textAlign = "Left"; var totalDuration = args.data.EndTime.getTime() - args.data.StartTime.getTime(); var duration = args.data.EndTime.getTime() - args.data.ClosingTime.getTime(); var per = (duration / totalDuration) * 100; var div = document.createElement("div"); div.classList.add('e-custom-appointment-1'); args.element.querySelector('.e-appointment-details').parentElement.appendChild(div); var percent = onExceedClosedTime(args); if (percent) { args.element.querySelector('.e-custom-appointment-1').style.paddingRight = '' + (per - percent) + '%'; } else { args.element.querySelector('.e-custom-appointment-1').style.paddingRight = '' + (per) + '%'; } } } Output: Step 6: Compile and run the project. Sample: You can download the sample from here.
