Legend for DatePicker

[Bryan]

Hi,

I'm new to a .NET web app project that is using a DatePicker to switch between report dates (also new to Telerik's products as well).  Need to add a feature that highlights dates that have available reports.  

My question is: How do I add a legend to the calendar that says something like "Highlighted dates have reports available" either above or below where today's date is displayed?  When the calendar icon is clicked, the calendar drops down, but I can't seem to figure out how to put a legend/key on the calendar.  As far as I can tell, here is the code generating the attached DatePicker:

- In a .cshtml file:

@model DateTime?

<span style="width:6em">
    @(Html.Kendo().DatePickerFor(m => m).Format("yyyy-MM-dd"))
</span>

 

- And the call in another .cshtml file:

<td>@Html.EditorFor(m => m.ProdDate)</td>

 

Thanks for the help.

[Viktor Tachev]

Hi Bryan,

In order to highlight some of the dates in the calendar popup you can use a template. Check out the following example that outlines the approach:

• http://demos.telerik.com/aspnet-mvc/datepicker/template

Regards,
Viktor Tachev
Telerik

 

 

[Bryan]

Thanks for the tip on highlighting, Viktor.  Is there a demo for putting a legend/key on a calendar (my original question) as well?  My thought is to do it in a modal/popup, but the users would prefer not needing an additional popup, so putting the legend on the drop-down calendar (if possible) is ideal.

[Viktor Tachev]

Hi Bryan,

In order to add custom text in the footer of the calendar popup you can handle the open event for the DatePicker. In the handler you can get reference of the footer and add your custom message.

open: function (e) {

  var picker = this;
  setTimeout(function() {
    picker.dateView.popup.wrapper.find(".k-footer").append("Custom text");
  }, 1);

}

Regards,
Viktor Tachev
Telerik

 

 

[Bryan]

Disregard