Fade or dim previous events in schedule views

[Tony]

In the schedule views. How can we has past events on the views be shaded or faded out a bit. Similar to how google cal does it?

[Karthigeyan Krishnamurthi]

Hi Tony, 

 

Syncfusion greetings. 

 

Kindly refer the below links where past events are made as readonly.  

https://ej2.syncfusion.com/react/demos/#/material/schedule/read-only-events 

https://ej2.syncfusion.com/react/documentation/schedule/appointments/#make-specific-events-readonly 

 

Regards, 

Karthi 

[Tony]

Thanks Karthi,   I do not want to make the events read-only.  I want the past events to have the styling shown in the example you shared and in the sample picture I provided..  Is there a way to do that?    

[Karthigeyan Krishnamurthi]

Hi Tony, 

 

Thanks for the update 

 

We can achieve your requirement using eventRendered event which triggers on both initial and CRUD actions. 

https://stackblitz.com/edit/react-je6mj4-sbd5g7?file=index.js 

 

onEventRendered(args) { 

    if (new Date() > args.data.StartTime) { 

      args.element.style.opacity = '0.5' 

    } 

  } 

 

Regards, 

Karthi