Change events on view change - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: calendar, change, date, day, event, jqxCalendar, month, view, year

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 9 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Change events on view change Posts
January 8, 2015 at 10:05 pm Change events on view change #65153

sirstruck
Participant

Hi, I’ve noticed if I’m using the calendar, I can switch the views (to year view or decade view) by clicking in the top middle of the calendar. If I am in decade view and click on a year, or I am in year view and click on a month, I get a change event. Is there any way to identify and ignore these change events? I want to be able to respond to a change event only when the user clicks on a day in the calendar.

Thanks,

David

January 9, 2015 at 7:45 am Change events on view change #65167
Dimitar
Participant
Hello David,

Here is our suggestion. We hope it is helpful to you:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxWidget").jqxCalendar({ width: 220, height: 220 });

                oldDate = new Date();

                $('#jqxWidget').on('change', function (event) {
                    var jsDate = event.args.date;
                    if (jsDate.getDate() !== oldDate.getDate()) {
                        alert('Change event');
                        oldDate = jsDate;
                    }
                });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
January 9, 2015 at 5:16 pm Change events on view change #65213

sirstruck
Participant

Dimitar, thanks for the suggestion! I think this works pretty well although if the user happens to click on a day that matches the old date’s day, it won’t work. For example, click on the month-year at top, select a different month, then click on the same day in that month.
http://jsfiddle.net/FrNWD/39/

In the meantime, I’ve managed a workaround with my older version of jqwidgets. (It takes advantage of the fact that there was a previously existing bug in the calendar widget where clicking on a year or month would fire two change events while clicking on a day would fire only one.)

Is it possible for a future release to provide a context object with the event so the developer can see what the user clicked on that led to the change event?

Thanks,

David

January 12, 2015 at 6:40 am Change events on view change #65233

Dimitar
Participant

Hi David,

Thank you for your suggestion. We will consider enhancing this functionality in a future release.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.