Customizing the pop ups of the schedule (not the editor)

[Anthony Hurteau]

Hi Syncfusion team,

Let me just start by saying that your product is amazing! It is doing everything I need it to do at the moment and I am thrilled that I have chosen syncfusion. 

I have looked through the documentation and the forums to find an answer for my question, but unfortunately, I couldn't find a clear solution.

I would like to know how (if it is possible) to customize the pop ups of the scheduler : the one that allows the creation of an event and the one that displays the information of an event (see attached screenshot.). I am not talking about the editor window, that one is clearly documented and I was able to customize it successfully. 

I have found this bit of information in the schedule api documentation, but I doesn't really explain the syntax that must be used, nor what is being edited : 

https://ej2.syncfusion.com/angular/documentation/api/schedule/quickInfoTemplates/

I have also found two posts on this forum that mentioned this link : 

https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#customizing-the-quick-pop-ups

Unfortunately, this link does not load for me. Furthermore,  when I check the angular documentation under editor template, there is no "customizing the quick pop ups" section in this link :

https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/?no-cache=1

Last thing : For the event info quick pop up, I would like to keep the colored header, edit and delete buttons while editing it if that is possible. 

Thank you very much for your help!

Attachment: quick_pop_ups_a75c6f59.zip

[Karthigeyan Krishnamurthi]

Hi Anthony, 

 

Thank you for contacting Syncfusion support. 

 

We have prepared the quick popup template sample for your reference below.  

https://stackblitz.com/edit/angular-acvbuf?file=default.html 

 

 <ejs-schedule #schedule height='650px' [(selectedDate)]="selectedDate" [eventSettings]="eventSettings"> 

      <ng-template #quickInfoTemplatesHeader let-data> 

        <ng-container [ngTemplateOutlet]="data.elementType == 'cell' ? cellHeader : eventHeader" [ngTemplateOutletContext]="{data:data}"></ng-container> 

      </ng-template> 

      <!-- Content Template --> 

      <ng-template #quickInfoTemplatesContent let-data> 

        <ng-container [ngTemplateOutlet]="data.elementType == 'cell' ? cellContent : eventContent" [ngTemplateOutletContext]="{data:data}"></ng-container> 

      </ng-template> 

      <ng-template #cellContent let-data="data"> 

        <div class="e-cell-content"> 

          <form class="e-schedule-form"> 

            <div style="padding:10px"> 

              <input class="subject e-field" type="text" name="Subject" placeholder="Title" style="width:100%"> 

          </div> 

          <div style="padding:10px"> 

            <input class="location e-field" type="text" name="Location" placeholder="Location" style="width:100%"> 

          </div> 

        </form> 

      </div> 

    </ng-template> 

    <ng-template #eventContent let-data="data"> 

      <div class="e-event-content" style="padding:10px"> 

        <div class="subject" style="padding-bottom:10px">Subject: {{data.Subject}}</div> 

        <div class="start-time" style="padding-bottom:10px">Start: {{data.StartTime.toLocaleString()}}</div> 

        <div class="end-time" style="padding-bottom:10px">End: {{data.EndTime.toLocaleString()}}</div> 

        <div class="location" style="padding-bottom:10px">Location: {{data.Location}}</div> 

        <div class="description" style="padding-bottom:10px">Description: {{data.Description}}</div> 

      </div> 

    </ng-template> 

    </ejs-schedule> 

 

We will refresh the UG with the quick popup template as soon as possible. 

 

Regards, 

Karthi 

[Anthony Hurteau]

Thank you enormously Karthi!

At first glance this is the exact answer to my question. I did a quick test and the empty templates still retained the colored headers and the buttons.

I am extremely grateful for the quick response and for the syncfusion product overall! 

Have a great week end. 

[Karthigeyan Krishnamurthi]

Hi Anthony,  

 

Thanks for your update. 

 

In our previous sample, colored header and buttons are customized for quick popup as shown below. We suspect that template option is not used in your sample which could be the cause for the issue. Kindly share your code example / image to proceed further. 

 

 

 

 

Regards, 

Karthigeyan 

