New to Kendo UI for jQuery? Start a free 30-day trial
Resize the DatePicker Calendar Based on Input Width
Updated on May 14, 2025
Environment
| Product | Progress® Kendo UI® DatePicker for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
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>