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.

Appointment Template

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 02:12 AM

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.

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.

;