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

html

  <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

• JavaScript API Reference of the Scheduler
• JavaScript API Reference of the ButtonGroup