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
close icon

Strange date behavior


I have a calendar setup in horizontal format and it works fine in "non-month crossover" date areas, but if I try to load a date range that crosses a month end/start it throws an error and only shows some of the days in the week. im using a custom download of the newest version of the syncfusion javascript, I can send if you need

Error it throws (sorry files are minimized so line number is not helpful)
Uncaught TypeError: Cannot set property 'innerHTML' of undefined
_renderHorizontalHeaderDays @ ej.web.all.min.js:10
_renderHeaderDays @ ej.web.all.min.js:10
_renderCommon @ ej.web.all.min.js:10
_renderCurrentView @ ej.web.all.min.js:10
_navigateClick @ ej.web.all.min.js:10
f @ allJS.min.js:6
(anonymous function) @ ej.web.all.min.js:10
dispatch @ allJS.min.js:7
r.handle @ allJS.min.js:7


Below is my schedule call (Ive tried taking things out of it and it doesn't seem to matter, if you need more things let me know)

$("#calendar-area").ejSchedule({
height: calHt, 
allowDragAndDrop: false,
showOverflowButton:false,
showCurrentTimeIndicator: false, 
        showAppointmentNavigator: false,
        enableAppointmentResize: false,
showLocationField: true,
showAllDayRow: false,
        showTimeScale: false,
        showQuickWindow: false,
        timeScale: {enable: false},
        cellHeight: "54px",
        dateFormat: "MM/dd/yyyy",
enablePersistence: true,
enableRecurrenceValidation: false,
currentDate: sysUI.currDate,
firstDayOfWeek: "Monday",
dateHeaderTemplateId: "#hdrTemplate",
orientation: "horizontal",
views: ["Day","Week","Agenda"],
        currentView: ej.Schedule.CurrentView.Week,
        tooltipSettings: {enable: false},
        resourceHeaderTemplateId: "#resTemplate",
        group:{resources: ["Owners"]},
        resources: [{
field: "ownerId",
title: "Owner",
name: "Owners", 
resourceSettings: {
text: "title", 
id: "id", 
isRep: "isRep", 
isPhotog: "isPhotog", 
isGroup: "isGroup", 
isVet: "isVet", 
sid: "sid",
color: "color",
appointmentClass: "cssClass",
dataSource: resdata
}
        }],
blockoutSettings: {
            enable: true,
            templateId: "#blocktemplate",
            dataSource: [],
            id: "ID",
            startTime: "startTime",
            endTime: "endTime",
            subject: "subject",
            isBlockAppointment: "isBlock",
            resourceId: "ownerId",
            isAllDay: "allDay"
        },
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: 'apptDel',
    appointmentClick: function(args){return false;},
    appointmentWindowOpen: function(args){return false;},
cellDoubleClick: function(args){return false;},
    cellClick: function(args){
    $('#calendar-area').toggle(); 
    $('#addevent-area').toggle().html('').load('assets/mods/evtadd.mod.php',function(data,stat,xhr){
if(stat == "error"){new PNotify({delay:5000,title:'Error',text:'Error Loading Page. Try again or contact support.',type:"error",opacity:.8});}
$('.evtadd_user').text(args.resources.title);
sysUI.event.user_id = args.resources.id;
$("#site_id").val(args.resources.sid);
var dt = funcUI.buildDate(args.startTime);
$("#event_date,#event_thrudate").ejDatePicker({value:dt});
});
    return false;
    },
appointmentHover: function(args){}
    });


5 Replies

DB David Barrett October 2, 2016 03:15 PM UTC


I found that if you change the "firstDayOfWeek" option to monday (like I did) it loses or messes up the crossover dates between months. 
But I am also getting issues with appointments that load correctly and flash on the calendar and then disappear or don't get put on calendar at all. 
Its a weird situation because sometimes once it loads and shows the appts they seem to work and load fine, and then Ill refresh and the appointments will flash on the calendar and 
then disappear, and Ill move from week to week and then all of a sudden they will start showing up and staying. No errors in google chrome browser, in firefox I am getting this error 
TypeError: i is undefined
t.widgetBase._removeProp()  ej.web.all.min.js:10
t.widgetBase.persistState()   ej.web.all.min.js:10
t.proxy/<()   ej.web.all.min.js:10
n.event.dispatch()   allJS.min.js:7
n.event.add/r.handle()

Im not sure what the issue is at this point. It seems completely odd and random



KK Karthigeyan Krishnamurthi Syncfusion Team October 3, 2016 09:11 AM UTC

Hi David  
   
Thank you for contacting Syncfusion support.   
   
We were unable to reproduce the reported issue “Days are not displaying correctly” at our end and for the same we have prepared the below sample with the provided code example.    
   
Kindly try with the above sample and if the issue still persists at your end, try to reproduce the error in a sample and revert else share image/vide demo/sample (if possible) to proceed further.   


Regards,
Karthigeyan 
  
 



DB David Barrett October 3, 2016 02:07 PM UTC



in your playground change the current date to 

currentDate: new Date(2016, 10, 6),

and you will see what I mean


DB David Barrett October 5, 2016 02:31 AM UTC

it will load the next week and then if you go back a week (using the date arrows at top) it will jump to some other date completely

thx for any help


KK Karthigeyan Krishnamurthi Syncfusion Team October 5, 2016 11:02 AM UTC

Hi David,      
  
Thanks for your update.   
  
We have created an incident for the reported issue and request you to have a follow up with the below incident link for further update on this.       
  
Regards,   
Karthigeyan   
 


Loader.
Live Chat Icon For mobile
Up arrow icon