Calendar MonthTemplate syntax

5 posts, 0 answers
  1. Peter
    Peter avatar
    4 posts
    Member since:
    Mar 2015

    Posted 21 Jul Link to this post

    Hi, I'm new here.

     

    I'm developing a site which uses the Calendar, one requirement is that I need to be able to color the days of the month depending on the model state.

     

    I've seen a couple of examples that has the Calendar declared in javascript, I'm working with Razor, in a .cshtml file. I can freely access a property in the model to return a CssClass string.

    my calendar is written like this.

    @(Html.Kendo().Calendar()
                      .Name("Trafikkalender")
                      .Culture("sv-SE")
                      .HtmlAttributes(new {style = "width: 100%;"})
                      .Events(e => e.Change("DateClick").Navigate("Navigate"))
                      .Format("dd MM yyyy")
                      
                      )

    I know I need the .MonthTemplate("") property for my purpose, but I don't know what the syntax is for the string. the Model object returns a custom date object with a DateTime as input, how would I accomplish my goal? the examples and demos I've found here are very poorly commented/explained, I need more information.

  2. Peter
    Peter avatar
    4 posts
    Member since:
    Mar 2015

    Posted 22 Jul in reply to Peter Link to this post

    I could also try using the MonthTemplateId, but there is only a brief mention that it exists, no actual example or explanation. I have to look outside of the forums for this, but even stackoverflow is thin with information, is anyone actually using Kendo UI? I never had any problems with Telerik UI for Ajax. MVC so far has been one big joke.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 25 Jul Link to this post

    Hi Peter,

    Please examine the following online example that illustrates how you can customize the dates in the Calendar based on specific condition.



    Regards,
    Viktor Tachev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Peter
    Peter avatar
    4 posts
    Member since:
    Mar 2015

    Posted 25 Jul in reply to Viktor Tachev Link to this post

    yeah I've looked at that several times, I don't understand that example and non of your examples are explained at all,

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

     

    there is no mention of how I could insert external variables here. all I know from this examples is that I can apply math to the calendar without putting any external data in. I had to go around this and use javascript fullt on the generated calendar's tbody, tr and td's and apply my css classes directly to them.

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 27 Jul Link to this post

    Hello Peter,

    The demo uses external data from the events array. It checks the values there against the currently rendered date and applies a custom CSS class where necessary.

    You can use similar logic and pass custom data to the template. Then you would need to use JavaScript to determine if a custom CSS class should be applied to a given date.

    Regards,
    Viktor Tachev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready