Schedule Edit Template

[Ameet]

Here is my scenario -

Meeting organizer would like to create a new meeting on the schedule. When they select the conference room to reserve, we need to display the conference room details including the room photo.

I have attached the exact screen shot that we would like to have.

The second requirement is for meeting attendees to review the meeting and accept or decline it. If it is lunch meeting a text box will be displayed to enter their lunch preference. Can we have a edit template that allows this?

Thanks,

Ameet

Attachment: syncfusionscheduletemplate_e64b3836.zip

[Ravikumar Venkatesan]

Hi Ameet, 

Greetings from Syncfusion support. 

Q: We need to display the conference room details including the room photo 

Q: If it is lunch meeting a text box will be displayed to enter their lunch preference 

 

We have validated your above requirements at our end and prepared a sample for your reference which can be viewed from the following link. In the below sample, the lunch preference field has been shown from 1 PM to 2 PM. 

 

Sample: https://stackblitz.com/edit/ej2-angular-editor-template-with-resources-customization-noxpe2?file=app.component.ts 

 

[app.component.html] 

<div class="e-custom-container"> 

  <div class="e-control-section"> 

    <ejs-schedule #scheduleObj width="880px" height="100%" [selectedDate]="selectedDate" [views]="views" [eventSettings]="eventSettings" [showQuickInfo]="showQuickInfo" [group]="group" (popupOpen)="onPopupOpen($event)"> 

      <e-views> 

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

      </e-views> 

      <e-resources> 

        <e-resource field="RoomId" title="Room" name="MeetingRoom" [dataSource]="resourceDataSource" textField="text" idField="id" colorField="color"> 

        </e-resource> 

      </e-resources> 

      <!-- Editor template --> 

      <ng-template #editorTemplate> 

        <table 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="" name="Subject" style="width: 100%"/> 

              </td> 

            </tr> 

            <tr> 

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

              <td colspan="4"> 

                <input id="StartTime" class="e-field" type="text" name="StartTime"/> 

              </td> 

            </tr> 

            <tr> 

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

              <td colspan="4"> 

                <input id="EndTime" class="e-field" type="text" name="EndTime"/> 

              </td> 

            </tr> 

            <tr> 

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

              <td colspan="4"> 

                <input type="text" id="RoomId" name="RoomId" class="e-field" style="width: 100%"/> 

              </td> 

            </tr> 

            <!-- Lunch row --> 

            <tr> 

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

              <td colspan="4"> 

                <input id="Lunch" class="e-field e-input" type="text" value="" name="Lunch" style="width: 100%"/> 

              </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" style="width: 100%; height: 60px !important; resize: vertical"></textarea> 

              </td> 

            </tr> 

          </tbody> 

        </table> 

      </ng-template> 

    </ejs-schedule> 

  </div> 

  <!-- Showing the selected room details --> 

  <div class="e-property-section"> 

    <div><h2>Room details</h2></div> 

    <div class="e-room-image"></div> 

    <div class="e-room-capacity"></div> 

  </div> 

</div> 

[app.component.ts] 

  onPopupOpen(args: PopupOpenEventArgs): void { 

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

      let processElement: HTMLInputElement = args.element.querySelector("#RoomId"); 

      if (!processElement.classList.contains("e-multiselect")) { 

        let multiSelectObject: MultiSelect = new MultiSelect({ 

          placeholder: "Choose a Room", 

          fields: { text: "text", value: "id" }, 

          dataSource: <any>this.resourceDataSource, 

          value: <string[]>((args.data.RoomId instanceof Array ? args.data.RoomId : [args.data.RoomId])), 

          change: args => { 

            if (args.value.length > 0) { 

              // Showing the resource details in the property section based on selected room 

              let roomIndex = ((args.value[0] as number) - 1).toLocaleString(); 

              let roomName = this.resourceDataSource[roomIndex].text.toLowerCase(); 

              let classList = document.querySelector(".e-room-image").classList; 

              if (classList.length > 0) { 

                for (let i = 1; i < classList.length; i++) { 

                  let currentClassList = document.querySelector(".e-room-image").classList; 

                  document.querySelector(".e-room-image").classList.remove(currentClassList[currentClassList.length - 1]); 

                } 

              } 

              document.querySelector(".e-room-image").classList.add("e-room-" + roomName); 

              document.querySelector(".e-room-capacity").innerHTML = "Capacity:" + this.resourceDataSource[roomIndex].capacity; 

            } 

          } 

        }); 

        multiSelectObject.appendTo(processElement); 

        if (multiSelectObject.value.length > 0) { 

          // Showing the resource details in the property section based on selected room 

          let roomIndex = ((multiSelectObject.value[0] as number) - 1).toLocaleString(); 

          let roomName = this.resourceDataSource[roomIndex].text.toLowerCase(); 

          document.querySelector(".e-room-image").classList.add("e-room-" + roomName); 

          document.querySelector(".e-room-capacity").innerHTML ="Capacity:" + this.resourceDataSource[roomIndex].capacity; 

        } 

      } 

 

      let lunchRow = args.element.querySelector("#Lunch").closest("tr"); 

      let start = new Date(startElement.value); 

      let end = new Date(endElement.value); 

      if (!(start.getHours() <= 13 && end.getHours() >= 13)) { 

        // Showing and hiding the lunch field based on the meeting time in the lunch hours(01:00 PM to 02:00PM) 

        lunchRow.classList.add("e-hide"); 

      } 

    } 

  } 

[app.component.css] 

.e-hide { 

  display: none; 

} 

 

.e-control-section { 

  float: left; 

} 

 

.e-custom-container { 

  display: flex; 

} 

 

.e-property-section { 

  padding-left: 12px; 

  width: 100%; 

  text-align: center; 

} 

 

.e-room-image { 

  margin-left: 45%; 

  width: 100%; 

  height: 16%; 

  background-repeat: no-repeat; 

} 

 

.e-room-jammy { 

  background-image: url("https://ej2.syncfusion.com/demos/src/schedule/images/will-smith.png"); 

} 

 

.e-room-tweety { 

  background-image: url("https://ej2.syncfusion.com/demos/src/schedule/images/alice.png"); 

} 

 

.e-room-nestle { 

  background-image: url("https://ej2.syncfusion.com/demos/src/schedule/images/robson.png"); 

} 

 

.e-room-phoenix { 

  background-image: url("https://ej2.syncfusion.com/demos/src/schedule/images/margaret.png"); 

} 

 

.e-room-mission { 

  background-image: url("https://ej2.syncfusion.com/demos/src/schedule/images/robert.png"); 

} 

 

.e-room-hangout { 

  background-image: url("https://ej2.syncfusion.com/demos/src/schedule/images/laura.png"); 

} 

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

Regards, 

Ravikumar Venkatesan 

[Ameet]

Actually we want the room image and details on the popup and not next to the schedule. Is that possible?

Also can we have separate buttons on the popup. 

For the organizer save and cancel is fine. For meeting attendee display Accept and Cancel.

Thanks,

Ameet

[Ravikumar Venkatesan]

Hi Ameet, 

  

Thanks for the update. 

  

We have validated your requirement at our end. Based on your requirement we have prepared a sample and which can be available below. 

  

Sample: https://stackblitz.com/edit/ej2-angular-editor-template-resources-with-routing-hrjvwb?file=app/schedule/schedule.component.ts 

  

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

  

Note: Use the user name as “user” in the login page to get the accept button in the editor window. 

  

Regards, 

Ravikumar Venkatesan