How to apply different color to appointments based on category in MVC Scheduler?
This knowledge base article explains the way to apply the different colors for every appointments.
Step 1: Create the MVC application with the help of below getting started
https://ej2.syncfusion.com/aspnetmvc/documentation/schedule/getting-started/
Step 2: Define the appointment class like below.
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string CategoryColor { get; set; }
}
Step 3: Add the appointment data in action result like below
public ActionResult Index()
{
List<AppointmentData> final = new List<AppointmentData>();
AppointmentData temp = new AppointmentData();
temp.Id = 1;
temp.StartTime = Convert.ToDateTime("3/2/20");
temp.EndTime = Convert.ToDateTime("3/9/2020");
temp.Subject = "Jorge Gonzalez - PTO";
temp.CategoryColor = "#00bdae";
final.Add(temp);
AppointmentData temp1 = new AppointmentData();
temp1.Id = 2;
temp1.StartTime = Convert.ToDateTime("3/5/20");
temp1.EndTime = Convert.ToDateTime("3/19/2020");
temp1.Subject = "William Gundaker - PTO";
temp1.CategoryColor = "#ea7a57";
final.Add(temp1);
ViewBag.appointments = final;
return View();
}
Step 4: Bind the eventRendered event in cshtml file to customize the appointment while its rendering.
@Html.EJS().Schedule("schedule").Width("100%").EventRendered("onEventRendered").EventSettings(new ScheduleEventSettings { DataSource = ViewBag.appointments }).Views(view => { view.ReadOnly(true).Option(Syncfusion.EJ2.Schedule.View.Month).Add(); }).Render()
<script type="text/javascript">
function onEventRendered(args) {
var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];
var categoryColor = args.data.CategoryColor;
if (!args.element || !categoryColor) {
return;
}
if (scheduleObj.currentView === 'Agenda') {
(args.element.firstChild).style.borderLeftColor = categoryColor;
} else {
args.element.style.backgroundColor = categoryColor;
}
}
</script>
Step 7: Run the application and the Schedule will be rendered appointments with different colors.
UG: https://ej2.syncfusion.com/aspnetmvc/documentation/schedule/appointments/#using-eventrendered-event
Example: Events with different colors
