Sample clinic GitHub repository

[Vicente José]

Hello :

I was looking at angular schedule showcase example clinic https://ej2.syncfusion.com/showcase/angular/appointmentplanner/#/calendar

I'm interested in the header customization I can see in this sample (see attached screen capture), but when I open the github repository https://github.com/syncfusion/ej2-showcase-angular-appointment-planner this functionality is missing.

Thanks.

Attachment: Appointment_Scheduler_20200928_191939.png_f67a88a0.zip

[Balasubramanian Sattanathan]

Hi Vicente 

Greetings from Syncfusion Support. 

We have validated your requirement “https://github.com/syncfusion/ej2-showcase-angular-appointment-planner this functionality is missing” at our side and prepared the angular project by preparing the following link. The Scheduler header has customized in the mentioned screenshot. And also it is working properly without any error. 

Here is a video of the sample that works as expected. 

https://www.syncfusion.com/downloads/support/forum/158217/ze/video_demo1044009976.zip 

Sample: https://www.syncfusion.com/downloads/support/forum/158217/ze/ej2-showcase-angular-appointment-planner1960245697.zip 

Kindly try the above sample and let us know if you need further assistance. 

Regards, 

Balasubramanian S 

[Vicente José]

Hi Balasubramanian,

Thanks for your reply, but I unzipped and compiled the attached sample, and as you can see, there is no dropdown in the scheduler header nor add appointment button on the right, however in the video they are present.

Regards,

Vicente

Attachment: syncfusion2.png_d2418019.zip

[Balasubramanian Sattanathan]

Hi Vicente José, 

Thanks for your reply. 

We have analyzed your reported scenario at our side and let you know that we have improved the functionality in the appointment planner sample in GitHub. So if you check out and compile the updated project, the timeline views have been added instead of the header customization. So we would suggest you to use the below code snippet in the actionComplete event for the header customization. For your reference, we have prepared a sample that can be downloaded from the below link. 

Code snippets: 

onActionComplete(args: ActionEventArgs): void { 

  if (args.requestType === 'toolBarItemRendered') { 

    if (Browser.isDevice) { 

      const doctorIconContainer: HTMLElement = <HTMLElement>(this.scheduleObj.element.querySelector('.app-doctor-icon')); 

      const doctorIcon: HTMLElement = doctorIconContainer.querySelector('.doctor-icon'); 

      const doctorImage: HTMLElement = createElement('img', { className: 'active-doctor', attrs: { src: './assets/Icons/Doctors.svg' } }); 

      doctorIcon.appendChild(doctorImage); 

      doctorIconContainer.style.display = 'block'; 

      doctorIconContainer.onclick = () => this.specialistObj.show(); 

    } else { 

      const doctorsElement: HTMLElement = this.scheduleObj.element.querySelector('.app-doctors') as HTMLElement; 

      const listObj: DropDownList = new DropDownList({ 

        cssClass: 'planner-dropdown', 

        placeholder: 'Choose Specialist', 

        dataSource: this.doctorsData, 

        fields: { text: 'Name', value: 'Id' }, 

        popupHeight: 'auto', 

        popupWidth: '195px', 

        showClearButton: true, 

        change: this.onDoctorSelect.bind(this), 

        itemTemplate: '<div class="specialist-item"><img class="value" src="./assets/images/${Text}.png" alt="doctor"/>' + 

          '<div class="doctor-details"><div class="name">Dr.${Name}</div><div class="designation">${Designation}</div></div></div>', 

        footerTemplate: `<div class="add-doctor"><div class="e-icon-add e-icons"></div><div class="add-doctor-text">Add New Doctor</div> 

          </div>`, 

        width: '195px', 

        open: this.onMultiSelectOpen.bind(this) 

      }); 

      listObj.appendTo(doctorsElement); 

    } 

  } 

  if (args.requestType === 'eventCreated' || args.requestType === 'eventChanged' || args.requestType === 'eventRemoved') { 

    this.dataService.addHospitalData(this.hospitalData); 

  } 

} 

 

Screenshot: 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/158217/ze/Appointment_planner_with_header_customization2145977399.zip 

Kindly try the above sample and let us know if you need further assistance. 

Regards, 

Balasubramanian S 

[Vicente José]

Hi Balasubramanian,

It's working now. Thank you!

Regards,

Vicente

[Vinitha Devi Murugan]

Hi Vicente, 

 

Thanks for your update. 

 

We are happy to hear that our solution fulfilled your requirement.  

  

Regards, 

Vinitha