jQuery UI Widgets Forums Editors Calendar SpecialDates

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    SpecialDates Posts
  • SpecialDates #64501

    Peter Sloth
    Participant

    Hi

    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>
    
    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/

    SpecialDates #64539

    Nadezhda
    Participant

    Hello Peter Sloth,

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

    Best Regards,
    Nadezhda

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

    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’, []);
    });

    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/

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

You must be logged in to reply to this topic.