Background text on a day cell in scheduler

[Chandrasekhar]

Hi there,

I am using the MVC scheduler month view for my project. I wanted to change the color of a day cell if it was a public holiday and am achieving this by using the Slots.each method in Scheduler databound event.

I also need to add a description on the day cell if it is a public holiday, How can i achieve this?

Is there a property that i can access in the slots.each method to set the description or title for the day cell.

Please help.

Cheers,

Chandra

[Vladimir Iliev]

Hi,


You can use the "dayTemplate" option of the Scheduler to set the template for the slots in month view:

• Scheduler API: dayTemplate
• Scheduler for ASP.NET MVC API: DayTemplate
  

Regards,
Vladimir Iliev
Telerik

 

 

[Chandrasekhar]

Hi Vladimir,

Thanks for your reply.

Is there a simple example using the dayTemplate option using MVC razor?

Thanking you,

Chandra

[Vladimir Iliev]

Hi,

Please check the example below of using the "DayTemplate" option of the "Month" view:

@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
    .Name("scheduler")
    .Date(new DateTime(2013, 6, 13))
    .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
    .Height(600)
    .Views(views =>
    {
        //make the dates link that will navigate to another view
        views.MonthView(m => m.DayTemplate("<a href='/Home/CustomView'><strong>#=kendo.toString(date,'dd')#</strong></a>"));

Regards,
Vladimir Iliev
Telerik

 

 

[Chandrasekhar]

Hi Vladimir,

Thanks for your reply.

I am using custom event template already and now am using a custom day template as well. This is how i have initialized the scheduler.

@(Html.Kendo().Scheduler<Leap.StaffBudgets.Models.StaffBudget>()
                    .Name("scheduler")
                    .Date(DateTime.Today)                                       
                    .Width(855)
                    .Timezone("Etc/UTC")
                    .Messages(msg =>
                    {
                        msg.Editor(e => e.EditorTitle("Budget"));
                    })                    
                    .Views(views =>
                    {
                        views.MonthView(v => v.EventTemplateId("eventTemplate").EventHeight(60).Selected(true));
                        views.MonthView(v => v.DayTemplateId("dayTemplate"));
                    })
)
This is how my custom templates look,

<script id="eventTemplate" type="text/x-kendo-tmpl">
    <div style="border-style:none">
        </br>
        Hours: #=Hours#</br>
        Amount: #=Amount#</br>
    </div>
</script>

<script id="dayTemplate" type="text/x-kendo-tmpl">
    <div style="border-style:none;">
        #= kendo.toString(date, 'dd') #</br>         
        <label id="lblDayTitle" class="exclusionTitle"></label>        
    </div>
</script>
Now when i run my program and I am getting JavaScript runtime error: Unable to get property 'replace' of undefined or null reference.
Can you see any obvious problems that could cause this to happen?

Please help.

Thanks,
Chandra

[Vladimir Iliev]

Hi,

I tried to reproduce the problem using the provided templates locally but to no avail – everything is working as expected on our side (the templates are valid). Could you please open a new support thread for the Scheduler and provide runable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Regards,
Vladimir Iliev
Telerik