How to create multi-color appointment in the ASP.NET Core Scheduler
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.
