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

Kendo Calendar with Timezone

Environment

Product Progress Kendo UI Calendar
Created with Kendo UI version 2020.1.406

 

Description

We currently have the Kendo UI Calendar implemented within our application. User accounts within our application are allowed to have a timezone set. We'd like to be able to pass this timezone into the calendar so it shows the current day with respect to this timezone. It appears as though the calendar is set up to use the browser timezone. We're wondering if it's currently possible to override the browser timezone with a different one or if you had any plans to implement this option in the future?

Solution

To implement a timezone we need to take care of the following:

  1. The calendar footer needs to display the date value in the selected timezone
  2. The current day has a special style that needs to be added to the correct cell
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.timezones.min.js"></script>
    <div class="k-card">
      <div class="k-toolbar">
        <label for="picker" class="k-edit-label">Change selection to see today's day in different timezones</label>
        <input id="picker" class="k-edit-field" />
      </div>
      <div id="calendar"></div>
    </div>
    <script id="footer-template" type="text/x-kendo-template">
        #: kendo.toString(converted, "D") #
        </script>
    <script>
        var converted;
        var picker = $("#picker").kendoDropDownList({
          dataSource: ["Australia/Brisbane", "America/Chicago", "Africa/Johannesburg"],
          change: function(e){
            converted = kendo.timezone.apply(new Date(), this.value())
            calendar.value(converted);
            calendar._footer(kendo.template($("#footer-template").html()));
            addTodayStyle({ sender: calendar});
          }
        }).data("kendoDropDownList");

        var selectedOfset = picker.value();
        converted = kendo.timezone.apply(new Date(),selectedOfset);

        var calendar = $("#calendar").kendoCalendar({
          value: converted,
          footer: kendo.template($("#footer-template").html()),
          navigate: addTodayStyle
        }).data("kendoCalendar");

        function addTodayStyle(e){
            var todayString = e.sender._view.toDateString(converted);
            e.sender.element.find(".k-today").removeClass("k-today");
            e.sender.element.find("[data-value='" + todayString +  "']").parent().addClass("k-today");
        }      
    </script>    

See Also

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