SCHEDULE SETTING

[Alex]

Hello,

I need your help to solve a problem.

I want to deploy a shift schedule, but the user can't insert start/end time manually.

Shift 1 => 6 AM to 2 PM

Shift 2 => 2 PM to 12 PM

Shift 3 => 12 PM to 6 AM

When user click on the schedule for example at 10 AM 

1) Popup will open

2) StartTime will be set automatically to 6 AM and EndTime to 2 PM (the user can't change these values, the textbox will be read only )

Is it possible? I'm sorry but I can't find any example on documentation that allow me to implement my solution,

Could you help me to solve the problem, please ? Thanks

Alex

[Satheesh Kumar Balasubramanian]

Hi Alex, 

  

Greetings from Syncfusion Support..! 

  

We have prepared a sample based on your shared query using value and readonly property of the DateTimePicker which can be downloaded from the following link. 

 

Sample: https://stackblitz.com/edit/schedule-settings?file=index.js 

  

Code snippet:     

            <ScheduleComponent 

              height="650px" 

              ref={schedule => (this.scheduleObj = schedule)} 

              selectedDate={new Date(2019, 0, 10)} 

              eventSettings={{ dataSource: this.data }} 

              dragStart={this.onDragStart.bind(this)} 

              popupOpen={this.onPopupOpen.bind(this)} 

            > 

  

  onPopupOpen(args) { 

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

      var startTimeElement = args.element.querySelector("#StartTime") 

        .ej2_instances[0]; 

      startTimeElement.value = new Date("1/10/2019 6:00 AM"); 

      startTimeElement.readonly = true; 

      var endTimeElement = args.element.querySelector("#EndTime") 

        .ej2_instances[0]; 

      endTimeElement.value = new Date("1/10/2019 2:00 PM"); 

      endTimeElement.readonly = true; 

    } 

  } 

  

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

  

Regards, 

Satheesh Kumar B 

[Alex]

Hi Satheesh Kumar B,

Yes it's working.

I appreciate your help 

Thanks 

[Nevitha Ravi]

Hi Alex, 

You are most welcome.  Please get back to us if you need any further assistance. 

Regards, 

Nevitha 

[Alex]

Hi ,

I have another question. Is possible to remove unwanted fields from the modal?

In my solution I'd like to remove Location, All Day, Timezone & repeat.

Thanks Alex

Attachment: Modal_f8f40eb1.7z

[Satheesh Kumar Balasubramanian]

Hi Alex,

Thanks for your update.

We have validated your reported query at our end. We have achieved your requirement with the help of the below CSS class changes. We have prepared a sample for your reference and it can be available below.

Code snippet:    

.e-schedule-dialog .e-location-container,

.e-schedule-dialog .e-all-day-time-zone-row,

.e-schedule-dialog .e-recurrenceeditor .e-editor {

  display: none;

}

.e-schedule-dialog .e-subject-container {

  display: contents;

}

Sample: https://stackblitz.com/edit/schedule-settings-disable?file=index.css

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

Regards,

Satheesh Kumar B

[Alex]

Hi Satheesh Kumar B,

I understand your example. You use css to hide my elements.

Thanks for your help and have a nice day

Alex

[Nevitha Ravi]

 Hi Alex, 

You are most welcome, please get back to us if you need any further assistance. We will be happy to assist you. 

Regards, 

Nevitha