Kendo UI Calendar Data Binding from View Model in MVC

[Gilbert]

I have a Kendo UI MVC control on my asp.net MVC page, i want to highlight specific dates based on information from my database. EG on 9/Aug/2012 there were 7 appointments raised.


I'd like to use the custom template like this 


    <%= Html.Kendo().Calendar()
            .Name("calendar")
            .Value(DateTime.Today)
            .HtmlAttributes(new { style = "width:330px" })
            .Footer("Today - #=kendo.toString(data, 'd') #")
                .MonthTemplate("# if ($.inArray(+data.date, events) != -1) { #" +
                                "'<div class=\"" +
                                "# if (data.value < 10) { #" +
                                        "exhibition" +
                                    "# } else if ( data.value < 20 ) { #" +
                                        "party" +
                                    "# } else { #" +
                                        "cocktail" +
                                    "# } #" +
                                "\"></div>" +
                            "# } #" +
                            "#= data.value #")                     
    %>
    
    <script>
        var today = new Date(),
            events = [
                +new Date(today.getFullYear(), today.getMonth(), 8),
                +new Date(today.getFullYear(), today.getMonth(), 12),
                +new Date(today.getFullYear(), today.getMonth(), 24),
                +new Date(today.getFullYear(), today.getMonth() + 1, 6),
                +new Date(today.getFullYear(), today.getMonth() + 1, 7),
                +new Date(today.getFullYear(), today.getMonth() + 1, 25),
                +new Date(today.getFullYear(), today.getMonth() + 1, 27),
                +new Date(today.getFullYear(), today.getMonth() - 1, 3),
                +new Date(today.getFullYear(), today.getMonth() - 1, 5),
                +new Date(today.getFullYear(), today.getMonth() - 2, 22),
                +new Date(today.getFullYear(), today.getMonth() - 2, 27)
            ];
    </script>


How can I replace the above javascript array with an array on my viewmodel?
Something like this - 


    .MonthTemplate("# if ($.inArray(+data.date, " + Model.Array + ") != -1) { #" +
                                    "'<div class=\"" +
                                    "# if (data.value < 10) { #" +
                                            "exhibition" +
                                        "# } else if ( data.value < 20 ) { #" +
                                            "party" +
                                        "# } else { #" +
                                            "cocktail" +
                                        "# } #" +
                                    "\"></div>" +
                                "# } #" +
                                "#= data.value #")                     
        %>


Thanks

[Jarrod]

Hi Gilbert,
I realize this post is quite old, but if anyone else ran into this issue I thought I should offer the solution here that we ended up using for the same situation.
I had a similar requirement for some calendar objects in a project I was working on. What you have looks very similar to what I ended up going with. Instead of searching an array for the actual Date/DateTime object, I ended up needing to convert the DateTime object to a string and serializing the array I was searching into a string (which was returned in the ViewModel).
Here is an example of the code I used for the template:
                   

.MonthTemplate("#if ( $.inArray(kendo.toString(new Date(+data.date), 'M/d/yyyy'), " + @Model.ScheduledDatesJson + ") != -1) {#" +
                 "<div class='dateHasWindows'>" +
                "#}else {#" +
                "<div>" +
                "#}#" +
                "#= data.value #" +
                "</div>"
)

And in the controller that returned the view, I needed to use the JavascriptSerializer to convert my list of DateTime objects into a comma-separated string of shortDateTime strings as part of the ViewModel:

    [HttpGet]
    public PartialViewResult GetSearchPartialView(string projectName)
    {
        RawrSearchAreaModel model = new RawrSearchAreaModel();

        // get a list of all window dates from DB
        List<DateTime> RunDates;

        using (RAWREntities dbcontext = new RAWREntities())
        {
            RunDates = dbcontext.Messages.Where(m => m.ProjectName == projectName).Select(x => x.RunDateTime).Distinct().ToList();
        }

        // format list for the UI (dates only into a javascript array)
        JavaScriptSerializer jss = new JavaScriptSerializer();
        model.ScheduledDatesJson = jss.Serialize(RunDates.Select(x => x.ToShortDateString()).ToArray());

        return PartialView("_rawrSearchArea", model);
    }
}

Hope this helps someone.