New to Kendo UI for jQueryStart a free 30-day trial

Resize the DatePicker Calendar Based on Input Width

Environment

ProductProgress® Kendo UI® DatePicker for jQuery
Operating SystemWindows 10 64bit
Visual Studio VersionVisual Studio 2017
Preferred LanguageJavaScript

Description

How can I resize the nested Kendo UI Calendar based on the width of the DatePicker input element?

Solution

The following example demonstrates how to achieve the desired scenario.

    <div id="example">
      <div id="email-settings">
       </div>
       <input id="datepicker" value="10/10/2011" style="width:200px;" />
       <input id="monthpicker" value="November 2011" style="width:190px" />
      
      <script>
        $(document).ready(function() {
          // create DatePicker from input HTML element
          $("#datepicker").kendoDatePicker({
            open: function() {
              var calendar = this.dateView.calendar;

              calendar.wrapper.width(this.wrapper.width() - 6);
            }
          });

          $("#monthpicker").kendoDatePicker({
            // defines the start view
            start: "year",

            // defines when the calendar should return date
            depth: "year",

            // display month and year in the input
            format: "MMMM yyyy",
            open: function() {
              var calendar = this.dateView.calendar;

              calendar.wrapper.width(this.wrapper.width() - 6);
            }
          });
        });
      </script>
      <style scoped>
        #example h2 {
          font-weight: normal;
        }
        #email-settings {
          height: 135px;
          width: 595px;
          background: url('https://demos.telerik.com/kendo-ui/content/web/datepicker/mailSettings.png') transparent no-repeat 0 0;
        }

        .k-calendar {
          overflow-x: scroll;
        }
      </style>
    </div>

See Also