Appointment Template issues

[Michael Salzlechner]

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>

    </script>

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>';

$("#Schedule1").ejSchedule({

        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]

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. 

http://jsplayground.syncfusion.com/gajmsm5a 

<Code> 

$("#Schedule1").ejSchedule({ 

                width: "100%", 

                height: "525px", 

                appointmentTemplateId: "#apptemplate", 

                orientation:"horizontal", 

                cellHeight: "50px", 

                showOverflowButton:false, 

                currentDate: new Date(2017, 5, 5), 

}); 

</Code> 

Regards, 

Nevitha. 

[Michael Salzlechner]

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

Attachment: ScheduleJSDefaultFunctionalities_(1)_2aece10f.zip

[Nevitha Ravi]

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. 

http://jsplayground.syncfusion.com/kvpjnq0i 

<Code> 

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>'; 

</Code> 

Regards, 

Nevitha.