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

Appointment Template

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.

1 Reply

KK Karthigeyan Krishnamurthi Syncfusion Team 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 



Loader.
Up arrow icon