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

how to highlight the cell from date range?


First of all thank you very much for helping developer with such a great products.

I am working with Angular 8 Application where I have used the scheduler.

I would like to discuss some requirements.

1. I would like to highlight the cell in schedule on external click event.

     i.e On click event (Not from the scheduler)  I am getting date range.  i have date range 10.01.2020 - 15.01.2020. I would like to just highlight this date range with back ground color. Is it possible?    


7 Replies

HB Hareesh Balasubramanian Syncfusion Team January 20, 2020 07:19 AM

Hi Parthkumar, 
Greetings from Syncfusion Support. 
Based on your requirement, we have prepared a sample such that the scheduler cells has been highlighted while click on the button externally and the same can be viewed from the following link, 
Kindly try the above sample, if you have any concerns please revert us back for further assistance. 

PK Parthkumar Kakadiya January 20, 2020 09:35 AM

Hi Hareesh,

Thanks a lot for your support.

Your solution worked perfect what i want. Thanks for your help..

Have a nice day.


VM Vengatesh Maniraj Syncfusion Team January 21, 2020 12:19 AM

Hi Parth, 

You are most welcome. 


PK Parthkumar Kakadiya January 27, 2020 11:28 AM

Hi ,

Small update for this thread. 

Once I highlighted the cell:

  How could I refresh the cell again to normal style?


VM Vengatesh Maniraj Syncfusion Team January 28, 2020 02:36 AM

Hi Parth, 
Thanks for the update. 
Based on your requirement, we have prepared the below sample to remove the highlighted cells. 

Kindly try the above sample and revert us for further assistance. 

PK Parthkumar Kakadiya January 28, 2020 05:15 AM

Hi Vengatesh,

Thanks a lot for your solution. It works fine for me. 

I have few queries regarding the Date Format.

1. How could i highlight the cell with the only One Date? i.e. "2020-01-02"

2. In the date range I have Date in the string Format and I am using below code to highlight cell.

This is the date I am giving

Result looks something Like: 

As you can see, For the starting date which start From "2019-11-06" But It start Highlight from the 10th. As far as I understood I think it's problem of date Format not sure.

3. I have made my Own Custom Editor Window which is open on One Click at Cell. Now I am getting start and End date like below.

As you can see it shows next day date for Enddate.  in below picture you can also see the code:

I have changed the name of the start and end time for data binding with my data structure.

Please help me with this small stuff. I have also attached my code.
Thanks a lot for your support.


Attachment: calendar_6a941b3.zip

VM Vengatesh Maniraj Syncfusion Team January 29, 2020 04:35 AM

Hi Parth, 

Tanks for the update. 

We have validated the shared details and we suspect that you have used the custom date format and it would be the cause. So we suggest that you have to use the format property for dateTimePicker component. Please refer to the below links for more reference. 

Kindly set the format for dateTimePicker control and see the result. If still the issue persists please let us know.  


Live Chat Icon For mobile
Up arrow icon