jQuery UI Widgets › Forums › Editors › Calendar › Calendar viewChange Event Issue
Tagged: calendar, event, jqxCalendar, viewChange
This topic contains 12 replies, has 5 voices, and was last updated by Martin 4 years, 11 months ago.
-
Author
-
I just discovered that the viewChange event fires before the calendar widget is updated/redrawn. If I render the calendar in the viewChange event function, the viewChange event fires again and again. I am assuming the render and refresh method fires the viewChange event itself. How may I disable viewChange event for the render, and re-enable the event after my code in the event is finished?
Thank you for your time!
OK, I have more info to share.
When I click on a date that is in the previous or next month, the grid changes as expected to show that month and the viewChange event fires. I do a refresh in the viewChange event but the viewChange event doesn’t fire repeatedly. That only happens when I click the forward or back arrows.Another thing I noticed. When I click on the title and the month grid/selector appears, I pick any month and then it shows, but the viewChange event does NOT fire. Maybe this will be fixed in future versions? Would be nice to have an event for the title being clicked as well. Also, events for completion of render and refresh.
Hello Hop,
You can unsubscribe from viewChange (using the .off() method) before you call render and then subscribe to it again (using .on()).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you Dimitar for the information and I’m excited that there is an easy fix for my repeat issue. Could you show that in an example? The code below is what I am currently using.
$("#paygrid").on('viewChange', function (event) { var mydate= $("#paygrid").jqxCalendar('getDate'); $("#paygrid").jqxCalendar('refresh'); var view = event.args.view; var viewFrom = view.from; var viewTo = view.to; fillCalendar(); //alert((viewFrom.getMonth()+1)+"."+viewFrom.getDate()+"-"+(viewTo.getMonth()+1)+"."+viewTo.getDate()); });
Hi Hop,
My comment about that topic can be found below:
1. I do not suggest you to “render” the calendar in ‘viewChange” event or any other event raised by the widget. I also do not think that calling “refresh” is necessary at all.
2. “viewChange” is raised only when the user navigates to next/previous view or navigates to a date through API. The navigation would be repeated, if the mouse button is down over a navigation arrow which means that the “viewChange” would be raised repeatedly in that case, which is normal.Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Hop,
In my opinion, there is no need to call refresh on viewChange, because the calendar has just refreshed before firing the viewChange event.
Here is what I suggested earlier. Please try it out and share your feedback.
var viewChangeBind = function () { $("#paygrid").on('viewChange', function (event) { viewChangeCallback(event); }); }; var viewChangeCallback = function (event) { var mydate = $("#paygrid").jqxCalendar('getDate'); $("#paygrid").off('viewChange'); $("#paygrid").jqxCalendar('refresh'); viewChangeBind(); var view = event.args.view; var viewFrom = view.from; var viewTo = view.to; fillCalendar(); //alert((viewFrom.getMonth()+1)+"."+viewFrom.getDate()+"-"+(viewTo.getMonth()+1)+"."+viewTo.getDate()); }; viewChangeBind();
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Peter,
It wasn’t my mouse continuously pressed down over the arrow that was causing the repeat. lol. I’m smarter than that sir. The reason I am using refresh is because I am using an alert in a function I call from the viewChange event, and the alert fires while the calendar is still in the state it was before I ‘single left-clicked and moved the mouse cursor away’ on the back arrow. After I click OK on the alert, the calendar updates to the month I expected. So I put the refresh in thinking it would update the calendar BEFORE my function was called, and it does as expected, and that is when the repeat anomaly occurred.With refresh in there, I click the arrow, the calendar now changes BEFORE the alert, then the alert fires, I would click ok on the alert and the calendar would change again and another alert fires, and so on, and so on, and so on.
The reason I want to have the calendar updated before my function is called is because (I’m sure you have guessed by now) I want to address the cells via the DOM and javascript and add content supported by my database.
Thank you for your time sir. My comment at the top was poking fun by the way. I mean no disrespect at all. I have a ton of respect for you and Dimitar, and the software you created so rich in features. Thank you!!! =)
Hi Dimitar,
I completely replaced my viewChange event code with what you posted and it still repeats. I wonder sir if it is because I am using alert? There are other ways I can see output from my code, and I will explore that and see if that causes the problem.
UPDATE: It wasn’t the alert. I took it out of my code and now when I click on the arrow (moving the mouse away just in case) and the calendar just iterates through the months and years, counting down of course. About one update per second. I have to CONTROL+F5 to refresh the page to stop it. The same thing happens on the forward arrow. =(
UPDATE(2): I commented out my call to my function fillCalendar() and the repeating still occurs.
One funny thing I noticed. When it is repeating, counting down month by month, if I click the forward arrow, the calendar bounces back and forth between two adjacent months, and faster. Like 2 updates per second. Hope that helps.
Thank you so much for the effort writing the code to help me. I really appreciate it! Remember, it is important for me to understand what is happening too, so I can use that in other instances like this one and not have to bug you guys.
Hi Hop,
Unfortunately, jqxCalendar does not support such customizations, so it is possible that what you require cannot be achieved. However, you may post a complete example, which demonstrates the issue and which we may test locally for further investigation on the matter.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Sounds good Dimitar. I appreciate the offer. Thank you! I don’t know if that will work, because I support the code with a database, that adds widgets to the DOM based on an ajax query for that page. I have a few ideas I want to try today. If I fail, I’ll strip it down, verify the anomaly still occurs, and post the code here.
Dimitar, Peter,
I figured out how to do what I was attempting. I used setInterval to run a function periodically, and inside the function I used a global variable to snapshot the innerHTML of id calendarTitleHeaderView. If the value is different, I continue with the function that snapshots the first and last cell’s innerHTML. Doing some math on the current views month and year, I turned the values from the first and last cell into actual dates. Now that I have a range, I can iterate through the cells using an offset for the date, jquery my database, then appendchild a div with the information. It works beautifully and although I have the interval set at 100ms, there is no noticeable hit on my linux server at all.It is not how I wanted to do it, since I wanted to use a single event to trigger this function, it works and now I can move on.
I wanted to post this so anyone else attempting would know that it is possible.
Gary
hello
I’m using viewChange() event and i’m using its properties “date, from and to”.
but the issue is whenever i change my view it display the range of date
which is not coordinating with the values given by the properties(date, from and to).here is my sample code https://stackblitz.com/edit/teamappointment-lmunfz
its used in a India Standard Time
please look into the screen shot https://postimg.cc/tYX9JFh1can anyone one tell why it is showing like?
i want to have the same range of value for from and to which is displayed on the view.
Thanks and Regards,
ShiviHello Shivi,
I have reviewed your stackblitz example and the screenshot and I see that it is working as expected.
Thefrom
andto
arguments are returning one day before and one day after the displayed dates. These are the two ends of the range.Best Regards,
MartinjQWidgets Team
https://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.