ScheduleComponent - 24 Hours Time format

[Sinchan NIkam]

Dear Team,

We need to incorporate the 24 hours time format in ScheduleComponent instead of 12 hours format.

Please suggent any solution for it.

Regards,

Sinchan

Attachment: Enterprise_Calendar_e68027f7.zip

[Hareesh Balasubramanian]

Hi Sinchan, 

Greetings from Syncfusion Support. 

Based on your requirement we have prepared a sample by setting using timescale property and the sample can be viewed from the following link, 

Sample: https://stackblitz.com/edit/react-f41ber-g9bsgu?file=index.js  

And for further reference, kindly refer the below UG link and API links, 

API Link: https://ej2.syncfusion.com/react/documentation/api/schedule/#timescale  

UG link: https://ej2.syncfusion.com/react/documentation/schedule/timescale/?no-cache=1#customizing-time-cells-using-template 

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

Regards, 

Hareesh 

[Sinchan NIkam]

Dear  Team,

We tried your solution and it works fine. However, we had one issue..

Whenever we tried to change the state value within a component, the DOM refreshes and gives us a blinking effect.

We don't want that blinking effect.

Kindly find the sample code in enclosure and please try provide us the solution.

Regards,

Sinchan

Attachment: sample_268f984c.zip

[Vengatesh Maniraj]

Hi Sinchan, 

Thanks for the update. 

Based on your shared index.js file, we have validated your reported issue and hence this issue can be overcome by enabling the delayUpdate property(Base) for the Scheduler. The root cause for this issue is that the react DOM render is calling twice when we call the setstate and hence Schedule React and template renders simultaneously. So we need have provided this property to overcome this type of issues. And for the same we have prepared a sample using your shared index.js file, it can be viewed from the following link, 

Sample: https://stackblitz.com/edit/react-lzxsd5?file=index.js 

Code snippet:  

<ScheduleComponent delayUpdate='true' height='650px' ref={schedule => this.scheduleObj = schedule} selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }} timeScale={{ 

  enable: true, majorSlotTemplate: this.majorSlotTemplate.bind(this) 

}}> 

  <ViewsDirective> 

    <ViewDirective option='Day' /> 

    <ViewDirective option='Week' /> 

    <ViewDirective option='WorkWeek' /> 

    <ViewDirective option='Month' /> 

    <ViewDirective option='Agenda' /> 

  </ViewsDirective> 

  <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} /> 

</ScheduleComponent> 

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

Regards,  

Vengatesh 

[smith]

"Dear  Team,

We tried your solution and it works fine. However, we had one issue..

Whenever we tried to دانلود کتاب انگلیسی change the state value  within a component, the DOM refreshes and gives us a blinking effect.

We don't want that blinking effect.

Kindly find the sample code in enclosure and please try provide us the solution.

Regards,

Sinchan"

thanks

[Vengatesh Maniraj]

Hi Sinchan, 

Thanks for the update. 

We couldn’t find any sample code attachment related to our Scheduler code. Kindly reattach your sample code for the better serve. 

Regards, 

Vengatesh 

[Sinchan NIkam]

PFA.

Regards,

Sinchan.

Attachment: sample_747968d1.zip

[Vengatesh Maniraj]

Hi Sinchan, 

Thanks for the update. 

We have validated your reported problem and we have modified our previously updated sample using shouldComponentUpdate reactive native method and for further reference kindly refer the below code snippets and same can be viewed from the below sample link. 

Code snippet: 

  shouldComponentUpdate() { 

    return false; // Will cause component to never re-render. 

  } 

Sample: https://stackblitz.com/edit/react-lzxsd5?file=index.js 

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

Regards,  

Vengatesh