issues with header template

[David Barrett]

Since version 14.4.0.20 there has been an issue I am having with the header template in the Scheduler.

With scrolling set for the calendar and a header template, when the calendar ends up in a scrolling window the header loses all connection to the calendar and becomes small (see included image)

It doesn't do this in version 14.4.0.20 but it does happen in 15.1.0.37 thru 15.2.0.46

Below is my call to the calendar and the header template code

Header code 

<script id="hdrTemplate" type="text/x-jsrender">
   <div class="hdrR hdrBox" data-day="{{>~formatDay(date)}}" data-date="{{>~formatD(date)}}">{{>~formatDay(date)}}</div>
</script>

Calendar

$("#calendar-area").ejSchedule({
   height: calHt,
   allowDragAndDrop: false,
   showOverflowButton:false,
   showCurrentTimeIndicator: false,
   showAppointmentNavigator: false,
   enableAppointmentResize: false,
   isDST: true,
   showLocationField: false,
   showAllDayRow: false,
   showTimeScale: false,
   showQuickWindow: false,
   timeScale: {enable: false},
   cellHeight: "21px",
   cellWidth: cellWd,
   dateFormat: "MM/dd/yyyy",
   currentDate: sysUI.currDate,
   enablePersistence: false,
   enableRecurrenceValidation: false,
   firstDayOfWeek: "Monday",
   orientation: "horizontal",
   views: ["Day","Week"],
   currentView: ej.Schedule.CurrentView.Week,
   tooltipSettings: {enable: false},
   dateHeaderTemplateId: "#hdrTemplate",
   appointmentTemplateId: "#apptTemplate",
   appointmentSettings: {
      dataSource: [],
      id: "ID",
      title: "title",
      subject: "subject",
      startTime:  "startTime",
      endTime: "endTime",
      description: "desc",
      allDay: "allDay",
      location: "location",
      resourceFields: "ownerId"
   },
   create: 'calLoad',
   actionComplete: 'calLoad',
   beforeAppointmentRemove: function(args){return false;},
   appointmentClick: function(args){return false;},
   appointmentWindowOpen: function(args){return false;},
   appointmentHover: function(args){return false;},
   cellDoubleClick: function(args){return false;},
   cellClick: function(args){return false;}
});

Any help with this would be appreciated. If you need other information please let me know

Attachment: calendar_384a384e.zip

[David Barrett]

I've also noticed that if I don't use my own header, or don't specify a cell width then it seems to work ok. Only when I set the cellWidth variable does it seem to trigger this issue

[Karthigeyan Krishnamurthi]

Hi David,   

   

Thank you for contacting Syncfusion Support.   

   

The known issue “Misalignment occurs while using header bar template and cell width option together” is internally logged already at our end and the fix will be included in our upcoming Volume 3, 2017 main release which is expected to be rolled out by the end of this month.    

   

Regards,   

Karthigeyan  

 

[David Barrett]

I downloaded the new Volume 3 version that just came out and this problem still seems to be happening. 

Do you know if there is another fix for it that might work?

Thanks

[Karthigeyan Krishnamurthi]

Hi David, 

 

Thanks for your update. 

 

We have checked the issue “Misalignment occurs while using header bar template and cell width option together” in latest version 15.3.0.26 and the issue is fixed. We have prepared the sample for the same for your reference which can be viewed from the below link. 

http://jsplayground.syncfusion.com/obtaryny 

 

Note: In the above sample, if the source file version is changed to its previous version 15.2.0.46, issue will occur. 

 

Regards, 

Karthigeyan 

[David Barrett]

My apologies, I found the issue, I had changed it in one place but not another so it was still using the older version. You are correct it has been fixed.

Thanks

[Karthigeyan Krishnamurthi]

Hi David,   

   

We are happy to hear that your issue has been fixed. 

Regards, 

Karthigeyan