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

Change Recurrence settings in Scheduler events

Environment

Product Progress® Kendo UI® Scheduler for jQuery
Product Version 2021.1.224
Operating System Windows 10 64bit
Preferred Language JavaScript

Description

How to get a subset of the default Recurrence options?

Solution

  1. Subscribe to the edit event of the Scheduler
  2. Select the button instances of the Recurrence editor's ButtonGroup with jQuery
  3. Use the jQuery hide method to hide the selected buttons

    <script id="event-template" type="text/x-kendo-template">
      <div>Title: #: title #</div>
      <div>Atendees:
        # for (var i = 0; i < resources.length; i++) { #
          #: resources[i].text #
        # } #
        </div>
    </script>
    <div id="scheduler"></div>
    <script>
      $("#scheduler").kendoScheduler({
        date: new Date("2013/6/6"),
        eventTemplate: $("#event-template").html(),
        edit: function(e){
          $('span[data-value="daily"]').hide();
          $('span[data-value="weekly"]').hide();
          $('span[data-value="monthly"]').hide();
        },
        dataSource: [
          {
            id: 1,
            start: new Date("2013/6/6 08:00 AM"),
            end: new Date("2013/6/6 09:00 AM"),
            title: "Interview",
            atendees: [1,2]
          }
        ],
        resources: [
          {
            field: "atendees",
            dataSource: [
              { value: 1, text: "Alex" },
              { value: 2, text: "Bob" }
            ],
            multiple: true
          }
        ]
      });
    </script>
    

For versions prior to Kendo UI 2020 R3

Prior to Kendo UI 2020 R3, the Scheduler RecurrenceEditor used a DropDownList. Refer to the example below for details on the customization of the Scheduler RecurrenceEditor prior to Kendo UI 2020 R3:

  1. Get the data of Recurrence editor's DropDownList widget
  2. Get the dataSource of the of the DropDownList
  3. Use filter to return only the desired recurrence options
  4. Set the dataSource of the DropDownList
  <script id="event-template" type="text/x-kendo-template">
    <div>Title: #: title #</div>
    <div>Atendees:
      # for (var i = 0; i < resources.length; i++) { #
        #: resources[i].text #
      # } #
      </div>
  </script>

  <div id="scheduler"></div>
  <script>
    $("#scheduler").kendoScheduler({
      date: new Date("2013/6/6"),
      eventTemplate: $("#event-template").html(),
      edit: function(e){
        var ddl = $('input[title="Recurrence editor"]').data('kendoDropDownList')
        if(ddl){
          var data = ddl.dataSource.data();
          var newData = data.filter(function(e){
            console.log(e)
            return e.text == "Never" || e.text == "Yearly"
          })           
          ddl.setDataSource(newData)   
        }
      },
      dataSource: [
        {
          id: 1,
          start: new Date("2013/6/6 08:00 AM"),
          end: new Date("2013/6/6 09:00 AM"),
          title: "Interview",
          atendees: [1,2]
        }
      ],
      resources: [
        {
          field: "atendees",
          dataSource: [
            { value: 1, text: "Alex" },
            { value: 2, text: "Bob" }
          ],
          multiple: true
        }
      ]
    });
</script>

See Also

In this article