Interesting issue with Demo 'Customizing templates' example

6 posts, 0 answers
  1. Brad
    Brad avatar
    7 posts
    Member since:
    Oct 2011

    Posted 16 Nov 2011 Link to this post

    http://demos.kendoui.com/calendar/template.html

    I began implementing a variation on the demo example using almost an identical array of dates. I noticed that all my dates were adding the template a month ahead of the date I configured. But, then I went back and looked back at the example and noticed that it's doing the same there.

    Here's my code (also added a screen shot of the month the dates are rendering):

    var assignments = [
            +new Date(2011, 12, 6),
            +new Date(2011, 11, 27),
            +new Date(2011, 11, 24),
            +new Date(2011, 11, 16),
            +new Date(2011, 11, 11)
    ];
     
    $("#calendar").kendoCalendar({
        value: new Date(),
        month: {
            // template for dates in month view
            content: '# if ($.inArray(+data.date, [' + assignments + ']) != -1) { #' +
                '<div class="assignment"></div>' +
                '# } #' +
                '#= data.value #'
        },
        change: onCalendarChange,
        footer: "Today - #=kendo.toString(data, 'd') #"
    });
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 17 Nov 2011 Link to this post

    Hi Brad,

     
    Months in Date JavaScript object is zero based.

    All the best,
    Georgi Krustev
    the Telerik team
    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
  4. Brad
    Brad avatar
    7 posts
    Member since:
    Oct 2011

    Posted 17 Nov 2011 Link to this post

    Doh!

    Yea, not the first time this has caught me. I thought it only applied to the return of getMonth and not the Date object constructor. 

    Thanks for the reply!
  5. E
    E avatar
    2 posts
    Member since:
    Dec 2011

    Posted 19 Dec 2011 Link to this post

    We are testing your product.
    I try to do the same thing using millisecond on the date constructor and it appears that my dates doesn't show up in the calendar.
    I can not understand why. If you wonder why am I setting Date with this constructor, well it's just becouse dates are stored as Ticks in my DB so it's very simple to get the number of milliseconds elapsed since 01/01/1970
    This is my code:

    <script type="text/javascript">
        $(document).ready(function () {
            var today = new Date(),
                            sessions = [
                             +new Date(1323925200000),
                             +new Date(1322888400000)
                            ];
            
            $("#calendar").kendoCalendar({
                value: today,
                month: {
                    // template for dates in month view
                    content: '# if ($.inArray(+data.date, [' + sessions + ']) != -1) { #' +
                                            '<div class="' + 'sessionday' + '">'+
                                         '# } #' + 
                                         '#= data.value #'
                                         +
                                         '# if ($.inArray(+data.date, [' + sessions + ']) != -1) { #' +
                                         '</div>'
                                         + '# } #' 
                },
                footer: "Today - #=kendo.toString(data, 'd') #"
            });
        });
    </script>

    Any millisecond to date converter gives me the right Date, so I don't know why these days doesnt show up on my calendar.
    Thank you in advance for your help.
    Eric
  6. E
    E avatar
    2 posts
    Member since:
    Dec 2011

    Posted 19 Dec 2011 Link to this post

    it appears that in order to use the milliseconds with calendar my code should look like this (and I don't like it)
    sessions = [
       +new Date(new Date(1323388800000).getFullYear(), new Date(1323388800000).getMonth(), new Date(1323388800000).getDate()),                              
       +new Date(new Date(1323907200000).getFullYear(), new Date(1323907200000).getMonth(), new Date(1323907200000).getDate()),                              
       +new Date(new Date(1323734400000).getFullYear(), new Date(1323734400000).getMonth(), new Date(1323734400000).getDate())                              
     ];

    OR

    since it is generated through razor, it could also be
    sessions = [
      @{
       foreach(DateTime d in Model)
    {
    <text>+new Date(@d.Year, @d.Month-1, @d.Day),</text>}
    }
    ];

    which is more simple but need to be tested against potential issues with local times
    What is the best practice ?
  7. Jelena
    Jelena avatar
    6 posts
    Member since:
    Mar 2012

    Posted 02 Aug 2012 Link to this post

    Based on this sample I am looking for a method to set or bind to MVC ViewModel. I need to show counts(of some server data) instead of icons. What is the best way of doing that? Is there is a method(besides navigate)? Would you please provide simple MVC binding sample. I appreciate any help.
    Thank you in advance,
    Jelena
Back to Top
Kendo UI is VS 2017 Ready