Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Aciid opened this issue Dec 28, 2017 · 1 comment
Open

Comments

@Aciid
Copy link

Aciid commented Dec 28, 2017

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.
screen shot 2017-12-28 at 3 19 58

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

screen shot 2017-12-28 at 3 18 49
Default screen on load "December", pressed " next month >" , loads January on screen, but queries are for February.
screen shot 2017-12-28 at 3 19 12

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

androidi added a commit to androidi/CalenStyle that referenced this issue Dec 28, 2017
@rajeshgajraj
Copy link

rajeshgajraj commented Mar 22, 2021

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants