1. Home
  2. Forum
  3. Blazor
  4. Change Appointment color on Week View

Change Appointment color on Week View

I am using Css to change the colors of appointments on month view but I can not figure out how to change them on Week view

Thank you,

Nathanael Mattay

3 Replies 1 reply marked as answer
PN Praveenkumar Narasimhanaidu Syncfusion Team March 31, 2021 02:31 PM UTC

Hi Nathanael, 
  
Greetings from Syncfusion support..! 
  
We have validated your requirement “change appointment color on week view” at our end and let you know that, you can add custom color for appointment in any scheduler view with the help of scheduler EventRendered event. We have also prepared sample for your reference which can be downloaded from following link. 
  
  
<SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate"> 
    <ScheduleEvents TValue="AppointmentData" EventRendered="OnEventRendered"></ScheduleEvents> 
    <ScheduleViews> 
        <ScheduleView Option="View.Day"></ScheduleView> 
        <ScheduleView Option="View.Week"></ScheduleView> 
        <ScheduleView Option="View.Month"></ScheduleView> 
    </ScheduleViews> 
    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings> 
</SfSchedule> 
@code { 
    DateTime CurrentDate = new DateTime(2020, 1, 31); 
    public List<string> CustomClass = new List<string>() { "custom-class" }; 
    public void OnEventRendered(EventRenderedArgs<AppointmentData> args) 
    { 
        args.CssClasses = CustomClass; 
    } 
    List<AppointmentData> DataSource = new List<AppointmentData> 
{ 
    new AppointmentData{ Id = 1, Subject = "Meeting", StartTime = new DateTime(2020, 1, 31, 9, 30, 0) , EndTime = new DateTime(2020, 1, 31, 11, 0, 0) } 
}; 
  
    public class AppointmentData 
    { 
        public int Id { get; set; } 
        public string Subject { get; set; } 
        public string Location { get; set; } 
        public DateTime StartTime { get; set; } 
        public DateTime EndTime { get; set; } 
        public string Description { get; set; } 
        public bool IsAllDay { get; set; } 
        public string RecurrenceRule { get; set; } 
        public string RecurrenceException { get; set; } 
        public Nullable<int> RecurrenceID { get; set; } 
    } 
} 
<style> 
    .e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.custom-class, 
    .e-schedule .e-vertical-view .e-day-wrapper .e-appointment.custom-class, 
    .e-schedule .e-month-view .e-appointment.custom-class { 
        background: #32CD32; 
    } 
</style> 
  
For more information about appointment customization, please refer below UG links. 
  
Kindly try the above solution and get back to us if you need any further assistance. 
  
Regards, 
Praveenkumar. 
 


NA Nathanael March 31, 2021 03:03 PM UTC

Okay I was able to get this specifically to work. Thank you. 

However, the color of the appointment is going to be based on the value of a property that comes back from a database. There will be about 32 different colors. How can I set the color based on that value?

Again, was I able to do this using CssClass as a property to set all the different colors. But it only works in month view and not week view.

Thank you!
Nathanael Mattay

RV Ravikumar Venkatesan Syncfusion Team April 1, 2021 10:16 AM UTC

Hi Nathanael, 

Thanks for the update. 

We have validated your requirement “How can I set the color based on value comes from DB?” at our end. We can set the color to the appointment by adding the class name to the CssClass property on defining appointment data. For the same, we have prepared a sample which can be downloaded from the below link. 

 
[Index.razor]  
@code { 
    DateTime CurrentDate = new DateTime(2020, 1, 31); 
    List<AppointmentData> DataSource = new List<AppointmentData> 
{ 
    new AppointmentData{ Id = 1, Subject = "Meeting - 1", StartTime = new DateTime(2020, 1, 31, 9, 30, 0) , EndTime = new DateTime(2020, 1, 31, 11, 0, 0), CssClass = "e-darkcyan" }, 
    new AppointmentData{ Id = 2, Subject = "Meeting - 2", StartTime = new DateTime(2020, 1, 31, 11, 30, 0) , EndTime = new DateTime(2020, 1, 31, 12, 0, 0), CssClass = "e-black" }, 
    new AppointmentData{ Id = 3, Subject = "Meeting - 3", StartTime = new DateTime(2020, 1, 30, 6, 30, 0) , EndTime = new DateTime(2020, 1, 30, 12, 30, 0), CssClass = "e-aqua" }, 
    new AppointmentData{ Id = 4, Subject = "Meeting - 4", StartTime = new DateTime(2020, 1, 26, 12, 0, 0) , EndTime = new DateTime(2020, 1, 26, 16, 0, 0), CssClass = "e-aquamarine" }, 
    new AppointmentData{ Id = 5, Subject = "Meeting - 5", StartTime = new DateTime(2020, 1, 28, 11, 30, 0) , EndTime = new DateTime(2020, 1, 28, 12, 0, 0), CssClass = "e-blueviolet" }, 
    new AppointmentData{ Id = 6, Subject = "Meeting - 6", StartTime = new DateTime(2020, 1, 28, 6, 0, 0) , EndTime = new DateTime(2020, 1, 28, 12, 0, 0), CssClass = "e-chartreuse" } 
 
}; 
 
    public class AppointmentData 
    { 
        public int Id { get; set; } 
        public string Subject { get; set; } 
        public string Location { get; set; } 
        public DateTime StartTime { get; set; } 
        public DateTime EndTime { get; set; } 
        public string Description { get; set; } 
        public bool IsAllDay { get; set; } 
        public string RecurrenceRule { get; set; } 
        public string RecurrenceException { get; set; } 
        public Nullable<int> RecurrenceID { get; set; } 
        public string CssClass { get; set; } 
    } 
} 
<style> 
    .e-aliceblue { 
        background: aliceblue !important; 
    } 
 
    .e-antiquewhite { 
        background: antiquewhite !important; 
    } 
 
    .e-aqua { 
        background: aqua !important; 
    } 
 
    .e-aquamarine { 
        background: aquamarine !important; 
    } 
 
    .e-black { 
        background: black !important; 
    } 
 
    .e-blue { 
        background: blue !important; 
    } 
 
    .e-blueviolet { 
        background: blueviolet !important; 
    } 
 
    .e-brown { 
        background: brown !important; 
    } 
 
    .e-cadetblue { 
        background: cadetblue !important; 
    } 
 
    .e-chartreuse { 
        background: chartreuse !important; 
    } 
 
    .e-darkcyan { 
        background: darkcyan !important; 
    } 
 
    .e-darkturquoise { 
        background: darkturquoise !important; 
    } 
</style> 

Kindly try the above sample and get back to us if you need any further assistance. 


Regards, 
Ravikumar Venkatesan 


Marked as answer
Loader.
Up arrow icon