We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

143149 Mar 6,2019 01:00 PM UTC Nov 13,2019 09:23 AM UTC Angular - EJ 2 9
loading
Tags: Schedule
Anthony Hurteau
Asked On March 6, 2019 01:00 PM UTC

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 [Syncfusion]
Replied On March 8, 2019 06:32 AM UTC

Hi Anthony, 
 
Thank you for contacting Syncfusion support. 
 
We have prepared the quick popup template sample for your reference below.  
 
 <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
Replied On March 8, 2019 12:54 PM UTC

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 [Syncfusion]
Replied On March 11, 2019 04:52 AM UTC

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
Replied On March 11, 2019 11:53 AM UTC

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 [Syncfusion]
Replied On March 12, 2019 03:42 AM UTC

Hi Anthony,  
 
Thanks for your update. 
 
Regards, 
Karthi 


Rafal
Replied On November 5, 2019 07:33 PM UTC

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 [Syncfusion]
Replied On November 6, 2019 12:16 PM UTC

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. 
 
 
      <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
Replied On November 12, 2019 04:41 PM UTC

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. 
 
 
      <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 [Syncfusion]
Replied On November 13, 2019 09:23 AM UTC

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. 
 
 
  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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon