Change Event Color According To The Time Interval

[mehmet yanbak]

Hi,

I want to change the color of the event according to the time interval. If the event is back than now, it should be red. If it's going to start at a later time, it should be green, If it is currently in progress, it should be blue. How can I do this ? Please find attached a sample image.

Attachment: schedule_cec8344c.rar

[Karthigeyan Krishnamurthi]

Hi Mehmet, 

 

Syncfusion greetings. 

 

We can achieve your requirement using eventRendered event and kindly refer the below sample. 

https://stackblitz.com/edit/angular-5bsptv?file=app.component.ts 

 

eventRendered(args: EventRenderedArgs): void { 

    let data: { [key: string]: Object } = args.data; 

    if ((data.StartTime as Date).getTime() < new Date().getTime() && (data.EndTime as Date).getTime() < new Date().getTime()) { 

      args.element.style.backgroundColor = 'red'; 

    } 

    else if (((data.StartTime as Date).getTime() < new Date().getTime() && (data.EndTime as Date).getTime() > new Date().getTime())) { 

      args.element.style.backgroundColor = 'blue'; 

    } 

    else if ((data.StartTime as Date).getTime() > new Date().getTime() && (data.EndTime as Date).getTime() > new Date().getTime()) { 

      args.element.style.backgroundColor = 'green'; 

    } 

  } 

 

 

 

 

Regards, 

Karthi 

[mehmet yanbak]

Hi,

It works, thank you so much :)

[Karthigeyan Krishnamurthi]

Most welcome 😊