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 issues

Scheduler with Resources and custom appointment template. 

ShowOverflowButton set to false

when i use the following template

<script id="testtemplate" type="text/x-jsrender">
<div style="width:100%;height:100%;"><div style="display: inline-block;white-space: nowrap;">{{:Subject}}</div><div id="apptime">{{:~apptime(StartTime, EndTime)}}</div>{{:TestField}}</br>HELLO</div>

it shows the full height of the appointment if i dont have too many resources for the size of the scheduler. if i have more resources the appointments get smaller and smaller in height. I would expect the height of the appointment to stay the same no matter how mane resources i add to the calendar

now if i set the same template but as a string

var templatetext = '<div style="width: 100%; height: 100%;"><div style="display: inline-block;white-space: nowrap;">{{:Subject}}</div><div id="apptime">{{:~apptime(StartTime, EndTime)}}</div>{{:TestField}}</br></div>';
        width: "100%",
height: "400px",
        currentDate: new Date(2015, 04, 05),
                orientation: "horizontal",

                group: {
                    resources: ["Workers","Clients"]
appointmentTemplateId: templatetext,

the height of the appointments is always just one line and i cant get them to be any taller

3 Replies

NR Nevitha Ravi Syncfusion Team October 5, 2017 11:02 AM UTC

Hi Michael, 

Thank you for contacting Syncfusion Support. 

Cell height will be reduced when we have more resources in the Scheduler. Cell height will be considered for appointment height, therefore only appointment height is reduced with more resources. We recommend you to use cellHeight and showOverflowButton properties to get the appointment height as expected and for the same we have prepared the sample which can be viewed from the below location. 

                width: "100%", 
                height: "525px", 
                appointmentTemplateId: "#apptemplate", 
                cellHeight: "50px", 
                currentDate: new Date(2017, 5, 5), 


MS Michael Salzlechner October 5, 2017 01:12 PM UTC

thanks but cellheight is not working with the template as a string as in the attached sample

Attachment: ScheduleJSDefaultFunctionalities_(1)_2aece10f.zip

NR Nevitha Ravi Syncfusion Team October 6, 2017 12:15 PM UTC

Hi Michael, 

Thanks for your update. 

Internally appointment template will accept only its child element for the process. When we use element as template the below highlighted will be the parent and its child element height (100%) is applied to an appointment. 


We have checked the shared sample where the height in given to its parent element itself which is the cause for the issue “cellHeight not working with template as string”. We have modified the sample which can be viewed from the below location and kindly use the below code example to overcome the issue. 

var templateasstring = '<div><div style="height:100%"><div style="float:left; width:50px;">hello</div><div><div>{{:Subject}}</div><div id="apptime">{{:StartTime}}</div></div></div></div>'; 


Live Chat Icon For mobile
Up arrow icon