Kendo UI Calendar Data Binding from View Model in MVC

2 posts, 0 answers
  1. Gilbert
    Gilbert avatar
    5 posts
    Member since:
    Jul 2012

    Posted 03 Aug 2012 Link to this post

    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

  2. Jarrod
    Jarrod avatar
    4 posts
    Member since:
    Jun 2013

    Posted 13 May 2014 in reply to Gilbert Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
Back to Top