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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Appointment Template issues

Thread ID:





133024 Oct 4,2017 03:17 PM UTC Oct 6,2017 12:15 PM UTC JavaScript 3
Tags: ejSchedule
Michael Salzlechner
Asked On October 4, 2017 03:17 PM UTC

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

Nevitha Ravi [Syncfusion]
Replied On 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), 


Michael Salzlechner
Replied On 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

Nevitha Ravi [Syncfusion]
Replied On 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>'; 



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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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