Formatting From and To date

[Ajesh]

I am working on syncfusion schedule control to manage events. While adding or editing events we have in built popup with required fields for events.

My Question is:

Is there any way to customize the from and to date formats? (For example I want the format to be like - November 11, 2020 6:00am)

[Hareesh Balasubramanian]

Hi Ajesh, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared query “customize the from and to date formats” using dateFormat property of the Scheduler which can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/forum/160069/ze/ScheduleSample-564972915  

API link: https://ej2.syncfusion.com/javascript/documentation/api/schedule/#dateformat  

@(Html.EJS().Schedule("schedule") 

    .Height("550px") 

    .DateFormat("MMMM dd, yyyy")\ 

    . 

    . 

) 

 

Kindly try the above solution and get back to us if you need any further assistance. 

We will happy to assist you. 

Regards, 

Hareesh 

[Ajesh]

Thanks For the Quick response. 

The attached solution is working fine. 

But the problem is when I use EditorTemplate with PopupOpen event the date format is not working.  

Can you kindly replace the udated index.html and run the solution to reproduce the issue please?

Steps to Run:

1) Open the Sample project - https://www.syncfusion.com/downloads/support/forum/160069/ze/ScheduleSample-564972915  

2) Replace content index.cshtml with attached file

3) Run solution

Kindly suggest. I need date format to be- November 11, 2020 6:00am

Attachment: Index_1edd720b.7z

[Satheesh Kumar Balasubramanian]

Hi Ajesh, 

  

Thanks for your update. 

  

We have validated your reported query at our end and modified the sample by setting date format to DateTimePicker using format property to meet your requirement, which can be downloaded from the following link.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/160069/ze/ScheduleFormat1821393906 

API: https://ej2.syncfusion.com/javascript/documentation/api/datetimepicker/#format 

  

Code snippet:    

<script type="text/javascript"> 

    function onPopupOpen (args) { 

        if (args.type === 'Editor') { 

            var startElement = args.element.querySelector('#StartTime'); 

            if (!startElement.classList.contains('e-datetimepicker')) { 

                new ej.calendars.DateTimePicker({ format: 'MMMM dd, yyyy hh:mm a', value: new Date(startElement.value) || new Date() }, startElement); 

            } 

            var endElement = args.element.querySelector('#EndTime'); 

            if (!endElement.classList.contains('e-datetimepicker')) { 

                new ej.calendars.DateTimePicker({ format: 'MMMM dd, yyyy hh:mm a', value: new Date(endElement.value) || new Date() }, endElement); 

            } 

        } 

    } 

</script> 

  

Kindly try the above solution and get back to us if you need any further assistance.  

   

Regards,   

Satheesh Kumar B