Generate Exception for Recurring Event Using External DatePicker

Environment

Product Progress Kendo UI Scheduler

Description

How to manually add exception date for recurring event in the Kendo Scheduler using the Kendo DatePicker?

Solution

  Pick a date to be added to the exception:
  <input id="datepicker" />
  <button type="button" class="k-button" id="btn">Click to add the selected date as exception</button>
  <div id="scheduler"></div>

  <script>
    $("#scheduler").kendoScheduler({
      views: ['week'],
      showWorkHours: true,
      dataSource: [{
        id: 1,
        start: new Date("2017/7/16 12:00"),
        end: new Date("2017/7/16 12:30"),
        title: "Lunch",
        recurrenceRule: "FREQ=DAILY"
      }]
    });

    $("#datepicker").kendoDatePicker();

    $('#btn').on('click', function() {
      var picker = $("#datepicker").getKendoDatePicker();
      var pickerDate = picker.value();

      if (!pickerDate) {
        return;
      }

      pickerDate.setHours(12,0,0,0);
      var pickerString = pickerDate.toISOString();

        var schedulerDataSource = $("#scheduler").getKendoScheduler().dataSource;
      var dataItem = schedulerDataSource.at(0);

      if (!dataItem.recurrenceException) {
        dataItem.recurrenceException = '';
      } else {
        dataItem.recurrenceException += ',';
      }

      dataItem.recurrenceException = dataItem.recurrenceException + pickerString;

      schedulerDataSource.sync();
    });
  </script>

See Also

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