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

OngoingEvents

configuration

The settings for the ongoing events highlight. The highlight is disabled by default. If you need to turn it on, set this option to true, or use a configuration object with its nested options.

ongoingEvents

Boolean|Object

<div id="scheduler"></div>
<script>
var currentTime = new Date();
var year = currentTime.getFullYear();
var month = currentTime.getMonth();
var day = currentTime.getDate();
var hour = currentTime.getHours();

$("#scheduler").kendoScheduler({
  ongoingEvents: true,
  dataSource: [{
    id: 1,
    title: "test",
    start: new Date(year, month, day, hour - 1),
    end: new Date(year, month, day, hour + 1)
  }]
});
</script>

ongoingEvents.cssClass

String

Specifies a custom CSS class applied to ongoing events. If not set, the default k-event-ongoing class will be applied.

Default: null

<div id="scheduler"></div>
<script>
var currentTime = new Date();
var year = currentTime.getFullYear();
var month = currentTime.getMonth();
var day = currentTime.getDate();
var hour = currentTime.getHours();

$("#scheduler").kendoScheduler({
  ongoingEvents: {
    enabled: true,
    cssClass: "customClass"
  },
  dataSource: [{
    id: 1,
    title: "test",
    start: new Date(year, month, day, hour - 1),
    end: new Date(year, month, day, hour + 1)
  }]
});
</script>

<style>
  .k-scheduler .k-event.customClass {
    border: 3px solid black;
  }
</style>

ongoingEvents.enabled

Boolean

Specifies if the ongoing events will be highlighted. Defaults to false.

Default: false

<div id="scheduler"></div>
<script>
var currentTime = new Date();
var year = currentTime.getFullYear();
var month = currentTime.getMonth();
var day = currentTime.getDate();
var hour = currentTime.getHours();

$("#scheduler").kendoScheduler({
  ongoingEvents: {
    enabled: true
  },
  dataSource: [{
    id: 1,
    title: "test",
    start: new Date(year, month, day, hour - 1),
    end: new Date(year, month, day, hour + 1)
  }]
});
</script>

ongoingEvents.updateInterval

Number

The update interval (in milliseconds) of the ongoing events highlight. Defaults to 60000 (a minute).

Default: 60000

<div id="scheduler"></div>
<script>
var currentTime = new Date();
var year = currentTime.getFullYear();
var month = currentTime.getMonth();
var day = currentTime.getDate();
var hour = currentTime.getHours();

$("#scheduler").kendoScheduler({
  ongoingEvents: {
    enabled: true,
    updateInterval: 60 * 60 * 1000 // one hour interval
  },
  dataSource: [{
    id: 1,
    title: "test",
    start: new Date(year, month, day, hour - 1),
    end: new Date(year, month, day, hour + 1)
  }]
});
</script>

ongoingEvents.useLocalTimezone

Boolean

If set to false the ongoing events will be highlighted in the scheduler timezone. That means only events that happen at the moment (according to their start and end data) will be highlighted. In order the highlight on the ongoing events to be visually in sync with the currentTimeMarker in the widget, the useLocalTimezone configuration options of both must be set to the same value. This way the highlighted ongoing events will be placed over the currentTimeMarker.

Default: true

<div id="scheduler"></div>
<script>
  var currentTime = new Date();
  var year = currentTime.getFullYear();
  var month = currentTime.getMonth();
  var day = currentTime.getDate();
  var hour = currentTime.getHours();

  $("#scheduler").kendoScheduler({
    timezone: "Etc/UTC",
    ongoingEvents: {
      enabled: true,
      useLocalTimezone: false
    },
    currentTimeMarker: {
      useLocalTimezone: false
    },
    dataSource: [{
      id: 1,
      title: "test",
      start: new Date(year, month, day, hour - 1),
      end: new Date(year, month, day, hour + 1)
    }]
  });
</script>