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

Generate Exception for Recurring Event Using External DatePicker

Environment

Product Progress® Kendo UI® Scheduler for jQuery

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