Appointment Template

[Anton de Gruchy]

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]

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. 

http://www.syncfusion.com/downloads/support/forum/132414/ze/Sample-1377605471 

 

<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