Calendar Previous and Next buttons "change month" offsets one month!

[Aciid]

While working with implementing CalenStyle, great project btw. We came across this bug, that is not apparent with the demodata set since it's iterated for the "view".

But with our own backend found that the previous and next buttons, offset the month in question one earlier and one further than the desired one.

Here is how to replicate.

Open CalenStyle index.html , go to web demos. Choose any demo. eg. 1 Default View.

Open your browser Debugger, eg. Safari / Chrome Debugger. Search for file "CalJsonGenerator.js" Insert breakpoint to Line 1058: function generateJsonEvents(dFromDate, dToDate)

Refresh the page. Continue execution on first initial load. Press next or previous month arrow. Observe now on your variable scope / scope chain that dFromDate and dToDate are offseting 1 month earlier or further than your view.

Description

This may seem "working as intended" as the the demo-data is just some data, but if you look from your dataset JSON file and compare the calendar you can see that they are completely wrong.

How we came across this

We implemented this to our own ERP-project and the returned events via queries from database that use variables provided via initialisation of calDataSource ( we use these to parametrize our range queries on postgresql) are completely wrong. they offset one month earlier when using "< prev month" and one month preeceeding when using "next month >".

Screenshots

Here are screenshots of debugging session both with CalenStyle demo app from source. And our own ERP -project implementation that uses our own postgres database via an backend API and use only the CalenStyle library.

ERP-project postgresSQL database loading events via backend.

Representation of changing from December to January, breakpoint on loadUserEvents which is using parameters from the intialized constructor of CalenStyle Source.

CalenStyle JSON dataset demos. Default screen on load "December", first press "< prev month" , loads Novemenber on screen, but queries are for October.

Default screen on load "December", pressed " next month >" , loads January on screen, but queries are for February.

Hopefully these extended issue descriptions motivate you further into fixing your dateobjects and on how to work with date and time objects in general.

I have not stepped throught the code to find exactly where this issue rises from, but we are working ont to fix this since we are using this in production ERP-product

[rajeshgajraj]

Fix works for me is as follow:

Below changes are for calenstyle.js.

//Comment the below code of section... around line no. 4444
/*if($.cf.compareStrings(to.tv.sLoadType, "Load") || $.cf.compareStrings(to.setting.datasetModificationRule, "ReplaceAll"))
{
    dLoadStartDate = to.setDateInFormat({"iDate": {d: 1, M: iLoadPrevMonth, y: iLoadPrevYear}}, "START");
    dLoadEndDate = to.setDateInFormat({"iDate": {d: iLoadNextMonthDays, M: iLoadNextMonth, y: iLoadNextYear}}, "END");
    dDurationStartDate = dLoadStartDate;
    dDurationEndDate = dLoadEndDate;
}
else if($.cf.compareStrings(to.tv.sLoadType, "Prev"))
{
    dLoadStartDate = to.setDateInFormat({"iDate": {d: 1, M: iLoadPrevMonth, y: iLoadPrevYear}}, "START");
    dLoadEndDate = to.setDateInFormat({"iDate": {d: iLoadPrevMonthDays, M: iLoadPrevMonth, y: iLoadPrevYear}}, "END");
    dDurationStartDate = new Date(dLoadStartDate);
    dDurationEndDate = to.setDateInFormat({"iDate": {d: iLoadNextMonthDays, M: iLoadNextMonth, y: iLoadNextYear}}, "END");
}
else if($.cf.compareStrings(to.tv.sLoadType, "Next"))
{
    dLoadStartDate = to.setDateInFormat({"iDate": {d: 1, M: iLoadNextMonth, y: iLoadNextYear}}, "START");
    dLoadEndDate = to.setDateInFormat({"iDate": {d: iLoadNextMonthDays, M: iLoadNextMonth, y: iLoadNextYear}}, "END");
    dDurationStartDate = to.setDateInFormat({"iDate": {d: 1, M: iLoadPrevMonth, y: iLoadPrevYear}}, "START");
    dDurationEndDate = new Date(dLoadEndDate);
}*/

//Add additional code just below the commented code above
var iLoadMonthDays = to.__getNumberOfDaysOfMonth(iMonth, iYear);
dLoadStartDate = to.setDateInFormat({"iDate": {d: 1, M: iMonth, y: iYear}}, "START");
dLoadEndDate = to.setDateInFormat({"iDate": {d: iLoadMonthDays, M: iMonth, y: iYear}}, "END");
dDurationStartDate = dLoadStartDate;
dDurationEndDate = dLoadEndDate;