jQuery UI Widgets Forums Editors Calendar Special Dates with a For Loop

This topic contains 10 replies, has 5 voices, and was last updated by  neong 4 months, 2 weeks ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • Special Dates with a For Loop #65268

    fredmichel
    Participant

    Good Morning, I have been using jqwidgets for a couple of Months and I find it really amazing. Congrats to the team who came up with such a nice library.

    Today I am using the Calendar SpecialDates for the first time and I am wondering if there is a way to do what I need. I have tried a couple of things but none of them worked so far.

    I am using the calendar in a page where I have JSON Array with a 12 Dates.

    I want to find a way to display all these special dates in the calendar dynamically since the number will change every month. So far, I have only seen declaration for each of the special dates but nothing dynamic. So I tried using a For Loop to get each of the dates in my Array in display them in the Calendar…but this doesn’t work, since my variable always take the value of the last date.

    So I thought that I would use another Array to store each of the returned dates and then display them in the calendar…but this doesn work either. The AdSpecialDate doesn’t support Arrays

    var DateArray = new Array()
    var calDate = new Date();				
    for (i = 0; i < calendarDate.length; i++) {
         DateArray[i] = calendarDate[i].date 
         calDate.setDate(DateArray[i]);
         alert (DateArray[i]); // For testing
         $("#jqxCal").jqxCalendar('addSpecialDate', DateArray[i], '', 'Billing');
    }

    Is there any way I can have all the dates displayed in the calendar without declaring them myself?

    Thank you.

    Special Dates with a For Loop #65347

    Nadezhda
    Participant

    Hello fredmichel,

    Here is an example with jqxCalendar and JSON Array with 12 dates. The ‘addSpecialDate’ accepts as parameter date objects.

    <!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="../../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>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    // Create calendar.
                    $("#jqxWidget").jqxCalendar({ enableTooltips: true, width: 220, height: 220 });
                    var jsonArray = [{ "date": new Date("2015-12-20T11:20:00.000Z") }, { "date": new Date("2015-01-11T09:20:00.000Z") }, { "date": new Date("2015-02-15T03:20:00.000Z") }, { "date": new Date("2015-03-21T23:23:00.000Z") }, { "date": new Date("2015-04-10T11:20:00.000Z") }, { "date": new Date("2015-06-20T11:20:00.000Z") }, { "date": new Date("2015-07-20T11:20:00.000Z") }, { "date": new Date("2015-01-07T11:20:00.000Z") }, { "date": new Date("2015-01-03T11:20:00.000Z") }, { "date": new Date("2015-08-20T11:20:00.000Z") }, { "date": new Date("2015-01-20T11:20:00.000Z") }, { "date": new Date("2015-10-20T11:20:00.000Z") }];
                    for (var i = 0; i < jsonArray.length; i++) {
                        var obj = jsonArray[i];
                        $("#jqxWidget").jqxCalendar('addSpecialDate', obj.date, '', 'Special Date');
                    }     
                });
            </script>
            <div id='jqxWidget'></div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    Special Dates with a For Loop #65350

    Nadezhda
    Participant

    Hello fredmichel,

    Here is one more example:

    <!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="../../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>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    // Create calendar.
                    $("#jqxWidget").jqxCalendar({ enableTooltips: true, width: 220, height: 220 });
                    var jsonArray = [{ "date": "2015-05-20T11:20:00.000Z" }, { "date": "2015-01-11T09:20:00.000Z" }, { "date": "2015-02-15T03:20:00.000Z" }, { "date": "2015-03-20T23:23:00.000Z" }, { "date": "2015-04-10T11:20:00.000Z" }, { "date": "2015-06-20T11:20:00.000Z" }, { "date": "2015-07-20T11:20:00.000Z" }, { "date": "2015-01-07T11:20:00.000Z" }, { "date": "2015-01-03T11:20:00.000Z" }, { "date": "2015-08-20T11:20:00.000Z" }, { "date": "2015-01-20T11:20:00.000Z" }, { "date": "2015-10-20T11:20:00.000Z" }];
                    for (var i = 0; i < jsonArray.length; i++) {                    
                        var obj = jsonArray[i];
                        var d = new Date(obj.date);
                        $("#jqxWidget").jqxCalendar('addSpecialDate', d, '', 'Special Date' + i);
                    }
                });
            </script>
            <div id='jqxWidget'></div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    Special Dates with a For Loop #65372

    fredmichel
    Participant

    Hi,

    Thanks a lot Nadezhda. I will try it this way.

    Special Dates with a For Loop #65373

    fredmichel
    Participant

    Thanks Nade

    Thanks Nadezhda, I have tried your second implementation. First I tried your code straight and it worked perfectly…then I tried with my data.

    Below is the JSON returned by my AJAX Call. It’s not formatted the same way as yours.

    [{"Date":{"date":"2015-01-03 00:00:00","timezone_type":3,"timezone":"America\/New_York"}},{"Date":{"date":"2015-01-07 00:00:00","timezone_type":3,"timezone":"America\/New_York"}},{"Date":{"date":"2015-01-09 00:00:00","timezone_type":3,"timezone":"America\/New_York"}},{"Date":{"date":"2015-01-12 00:00:00","timezone_type":3,"timezone":"America\/New_York"}},{"Date":{"date":"2015-01-14 00:00:00","timezone_type":3,"timezone":"America\/New_York"}},{"Date":{"date":"2015-01-15 00:00:00","timezone_type":3,"timezone":"America\/New_York"}},{"Date":{"date":"2015-01-17 00:00:00","timezone_type":3,"timezone":"America\/New_York"}},{"Date":{"date":"2015-01-21 00:00:00","timezone_type":3,"timezone":"America\/New_York"}},{"Date":{"date":"2015-01-23 00:00:00","timezone_type":3,"timezone":"America\/New_York"}},{"Date":{"date":"2015-01-26 00:00:00","timezone_type":3,"timezone":"America\/New_York"}},{"Date":{"date":"2015-01-28 00:00:00","timezone_type":3,"timezone":"America\/New_York"}},{"Date":{"date":"2015-01-29 00:00:00","timezone_type":3,"timezone":"America\/New_York"}}]

    When I set var d = new Date(obj.date); and pass d to the ‘addSpecialDate’, I have an error message telling me that date is null or not an object.

    Special Dates with a For Loop #65417

    Nadezhda
    Participant

    Hi fredmichel,

    Here is an example with your JSON array:

    <!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="../../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>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    // Create calendar.
                    $("#jqxWidget").jqxCalendar({ enableTooltips: true, width: 220, height: 220 });
                    var jsonArray = [{ "Date": { "date": "2015-01-03 00:00:00", "timezone_type": 3, "timezone": "America\/New_York" } }, { "Date": { "date": "2015-01-07 00:00:00", "timezone_type": 3, "timezone": "America\/New_York" } }, { "Date": { "date": "2015-01-09 00:00:00", "timezone_type": 3, "timezone": "America\/New_York" } }, { "Date": { "date": "2015-01-12 00:00:00", "timezone_type": 3, "timezone": "America\/New_York" } }, { "Date": { "date": "2015-01-14 00:00:00", "timezone_type": 3, "timezone": "America\/New_York" } }, { "Date": { "date": "2015-01-15 00:00:00", "timezone_type": 3, "timezone": "America\/New_York" } }, { "Date": { "date": "2015-01-17 00:00:00", "timezone_type": 3, "timezone": "America\/New_York" } }, { "Date": { "date": "2015-01-21 00:00:00", "timezone_type": 3, "timezone": "America\/New_York" } }, { "Date": { "date": "2015-01-23 00:00:00", "timezone_type": 3, "timezone": "America\/New_York" } }, { "Date": { "date": "2015-01-26 00:00:00", "timezone_type": 3, "timezone": "America\/New_York" } }, { "Date": { "date": "2015-01-28 00:00:00", "timezone_type": 3, "timezone": "America\/New_York" } }, { "Date": { "date": "2015-01-29 00:00:00", "timezone_type": 3, "timezone": "America\/New_York" } }];
          
                    for (var i = 0; i < jsonArray.length; i++) {
                        var obj = jsonArray[i].Date;                    
                        var nDate = obj.date;
                        var sliced = nDate.slice(0, 10);                    
                        var d = new Date(sliced);
                        $("#jqxWidget").jqxCalendar('addSpecialDate', d, '', 'Special Date' + i);
                    }
                });
            </script>
            <div id='jqxWidget'></div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    Special Dates with a For Loop #66078

    fredmichel
    Participant

    Thanks again Nadezhda,it does work now.

    But I just realized something I did not think about. When looping to create the dates, If the JSON Array has 1 or 2 dates, it’s fine. But with around 10 to 12 dates like my array will always return, it takes about 2 to 4 seconds to load, since the Loop is running in the background to update the calendar.

    I know it may sound picky…but is there a way to make this run faster, like people would not even realize something is waiting to be updated?

    Thanks a lot again.

    Special Dates with a For Loop #66112

    Nadezhda
    Participant

    Hi fredmichel,

    Unfortunately, it is not possible to run it faster.

    Best Regards,
    Nadezhda

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

    Special Dates with a For Loop #89790

    74bit
    Participant

    I stumpled about this post because I had the same problem, that my page was very slow because of too many “addSpecialDate”-calls.

    And there absolutely IS a way to make this faster, by not calling “addSpecialDate” many times, but to collect the data in an array and then call it once

    var specialDates = [];
    while (...) {
       ...
       yourclass = ...
       yourdate= ...
       yourtooltip= ...
       specialDates.push( { Class: yourclass, Date: yourdate, Tooltip: yourtooltip});
    }
    $('#jqxCal').jqxCalendar('specialDates', specialDates); 

    It’s probably to late for the author of the original post, but I may help someone …

    • This reply was modified 3 years, 1 month ago by  74bit.
    • This reply was modified 3 years, 1 month ago by  74bit.
    Special Dates with a For Loop #89823

    Dimitar
    Participant

    Hello 74bit,

    Thank you for your contribution.

    Best Regards,
    Dimitar

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

    Special Dates with a For Loop #106675

    neong
    Participant

    Hello 74bit,

    It’s really help a lot.

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

You must be logged in to reply to this topic.