syncfusion datetimepicker I want to set default time

hello I'm using the example on this page

syncfusion example

and my problum is that I want to set the default time
like start time : 9:00:00 and end time : 9:30:00

also, client can set time freely...

could you help me T.T ...

and also I want to drag the popup...

I tried

        function OnPopupOpen(args) {

        ej.base.addClass([args.element], ['e-draggable']);

this code but It doesn't work..

I didn't find the configuration of popup movable. But it can be observed that the popup id is "schedule_dialog_wrapper".
For the 1st question, you can try modify the datepicker part like below

if (!startElement.classList.contains('e-datetimepicker')) {
new ej.calendars.DateTimePicker({ value: new Date(startElement.value) || new Date(new Date(startElement.value).toISOString().split("T")[0] + "T09:00:00+08:00") }, startElement);
}
var endElement = args.element.querySelector('#EndTime');
if (!endElement.classList.contains('e-datetimepicker')) {
new ej.calendars.DateTimePicker({ value: new Date(endElement.value) || new Date(new Date(endElement.value).toISOString().split("T")[0] + "T09:30:00+08:00") }, endElement);
}

It will get 9:00-9:30 by default in popup.(change the "+03:00" to your timezone)

Modify explaination:value: new Date(startElement.value) || xxx This sentence means if the startelement is not empty choose the front one, or will choose the latter.

You can set the default time for the new event popup in the editor template by using the below code.

 function onPopupOpen(args) {
     if (args.type === 'Editor') {
        if(args.target.classList.contains('e-work-cells')) {
            args.data.StartTime = new Date(args.data.StartTime.setHours(9, 0, 0));
            args.data.EndTime = new Date(args.data.EndTime.setHours(9, 30, 0));
        }
         var startElement = args.element.querySelector('#StartTime');
        if (!startElement.classList.contains('e-datetimepicker')) {
            new ej.calendars.DateTimePicker({ value: args.data.StartTime || new Date() }, startElement);
        }
        var endElement = args.element.querySelector('#EndTime');
        if (!endElement.classList.contains('e-datetimepicker')) {
            new ej.calendars.DateTimePicker({ value: args.data.EndTime || new Date() }, endElement);
        }
    }

Refer to the below shared UG to know about how to drag the popup.

UG: https://ej2.syncfusion.com/aspnetcore/documentation/common/drag-and-drop#initializing-custom-draggable-element

function onPopupOpen(args) {
    var dragElement = args.element;
    var draggable = new ej.base.Draggable(dragElement, { clone: false });}

I made it with this code

var titleTextElement = args.element.querySelector('.e-title-text');

var startElement = args.element.querySelector('#START_DATE');
var endElement = args.element.querySelector('#END_DATE');

if (titleTextElement.innerText === 'Edit Event') { 

    new ej.calendars.DateTimePicker({ value: new Date(startElement.value), format: "yyyy-MM-dd HH:mm:ss" }, startElement);
    new ej.calendars.DateTimePicker({ value: new Date(endElement.value), format: "yyyy-MM-dd HH:mm:ss" }, endElement);
}
else{ 
    var initialDate = new Date(startElement.value);
    initialDate.setHours(9, 0, 0);

    new ej.calendars.DateTimePicker({ value: initialDate, format: "yyyy-MM-dd HH:mm:ss" }, startElement);

    initialDate = new Date(endElement.value);
    initialDate.setHours(9, 30, 0);

    new ej.calendars.DateTimePicker({ value: initialDate, format: "yyyy-MM-dd HH:mm:ss" }, endElement);
}