Editor Window Customization

[Umair Ahmed]

Hello,

Tried the steps showed in this video link but looks like its not working, the sample code provided with this video on the documentation site is different, can you please provide the sample used in this video via stackblitz.com/

https://youtu.be/-KJg2d6mdmQ

Basically trying to add a dropdown to the edit window and need to populate another dropdown onchange event.

Thanks

[Ravikumar Venkatesan]

Hi Umair, 

Greetings from Syncfusion support. 

We have created a sample based on your requirement by using the editorTemplate of Scheduler. You can add EJ2-DropDownList to editorTemplate and bind change event to it like the below code and the same made in the below sample. 

[app.component.html] 

  <ejs-schedule #scheduleObj width='100%' height='550px' [selectedDate]="selectedDate" [eventSettings]="eventSettings" 

    (actionBegin)="onActionBegin($event)" (eventRendered)="onEventRendered($event)" [showQuickInfo]="showQuickInfo"> 

    <e-views> 

      <e-view option="Day"></e-view> 

      <e-view option="Week"></e-view> 

      <e-view option="WorkWeek"></e-view> 

      <e-view option="Month"></e-view> 

    </e-views> 

    <!-- Editor template start --> 

    <ng-template #editorTemplate let-data> 

      <table *ngIf="data != undefined" class="custom-event-editor" width="100%" cellpadding="5"> 

        <tbody> 

          <tr> 

            <td class="e-textlabel">Summary</td> 

            <td colspan="4"> 

              <input id="Subject" class="e-field e-input" type="text" value="{{data.Subject}}" name="Subject" style="width: 100%" /> </td> 

          </tr> 

          <tr> 

            <td class="e-textlabel">Status</td> 

            <td colspan="4"> 

              <ejs-dropdownlist id='Status' class="e-field" data-name="Status" placeholder='Choose Status' 

                [dataSource]='StatusData' [fields]='statusFields' value='{{data.Status}}'> 

              </ejs-dropdownlist> 

            </td> 

          </tr> 

          <tr> 

            <td class="e-textlabel">Event Type</td> 

            <td colspan="4"> 

              <ejs-dropdownlist #eventType id='EventType' class="e-field" data-name="EventType" placeholder='Choose Event Type' 

                [dataSource]='EventTypeData' [fields]='eventTypeFields' (change)="onChange($event)" value='{{data.EventType}}'> 

              </ejs-dropdownlist> 

            </td> 

          </tr> 

          <tr> 

            <td class="e-textlabel">From</td> 

            <td colspan="4"> 

              <ejs-datetimepicker id="StartTime" class="e-field" data-name="StartTime" 

                format="M/dd/yy h:mm a" [value]="dateParser(data.startTime || data.StartTime)"> 

              </ejs-datetimepicker> 

            </td> 

          </tr> 

          <tr> 

            <td class="e-textlabel">To</td> 

            <td colspan="4"> 

              <ejs-datetimepicker id="EndTime" class="e-field" data-name="EndTime" format="M/dd/yy h:mm a" 

                [value]='dateParser(data.endTime || data.EndTime)'></ejs-datetimepicker> 

            </td> 

          </tr> 

          <tr> 

            <td class="e-textlabel">Reason</td> 

            <td colspan="4"> 

              <textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" value="{{data.Description}}" style="width: 100%; height: 60px !important; resize: vertical"></textarea> 

            </td> 

          </tr> 

        </tbody> 

      </table> 

    </ng-template> 

    <!-- End of Editor template --> 

  </ejs-schedule> 

[app.component.ts] 

  // Setting up fields to custom dropdown 

  public eventTypeFields: Object = { text: 'EventTypeText', value: 'EventTypeValue' }; 

  // Datasource definition for custom dropdown 

  public EventTypeData: Object[] = [ 

    { EventTypeText: 'Check up', EventTypeValue: 'check-up' }, 

    { EventTypeText: 'Consulting', EventTypeValue: 'consulting' }, 

    { EventTypeText: 'Operation', EventTypeValue: 'operation' } 

  ]; 

  // Change event definition for custom dropdown 

  public onChange(args: ChangeEventArgs) { 

    if (!isNullOrUndefined(args.value)) 

      alert("Event type: " + args.value); 

  } 

Sample: https://stackblitz.com/edit/angular-scheduler-editor-window-template-1gpiqh?file=app.component.ts 

Kindly try the above sample and get in touch with us If you would require any further assistance. 

Demo link(editorTemplate): https://ej2.syncfusion.com/angular/demos/#/material/schedule/editor-template 

UG link(editorTemplate): https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#customizing-event-editor-using-template 

API link(change Event): https://ej2.syncfusion.com/angular/documentation/api/drop-down-list/#change 

Regards, 

Ravikumar Venkatesan 

[Umair Ahmed]

Thanks, this looks good, in the "EventType" dropdownlist can we make certain items disabled, so they are greyed out and not selectable ?

[Ravikumar Venkatesan]

Hi Umair, 

Thanks for the update. 

Based on your requirement, we have disabled the certain item of the EJ2 Dropdown list with the help of open event of EJ2 Dropdown list. You can disable the item of EJ2 Dropdown list item like the below. 

Step 1: Binding open event to the Drop down list. 

[app.component.html] 

 <ejs-dropdownlist #eventType id='EventType' class="e-field" data-name="EventType" placeholder='Choose Event Type' 

 [dataSource]='EventTypeData' [fields]='eventTypeFields' (open)="onOpen($event)" (change)="onChange($event)" value='{{data.EventType}}'> </ejs-dropdownlist> 

Step 2: Creating a class called “e-disable” for disable the item of the Drop down list. 

[app.component.css] 

.e-disable { 

  opacity: 0.6;  

  pointer-events: none; 

} 

Step 3: Adding “e-disable” class to the specified item of the drop down in open event. 

[app.component.ts] 

public onOpen(args: PopupEventArgs) { 

  if(args.popup.element) { 

    // Fetching all items of the Dropdown list 

    let items = args.popup.element.querySelectorAll('.e-list-item'); 

    if(items.length > 0) { 

      // Disable the item by adding the e-disable class to the item 

      items[0].classList.add('e-disable'); 

    } 

  } 

} 

Sample: https://stackblitz.com/edit/angular-scheduler-152171-editortemplate-with-disable-ddl-mevdcy?file=app.component.ts 

Kindly try the above sample and get in touch with us If you would need any further assistance. 

API link(open Event): https://ej2.syncfusion.com/angular/documentation/api/drop-down-list/#open 

Regards, 

Ravikumar Venkatesan

[Umair Ahmed]

Thanks, that worked.

Also on the custom editor screen, is there way to show "IsSlotAvailable" related validation while users selects time interval and/or resource instead of displaying them on form submit (save button).

[Ravikumar Venkatesan]

Hi Umair, 

Thanks for the update. 

Based on your requirement we have prepared the below sample with the help of the popupClose event with the following code. 

  public onPopupClose(args) { 

    this.startDate = null; 

    this.endDate = null; 

    if (args.type === "Editor" && (this.scheduleObj.eventWindow as any).isCrudAction) { 

      let startTime = args.data["StartTime"]; 

      let endTime = args.data["EndTime"]; 

      let isAvail = this.scheduleObj.isSlotAvailable(startTime, endTime); 

      if (!isAvail) { 

        args.cancel = true; 

        alert('Already booked') 

      } 

    } 

  } 

Sample: https://stackblitz.com/edit/editor-template-sample-fbxng2?file=app.component.ts 

Regards, 

Ravikumar Venkatesan