[Anthony Hurteau]

Hi Karthigeyan,

Sorry for the confusion, but I didn't have any further issues. I was able to achieve the result I was looking for from the initial help you gave me.

Thank you very much. 

[Karthigeyan Krishnamurthi]

Hi Anthony,  

 

Thanks for your update. 

 

Regards, 

Karthi 

[Rafal]

Hi Karthigeyan,

I customized quick pop-up and filled out title. And next I click "more details" button, the title content not coping to the editor template. 

There is a solution, how to copy title from quick pop-up(after customization) to editor template?

- the 'Tittle' is empty

Regards,

Rafal

Attachment: Screenshot_20191105_at_20.09.57_6c3e54e3.zip

[Vinitha Devi Murugan]

Hi Anthony, 

 

Thanks for your update.  

 

We have achieved your requirement by adding e-subject class in quickInfo cell template. Please find the below sample link. 

 

https://stackblitz.com/edit/angular-acvbuf-8nqelz  

 

      <ng-template #cellContent let-data="data"> 

        <div class="e-cell-content"> 

          <form class="e-schedule-form"> 

            <div style="padding:10px"> 

              <input class="e-subject e-field" type="text" name="Subject" placeholder="Title" style="width:100%"> 

          </div> 

          <div style="padding:10px"> 

            <input class="location e-field" type="text" name="Location" placeholder="Location" style="width:100%"> 

          </div> 

        </form> 

      </div> 

    </ng-template> 

 

Kindly try with the above link and let us know, if you need any further assistance on this. 

 

Regards, 

M.Vinitha devi 

 

[Rafal]

Hi Anthony, 

 

Thanks for your update.  

 

We have achieved your requirement by adding e-subject class in quickInfo cell template. Please find the below sample link. 

 

https://stackblitz.com/edit/angular-acvbuf-8nqelz  

 

      <ng-template #cellContent let-data="data"> 

        <div class="e-cell-content"> 

          <form class="e-schedule-form"> 

            <div style="padding:10px"> 

              <input class="e-subject e-field" type="text" name="Subject" placeholder="Title" style="width:100%"> 

          </div> 

          <div style="padding:10px"> 

            <input class="location e-field" type="text" name="Location" placeholder="Location" style="width:100%"> 

          </div> 

        </form> 

      </div> 

    </ng-template> 

 

Kindly try with the above link and let us know, if you need any further assistance on this. 

 

Regards, 

M.Vinitha devi 

 

Hi Karthigeyan,

Thank you for solution related with quick pop-up. Now I have another problem with adding  'fadein' animation after adding appointment (for blue div container). 

I tried add css class animation on 'completeAction' for appointment class div element (timeline - schedule component) like below:

            const id = `Appointment_${args.data.Id}`;

            const selector = `.e-content-wrap .e-event-table .e-appointment-container .e-appointment[data-id='${id}']`;

            document.querySelector(selector).classList.add('animated','fadeIn');                    

But my solution not working. Added element with .epointment class has opacity 1. For 'fadeIn' animation I need default opacity 0. I cannot override this behaviour.

I'm wondering, if 'completeAction; is good place to achieve this result?

Also I'd like to add fade animation on 'drag and drop event', if of course possible?

Regards,

Rafal

[Vinitha Devi Murugan]

Hi Anthony, 

 

Thanks for your update. 

 

We achieved your requirement by making use of actionBegin and eventRendered events of the scheduler and same can be available in below link. 

 

https://stackblitz.com/edit/angular-acvbuf-uqwpbj?file=default.component.ts 

 

  onEventRendered(args) { 

    // Here we added animation effect for current Appointment 

    if(args.data.Id === this.currentEventId){ 

      args.element.classList.add("e-animate"); 

    }else{ 

      args.element.classList.remove('e-animate'); 

    } 

  } 

  onActionBegin(args) { 

    if (args.requestType == "eventCreate") { 

      this.currentEventId = args.data[0].Id; 

    } 

    if (args.requestType == "eventChange") { 

      this.currentEventId = args.data.Id; 

    } 

  } 

 

Regards, 

M.Vinitha devi