Legend for DatePicker

5 posts, 0 answers
  1. Bryan
    Bryan avatar
    3 posts
    Member since:
    Mar 2016

    Posted 25 May Link to this post

    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.

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 27 May Link to this post

    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:



    Regards,
    Viktor Tachev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Bryan
    Bryan avatar
    3 posts
    Member since:
    Mar 2016

    Posted 27 May in reply to Viktor Tachev Link to this post

    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.
  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 30 May Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Bryan
    Bryan avatar
    3 posts
    Member since:
    Mar 2016

    Posted 13 Jun in reply to Bryan Link to this post

    Disregard
Back to Top
Kendo UI is VS 2017 Ready