We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. Coloring events based on event data

Coloring events based on event data

Hi everybody,

  how can I color events based on data like RecurrenceRule, Location or Subject or even a colorstring coming from the database ? E.g. all recurring events in green.

      regards

         Uwe Hein

8 Replies
NR Nevitha Ravi Syncfusion Team August 8, 2019 10:05 AM UTC

Hi Uwe, 
  
Greetings from Syncfusion Support. 
  
We have prepared a sample to set colour for events from a colour string provided in a field of the recurring events using EventRendered event for your reference which can be downloaded from the following link. 
  
<EjsSchedule TValue="AppointmentData" Height="650px" SelectedDate="new DateTime(2019, 1, 31)"> 
    <ScheduleEvents TValue="AppointmentData" EventRendered="OnEventRendered"></ScheduleEvents> 
    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings> 
</EjsSchedule> 
@code{ 
    public string[] CustomClass = { "custom-class" }; 
    public string BackgroundColor; 
    public void OnEventRendered(EventRenderedArgs<AppointmentData> args) 
    { 
        if (args.Data.RecurrenceRule != null) 
        { 
            args.Element.AddClass(CustomClass); 
            bgcolor = args.Data.CategoryColor; 
        } 
    } 
    List<AppointmentData> DataSource = new List<AppointmentData> 
    { 
        new AppointmentData { Id = 1, Subject = "Sprint Meeting", StartTime = new DateTime(2019, 2, 1, 9, 30, 0) , EndTime = new DateTime(2019, 2, 1, 11, 0, 0) }, 
        new AppointmentData { Id = 2, Subject = "Scrum Meeting", StartTime = new DateTime(2019, 1, 27, 9, 30, 0) , EndTime = new DateTime(2019, 1, 27, 11, 0, 0), 
        RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=5", CategoryColor= "#1aaa55" } 
    }; 
  
    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 CategoryColor { 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: @BackgroundColor; 
    } 
</style> 
  
Please try out the sample and let us know if you need any further assistance. 
  
Regards, 
Nevitha 
 


UH Uwe Hein August 8, 2019 12:35 PM UTC

Hi Nevitha, 
  thank you very much for your fast answer - it works as expected. I had to change the style section to :

    .e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-timeline-view .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: @bgcolor;

as I am working with a timeline. Are these the correct classes ?
Is there a way to display more than 2 colors by putting one or more else branches in the OnEventRendered method like:

if (args.Data.RecurrenceRule != null)
{
     args.Element.AddClass(CustomClass);
     bgcolor = args.Data.CategoryColor;
}
else if (args.Data.Subject == "Sprint Meeting")
{
     bgcolor = args.Data.CategoryColor; // color provided for Sprint Meeting
}
else
{
     bgcolor = args.Data.CategoryColor; // color provided for this special event
}
and so on .....
I tried to figure it out but was not successful. Thank you again for your fast and competent support.
regards
  Uwe

NR Nevitha Ravi Syncfusion Team August 9, 2019 05:44 AM UTC

Hi Uwe, 

Thanks for your update. 
 
No, the classes you have mentioned are wrong for timeline views. Please refer the following code for timeline views and timeline month view. 
 
<style> 
    .e-schedule .e-timeline-view .e-appointment.custom-class, 
    .e-schedule .e-timeline-month-view .e-appointment.custom-class { 
        background: @BgColor; 
    } 
    .e-schedule .e-timeline-view .e-appointment.custom-class1, 
    .e-schedule .e-timeline-month-view .e-appointment.custom-class1 { 
        background: @BgColor1; 
    } 
    .e-schedule .e-timeline-view .e-appointment.custom-class2, 
    .e-schedule .e-timeline-month-view .e-appointment.custom-class2 { 
        background: @BgColor2; 
    } 
</style> 
 
 
In your shared code, you haven’t add the custom class for elements of ‘sprint meeting and special event’, we have modified our previous sample with timeline view and added different colours for each events which can be downloadable from the following link. 
 
   public string[] CustomClass = { "custom-class" }; 
    public string[] CustomClass1 = { "custom-class1" }; 
    public string[] CustomClass2 = { "custom-class2" }; 
    public string BgColor, BgColor1, BgColor2; 
    public void OnEventRendered(EventRenderedArgs<AppointmentData> args) 
    { 
        if (args.Data.RecurrenceRule != null) 
        { 
            args.Element.AddClass(CustomClass); 
            BgColor = args.Data.CategoryColor; 
        } 
        else if (args.Data.Subject == "Sprint Meeting") 
        { 
            args.Element.AddClass(CustomClass1); 
            BgColor1 = args.Data.CategoryColor; // color provided for Sprint Meeting 
        } 
        else 
        { 
            args.Element.AddClass(CustomClass2); 
            BgColor2 = args.Data.CategoryColor; // color provided for this special event 
        } 
    } 
    List<AppointmentData> DataSource = new List<AppointmentData> 
    { 
        new AppointmentData { Id = 3, Subject = "Special event", StartTime = new DateTime(2019, 1, 17, 9, 30, 0) , EndTime = new DateTime(2019, 1, 17, 11, 0, 0), CategoryColor= "#df5286" }, 
        new AppointmentData { Id = 1, Subject = "Sprint Meeting", StartTime = new DateTime(2019, 1, 15, 9, 30, 0) , EndTime = new DateTime(2019, 1, 15, 11, 0, 0), CategoryColor= "#7fa900" }, 
        new AppointmentData { Id = 2, Subject = "Scrum Meeting", StartTime = new DateTime(2019, 1, 27, 9, 30, 0) , EndTime = new DateTime(2019, 1, 27, 11, 0, 0), 
        RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=5", CategoryColor= "#1aaa55" } 
    }; 
 
Please try out the sample and let us know if you need any further assistance. 

Regards, 
Nevitha 


UH Uwe Hein August 9, 2019 10:58 AM UTC

Hi Nevitha,
   
  thank you very much - works like a charm.

        regards

            Uwe
 

AL Alex February 8, 2020 01:30 AM UTC

Hello, I basically want to do the same as Uwe, but with a dynamic number of colors.
I have a series calendar, showing each episode. I want to color each episode according to what series it's from.

My problem is that I can't hardcode the styles as I do not know how many different colors will be needed for a specific month (I'm using the month view).

Is there a way to do this dynamically? 


Here is a picture from my website:

AK Alagumeena Kalaiselvan Syncfusion Team February 12, 2020 09:16 AM UTC

Hi Uwe, 

Thanks for your update! 

Yes, you can add the color to the appointment dynamically by simply customizing the style attribute of the appointment like below code 

@using Syncfusion.EJ2.Blazor.Schedule 
 
<EjsSchedule TValue="AppointmentData" Height="650px" SelectedDate="new DateTime(2019, 1, 17)"> 
    <ScheduleEvents TValue="AppointmentData" EventRendered="OnEventRendered"></ScheduleEvents> 
    <ScheduleViews> 
        <ScheduleView Option="View.Day"></ScheduleView> 
        <ScheduleView Option="View.Week"></ScheduleView> 
        <ScheduleView Option="View.Month"></ScheduleView> 
        <ScheduleView Option="View.WorkWeek"></ScheduleView> 
    </ScheduleViews> 
    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings> 
</EjsSchedule> 
 
@code{ 
    public async Task OnEventRendered(EventRenderedArgs<AppointmentData> args) 
    { 
        string style = (await args.Element.GetAttribute("style")).ToString();  // Get style attribute of the element 
        style += "background:" + args.Data.CategoryColor;               // concatenate the background color 
        args.Element.SetAttribute("style", style);                      // Reset the values of style attribute 
    } 
    List<AppointmentData> DataSource = new List<AppointmentData> 
{ 
        new AppointmentData { Id = 3, Subject = "South Park", StartTime = new DateTime(2019, 1, 17, 9, 30, 0) , EndTime = new DateTime(2019, 1, 17, 11, 0, 0), CategoryColor= "#df5286" }, 
        new AppointmentData { Id = 1, Subject = "Vikings", StartTime = new DateTime(2019, 1, 15, 9, 30, 0) , EndTime = new DateTime(2019, 1, 15, 11, 0, 0), CategoryColor= "#7fa900" }, 
        new AppointmentData { Id = 2, Subject = "Rick and Morty", StartTime = new DateTime(2019, 1, 27, 9, 30, 0) , EndTime = new DateTime(2019, 1, 27, 11, 0, 0), 
        RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=5", CategoryColor= "#1aaa55" } 
    }; 
 
    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 CategoryColor { get; set; } 
    } 
} 

Kindly try out with the above sample and get back to us, If you need further assistance. 

Regards 
Alagumeena.K  
  


JL jose luis barajas October 19, 2021 08:42 PM UTC

Hi

Can you help me converting this sample function from this post

to version 19.3.0.43

I get errror with this line, Element not exists!

string style = (await args.Element.GetAttribute("style")).ToString()

 public async Task OnEventRendered(EventRenderedArgs<AppointmentData> args) 
    { 
        string style = (await args.Element.GetAttribute("style")).ToString();  // Get style attribute of the element 
        style += "background:" + args.Data.CategoryColor;               // concatenate the background color 
        args.Element.SetAttribute("style", style);                      // Reset the values of style attribute 
    } 


Thanks in advance!


SK Satheesh Kumar Balasubramanian Syncfusion Team October 20, 2021 10:32 AM UTC

Hi Jose, 
  
Thanks for your update. 
  
We have validated your reported query "I get errror with this line, Element not exists!" and let you know that you can customize the events by adding or modifying its element attribute using Attributes. In the following example, event attributes have been modified through the Attributes to apply color to the events. 
  
  
Index.razor:     
<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> 
        <ScheduleView Option="View.WorkWeek"></ScheduleView> 
    </ScheduleViews> 
    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings> 
</SfSchedule> 
@code { 
    DateTime CurrentDate = new DateTime(2019, 1, 17); 
    public void OnEventRendered(EventRenderedArgs<AppointmentData> args) 
    { 
        Dictionary<string, object> attributes = new Dictionary<string, object>(); 
        attributes.Add("style", "background:" + args.Data.CategoryColor); 
        args.Attributes = attributes; 
    } 
    List<AppointmentData> DataSource = new List<AppointmentData> 
    { 
        new AppointmentData { Id = 3, Subject = "South Park", StartTime = new DateTime(2019, 1, 17, 9, 30, 0) , EndTime = new DateTime(2019, 1, 17, 11, 0, 0), CategoryColor= "#df5286" }, 
        new AppointmentData { Id = 1, Subject = "Vikings", StartTime = new DateTime(2019, 1, 15, 9, 30, 0) , EndTime = new DateTime(2019, 1, 15, 11, 0, 0), CategoryColor= "#7fa900" }, 
        new AppointmentData { Id = 2, Subject = "Rick and Morty", StartTime = new DateTime(2019, 1, 27, 9, 30, 0) , EndTime = new DateTime(2019, 1, 27, 11, 0, 0), 
        RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=5", CategoryColor= "#1aaa55" } 
    }; 
  
    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 CategoryColor { get; set; } 
    } 
} 
  
  
Kindly try the above sample and let us know if this meets your requirement. 
  
Regards, 
Satheesh Kumar B 


Loader.
Up arrow icon