Ej2 Schedule: How to make time selection always show

[ISMAIL HAMZAH]

Hello,

How to make time selection at Start and End, always showing?

note:

For for view mode other than Month, the showing of time selection is default behavior because we can create new appointment at what time. But the story is different when the view is Month view, when we create new appointment, the default is IsAllDay == true, so the time selection is not showing. I have hide the option All Day to make All Day appointment false is default and user don't have to select it from the UI.

I hope my question is clear enough.

Thanks in advance

best regards,

Ismail

[Praveenkumar Narasimhanaidu]

Hi Ismail, 

Greetings from Syncfusion support..! 

We have validated the reported query “how to make time selection always show” at our end and let you know that, we can achieve it with the help of scheduler popupOpen event using the below code. We have also prepared a sample for your reference which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/uncheck-the-allday-field-while-opening-in-month-view-a6wsyu?file=index.js 

Index.js 

 popupOpen: function(args) { 

    if (args.type == 'Editor' && scheduleObj.currentView == 'Month' && !args.target.classList.contains("e-appointment")) { 

        args.element.querySelectorAll('.e-time-icon')[1].classList.remove('e-icon-disable');  

            args.element.querySelectorAll('.e-time-icon')[0].classList.remove('e-icon-disable');  

            args.element.querySelector('.e-time-zone-container').classList.remove('e-disable');  

            args.element.querySelector('.e-start').ej2_instances[0].format = "M/d/yy h:mm a";  

            args.element.querySelector('.e-end').ej2_instances[0].format = "M/d/yy h:mm a";  

            args.element.querySelector('.e-start').ej2_instances[0].value.setHours(9, 0, 0);  

            args.element.querySelector('.e-end').ej2_instances[0].value.setHours(9, 30, 0);  

            args.element.querySelector('.e-start').ej2_instances[0].dataBind();  

            args.element.querySelector('.e-all-day.e-checkbox').ej2_instances[0].checked = false; 

    } 

  } 

Output: 

 

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

Regards, 

Praveenkumar 

[ISMAIL HAMZAH]

Hello Praveen,

Thank you for your update. I have found another solution, that is by settings the args.data.IsAllDay = false at popupOpen. Please check my code below, is it ok?

note:

so far is working perfectly.

 popupOpen: (args) => {

            var guid = args.data.Guid;

            if (args.name === 'popupOpen' && (args.type === 'Editor' || args.type === 'QuickInfo') && ej.base.isNullOrUndefined(guid)) {

                        args.data.IsAllDay = false;

            }

Best regards,

Ismail

[Nevitha Ravi]

Hi Ismail, 

Thanks for your update. 

We have checked the shared code and let you know that this solution may not work in month view and all-day rows. So check in that case, if this works you can use this solution. Else we suggest you to try our solution. 

Please get back to us if you need any further assistance. 

Regards, 

Nevitha