using MVV to add Day Template

2 posts, 0 answers
  1. CH
    CH avatar
    48 posts
    Member since:
    Aug 2010

    Posted 16 Dec 2015 Link to this post

    Hi,

    May i know how to add day template via MVVM? I tried but i encounter: Uncaught Error: The month binding is not supported by the Calendar widget"

     

      <div data-role="calendar"
                 data-bind="value: selectedDate,  events: { navigate: onChange },month: {content:$('#cell-template').html()}"></div>


            <script id="cell-template" type="text/x-kendo-template">
                <div>
                    #= data.value #
                </div>
                </script>

     

     Please advise.

     

    regards,

    ch

     

  2. CH
    CH avatar
    48 posts
    Member since:
    Aug 2010

    Posted 17 Dec 2015 in reply to CH Link to this post

    Dear all,

    i manage to solved it using KnockOut.JS instead. 

    using http://jsfiddle.net/bfycstr4/75/ as my example.

     For those who are keen,you can download (http://rniemeyer.github.io/knockout-kendo/)

    from there, here is my code in HTML:

       <button data-bind="click:fnChangeDate">Try</button>

        <div id="divCalendarTH" data-bind="kendoCalendar:
                    {
                        value: new Date(),
                        widget:calendarWidget,
                        navigate:fnChangeMonth,
                        dates: loggedDates,
                         month: {
                         content: $('#calendarDayTemplate').html()
                    }
                    }">
            </div>

      <script id="calendarDayTemplate" type="text/html">

        # if (isInArray(data.date, data.dates, data) == "publicHoliday") { #
            <div class="publicHoliday">#= data.value #</div> 
        # } #
        # if (isInArray(data.date, data.dates, data) == "underlog") { #
           <div class="underlog">#= data.value #</div>
        # } #
        # if (isInArray(data.date, data.dates, data) == "leave") { #
           <div class="leave">#= data.value #</div>
        # } #
        # if (isInArray(data.date, data.dates, data) == "none") { #
        <div>#= data.value #</div>
        # } #
    </script>

     

     

     

    In My ViewModel:

     function fnChangeDate() {
            
            me.calendarWidget().destroy();
            me.calendarWidget().wrapper.empty();
            me.loggedDates.removeAll();
            me.loggedDates.push(new Date(2016, 1 - 1, 5));
          
            $("#divCalendarTH").kendoCalendar({
                dates: me.loggedDates(),
                value : new Date(2016,1-1,1),
                month: {
                    // template for dates in month view
                    content: $('#calendarDayTemplate').html()
                },
                footer: "Today - #=kendo.toString(data, 'd') #"
            });
        }


     

  3. Kendo UI is VS 2017 Ready
Back to Top