SCHEDULE SETTING

Question

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 PMShift 2 => 2 PM to 12 PMShift 3 => 12 PM to 6 AMWhen user click on the schedule for example at 10 AM 1) Popup will open2) 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 ? ThanksAlex

Satheesh Kumar Balasubramanian · Accepted Answer

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 · Answer

Hi Satheesh Kumar B,Yes it's working.I appreciate your help Thanks

Nevitha Ravi · Answer

Hi Alex, 

You are most welcome.  Please get back to us if you need any further assistance. 

Regards, 
Nevitha

Alex · Answer

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 AlexAttachment: Modal_f8f40eb1.7z

Satheesh Kumar Balasubramanian · Answer

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 · Answer

Hi Satheesh Kumar B,I understand your example. You use css to hide my elements.Thanks for your help and have a nice dayAlex

Nevitha Ravi · Answer

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