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. (Last updated on: November 16, 2018).
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 Mar 12,2019 03:42 AM UTC Angular - EJ 2 5
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 


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

;