SpecialDates - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: add, calendar, jqxCalendar, remove, specialDates

This topic contains 4 replies, has 4 voices, and was last updated by Dimitar 8 years, 11 months ago.

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

Author

SpecialDates Posts

December 19, 2014 at 8:04 pm SpecialDates #64501

Participant

When navigating back or forward in the calendar widget, I want to clear the special dates array before populating it with new dates for the selected month. However, emptying the array causes the widget to change the view in an endless loop! The code below demostrates this.
What am I doing wrong here?

thanks

Peter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Calendar, Month Calendar, MonthCalendar, DateTimeInput, DateTimePicker, Date Picker" />
    <meta name="description" content="This demo demonstrates the jqxCalendar widget. Choose a date and navigate through the months by clicking the left or right navigation arrows.
The jqxCalendar has built-in Keyboard navigation so you can click on it and navigate by using the left, right, up or down arrow keys." />
    <title id='Description'>This demo demonstrates the jqxCalendar widget. Choose a date
        and navigate through the months by clicking the left or right navigation arrows.
        The jqxCalendar has built-in Keyboard navigation so you can click on it and navigate
        by using the left, right, up or down arrow keys. To switch to Year and Decade views, you need to click the Calendar's title. </title>
    <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="../../scripts/demos.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 () {                
                // create jqxcalendar.
              $("#jqxWidget").jqxCalendar({ width: 220, height: 220 });
              $('#jqxWidget').on('viewChange', function (event) {
                $("#jqxWidget").jqxCalendar("specialDates", []);
              });

             });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

December 22, 2014 at 8:27 am SpecialDates #64538

Nadezhda

Participant

Hello Peter Sloth,

Please, find the following examples which show how to remove special dates:

1) remove all special dates

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create calendar.
            $("#jqxWidget").jqxCalendar({ enableTooltips: true, width: 220, height: 220});

            // Create Date objects.
            var date1 = new Date();
            var date2 = new Date();
            var date3 = new Date();
            date1.setDate(5);
            date2.setDate(15);
            date3.setDate(16);
            // Add special dates by invoking the addSpecialDate method.
            $("#jqxWidget").jqxCalendar('addSpecialDate', date1, '', 'Special Date1');
            $("#jqxWidget").jqxCalendar('addSpecialDate', date2, '', 'Special Date2');
            $("#jqxWidget").jqxCalendar('addSpecialDate', date3, '', 'Special Date3');
            $("#remove").click(function () {
                $("#jqxWidget").jqxCalendar("specialDates", []);
            });
        });
    </script>

</head>
<body>
    <div id='jqxWidget'></div>
    <button id="remove">
        Remove special dates</button>
</body>
</html>

2)remove a special date

<!DOCTYPE>
<html>
<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>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create calendar.
                $("#jqxWidget").jqxCalendar({ enableTooltips: true, width: 220, height: 220 });
                // Create Date objects.
                var date1 = new Date();
                var date2 = new Date();
                var date3 = new Date();
                date1.setDate(5);
                date2.setDate(15);
                date3.setDate(16);
                // Add special dates by invoking the addSpecialDate method.
                $("#jqxWidget").jqxCalendar('addSpecialDate', date1, '', 'Special Date1');
                $("#jqxWidget").jqxCalendar('addSpecialDate', date2, '', 'Special Date2');
                $("#jqxWidget").jqxCalendar('addSpecialDate', date3, '', 'Special Date3');
                $("#remove").click(function () {
                    var sD = $("#jqxWidget").jqxCalendar('specialDates');
                    sD.splice(0, 1);
                    $("#jqxWidget").jqxCalendar({ specialDates: sD });
                });
            });
        </script>
        <div id='jqxWidget'>
        </div>
        <button id="remove">
            Remove first special date</button>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

December 22, 2014 at 8:40 am SpecialDates #64539

Nadezhda

Participant

Hello Peter Sloth,

You also can use ‘backButtonClick’ and ‘nextButtonClick’ events.

Best Regards,
Nadezhda

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

September 30, 2015 at 5:25 pm SpecialDates #76319

Jack

Participant

Hello Nadezhda,

Tried using the backButtonClick event also result in an endless loop!

$(‘#jqxCalendar’).on(‘backButtonClick’, function (event) {
$(‘#jqxCalendar’).jqxCalendar(‘specialDates’, []);
});

October 1, 2015 at 5:41 am SpecialDates #76326

Dimitar

Participant

Hello Jack,

Thank you for your feedback. We confirm this issue and have created a work item about it. As a workaround, you can try this:

$('#jqxCalendar').on('backButtonClick', function (event) {
    setTimeout(function () {
        $('#jqxCalendar').jqxCalendar('specialDates', []);
    }, 100);
});

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.