This is a migrated thread and some comments may be shown as answers.

using MVV to add Day Template

1 Answer 59 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
CH
Top achievements
Rank 1
CH asked on 17 Dec 2015, 03:52 AM

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

 

1 Answer, 1 is accepted

Sort by
0
CH
Top achievements
Rank 1
answered on 18 Dec 2015, 03:15 AM

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') #"
        });
    }


 

Tags
Calendar
Asked by
CH
Top achievements
Rank 1
Answers by
CH
Top achievements
Rank 1
Share this question
or