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

Calendar MonthTemplate syntax

4 Answers 124 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 21 Jul 2016, 01:54 PM

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.

4 Answers, 1 is accepted

Sort by
0
Peter
Top achievements
Rank 1
answered on 22 Jul 2016, 06:31 AM
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.
0
Viktor Tachev
Telerik team
answered on 25 Jul 2016, 09:07 AM
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
0
Peter
Top achievements
Rank 1
answered on 25 Jul 2016, 09:18 AM

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.

0
Viktor Tachev
Telerik team
answered on 27 Jul 2016, 07:12 AM
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
Tags
Calendar
Asked by
Peter
Top achievements
Rank 1
Answers by
Peter
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or