Special Dates with a For Loop - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: addSpecialDate, Angular 2 calendar, Angular calendar, array, calendar, jQuery Calendar, jqxCalendar, spedialDates

This topic contains 10 replies, has 5 voices, and was last updated by neong 5 years, 3 months ago.

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

Author

Special Dates with a For Loop Posts

January 12, 2015 at 3:14 pm 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.

January 14, 2015 at 11:24 am 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/

January 14, 2015 at 12:19 pm 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/

January 14, 2015 at 3:30 pm Special Dates with a For Loop #65372

fredmichel

Participant

Hi,

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

January 14, 2015 at 4:53 pm 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.

January 15, 2015 at 10:02 am 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/

January 27, 2015 at 1:36 pm 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.

January 28, 2015 at 7:11 am 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/

December 13, 2016 at 10:32 am 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 …

December 14, 2016 at 6:53 am 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/

September 6, 2019 at 10:08 am Special Dates with a For Loop #106675

neong

Participant

Hello 74bit,

It’s really help a lot.

Author

Posts

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

You must be logged in to reply to this topic.