New to Kendo UI for jQuery? Download free 30-day trial

Control the Header Format

The following example demonstrates how to control the header format of the Kendo UI Calendar based on a selected culture.

    <script src=""></script>
      kendo.calendar.views[0].title = function(date) {
        var culture = kendo.culture();
        var cultureName =;

        var month = culture.calendar.months.names[date.getMonth()];
        var year = date.getFullYear();

        var title;

        switch( {
          case "zh-TW":
          case "ko-KR":
          case "ja-JS":
            title = year + " " + month;
          case "fr-CA":
            title = month + ", " + year;
            title = month + " " + year;

        return title;

    <div id="example">
      <div class="demo-section k-header" style="width: 300px; text-align: center;">
        <div id="calendar"></div>
        $(document).ready(function() {
          // create Calendar from div HTML element

See Also

In this article
Not finding the help you need? Improve this article