ScheduleComponent - 24 Hours Time format | React Forums

Sinchan NIkam

Asked On January 15, 2020 12:11 PM UTC

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

Reply | Reply with quote

Hareesh Balasubramanian [Syncfusion]

Replied On January 17, 2020 12:45 PM UTC

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

Reply | Reply with quote

Sinchan NIkam

Replied On January 31, 2020 07:45 AM UTC

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

Reply | Reply with quote

Vengatesh Maniraj [Syncfusion]

Replied On February 3, 2020 09:47 AM UTC

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>

</ScheduleComponent>

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

Regards,

Vengatesh

Reply | Reply with quote

smith

Replied On February 4, 2020 12:42 PM UTC

"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

Reply | Reply with quote

Vengatesh Maniraj [Syncfusion]

Replied On February 5, 2020 07:22 AM UTC

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

Reply | Reply with quote

Sinchan NIkam

Replied On February 5, 2020 09:26 AM UTC

PFA.

Regards,

Sinchan.

Attachment: sample_747968d1.zip

Reply | Reply with quote

Vengatesh Maniraj [Syncfusion]

Replied On February 6, 2020 09:08 AM UTC

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
150665	Jan 15,2020 12:11 PM UTC	Feb 6,2020 09:08 AM UTC	React - EJ 2	7

ScheduleComponent - 24 Hours Time format

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US