"Customizing templates" example using REST data

2 posts, 0 answers
  1. Richard
    Richard avatar
    1 posts
    Member since:
    Feb 2013

    Posted 15 Oct 2013 Link to this post

    Hi there,

    Inspired by the example on the demos site, I attempted to populate a calendar to show days when our system receives FTP uploads. Here is what I've got so far:
    01.<script type="text/javascript">
    02.    var today = new Date();
    03.    var events = [];
    04.    $.getJSON(url, function(json){
    05.        for (var i = 0; i < json.length; i++){
    06.            events.push(new Date(json[i].Year, json[i].Month -1, json[i].Day));
    07.        }
    08.        $('#connectionCalendar').kendoCalendar({
    09.            value: today,
    10.            depth: "month",
    11.            start: "month",
    12.            dates: events,
    13.            month: {
    14.                content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +
    15.                            '<div class="date-received">' +
    16.                                '#= data.value #' +
    17.                            '</div>' +
    18.                         '# } else { #' +
    19.                            '<div class="date-empty">' +
    20.                                '#= data.value #' +
    21.                            '</div>' +
    22.                         '# } #'
    23.            },
    24.            footer: false
    25.        });
    26.    });
    27.</script>
    The code appears to be parsing okay, as I'm getting the date-empty class applied to each of my calendar elements. The JSON is arriving okay, and events is being populated, which leaves me with two scenarios that I can think of:

    1. The async fetching of data is out of step with the calendar being built.
    2. The $.inArray function is not behaving as intended with my new dataset.
    Any help you guys can offer would be greatly appreciated. Thanks!


  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 17 Oct 2013 Link to this post

    Hi,

    You should use:

    for (var i = 0; i < json.length; i++){
        events.push(new Date(json[i].Year, json[i].Month -1, json[i].Day).getTime());
    }
    or:
    for (var i = 0; i < json.length; i++){
        events.push(+new Date(json[i].Year, json[i].Month -1, json[i].Day));
    }
    to get the time. Currently, a JavaScript Date and a number representing the time in milliseconds are compared so no match will be found. Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top