how to highlight the cell from date range?

[Parthkumar Kakadiya]

Hi, 

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?    

Regards,

Parth

[Hareesh Balasubramanian]

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, 

https://stackblitz.com/edit/angular-rubmjr-ptc9wn?file=app.component.ts 

 

Kindly try the above sample, if you have any concerns please revert us back for further assistance. 

 

Regards, 

Hareesh 

[Parthkumar Kakadiya]

Hi Hareesh,

Thanks a lot for your support.

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

Have a nice day.

Regards,

Parth

[Vengatesh Maniraj]

Hi Parth, 

You are most welcome. 

Regards, 

Vengatesh 

[Parthkumar Kakadiya]

Hi ,

Small update for this thread. 

Once I highlighted the cell:

  How could I refresh the cell again to normal style?

Regards,

parth

[Vengatesh Maniraj]

Hi Parth, 

 

Thanks for the update. 

 

Based on your requirement, we have prepared the below sample to remove the highlighted cells. 

 

Sample: https://stackblitz.com/edit/angular-highlight-and-remove-hightlight-for-schedule-wor-hhux3d?file=app.component.ts 

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

 

Regards, 

Vengatesh 

[Parthkumar Kakadiya]

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.

Regards,

Parth

Attachment: calendar_6a941b3.zip

[Vengatesh Maniraj]

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. 

Online Sample: https://ej2.syncfusion.com/angular/demos/#/material/datetimepicker/date-time-format 

UG: https://ej2.syncfusion.com/angular/documentation/api/datetimepicker#format 

Supported Formats: https://ej2.syncfusion.com/angular/documentation/common/internationalization/?no-cache=1#manipulating-datetime 

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

Regards, 

Vengatesh