Control the Header Format of the Calendar
Environment
Product | Progress® Kendo UI® Calendar for jQuery |
Operating System | Windows 10 64bit |
Visual Studio Version | Visual Studio 2017 |
Preferred Language | JavaScript |
Description
How can I control the header format of the Kendo UI for jQuery Calendar based on the selected culture?
Solution
The following example demonstrates how to achieve the desired behavior.
<script src="https://kendo.cdn.telerik.com/2024.3.806/js/cultures/kendo.culture.ko-KR.min.js"></script>
<script>
kendo.culture("ko-KR");
kendo.calendar.views[0].title = function(date) {
var culture = kendo.culture();
var cultureName = culture.name;
var month = culture.calendar.months.names[date.getMonth()];
var year = date.getFullYear();
var title;
switch(culture.name) {
case "zh-TW":
case "ko-KR":
case "ja-JS":
title = year + " " + month;
break;
case "fr-CA":
title = month + ", " + year;
break;
default:
title = month + " " + year;
}
return title;
};
</script>
<div id="example">
<div class="demo-section k-header" style="width: 300px; text-align: center;">
<div id="calendar"></div>
</div>
<script>
$(document).ready(function() {
// create Calendar from div HTML element
$("#calendar").kendoCalendar();
});
</script>
</div>