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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Appointment Template

Thread ID:

Created:

Updated:

Platform:

Replies:

132414 Aug 31,2017 10:11 AM UTC Sep 1,2017 06:12 AM UTC JavaScript 1
loading
Tags: ejSchedule
Anton de Gruchy
Asked On August 31, 2017 10:11 AM UTC

I am working in Angular2 and have the appointmentTemplate working. I do this by injecting the x-jsrender template into the DOM. This works for all the views except month. How can I get it to work for the month view.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On September 1, 2017 06:12 AM UTC

Hi Anton, 
 
Thank you for contacting Syncfusion support. 
 
We suspect that template option may not be used correctly which could be the cause for the issue. We have prepared the Angular2 template sample (woks in all view) which can be download from the below location. 
 
<Code> 
Index.html 
<script id="MyTemplate" type="text/x-jsrender">  
 {{if View !== "agenda"}} 
    <div class="custom" style="height: 100%;background-color: {{:~format(Color,"appColor")}}">  
        {{:Subject}}<br />  
       <div class="time"> {{:~format(StartTime,"Time")}} - {{:~format(EndTime,"Time")}} </div> 
    </div>  
        {{else}} 
          <div>{{:Subject}}</div> 
    {{/if}} 
</script>  
<script>  
    function _appCustom(field, type) {  
        if (type == "appColor") {  
            switch (field) {  
                case "Pink":  
                    return "pink";  
                case "Red":  
                    return "red";  
                default:  
                    return null;  
            }  
        }  
        else  
            return ej.globalize.format(new Date(field), "hh:mm tt");  
    }  
    $.views.helpers({ format: _appCustom });  
</script> 
 
Schedule.component.html 
<ej-schedule id="Schedule1" width="100%" height="525px" currentDate="5/2/2017"  appointmentTemplateId="#MyTemplate" 
             (drag)="onDrag($event)" 
             [appointmentSettings.dataSource]=dataSource 
             [appointmentSettings.applyTimeOffset]="false" 
             appointmentSettings.id="Id" 
             appointmentSettings.subject="Subject" 
             appointmentSettings.startTime="StartTime" 
             appointmentSettings.endTime="EndTime" 
             appointmentSettings.allDay="AllDay" 
             appointmentSettings.recurrence="Recurrence" 
             appointmentSettings.recurrenceRule="RecurrenceRule"> 
</ej-schedule> 
</Code> 
 
Regards, 
Karthigeyan 



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.

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

;