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

Show Specific Options In Recurrence Editor in Scheduler

Environment

Product Progress® Kendo UI® Scheduler for jQuery

Description

How can I display only some of the options in the Repeat DropDownList in the Recurring Editor of the Kendo Scheduler?

Solution

  1. Subscribe to the edit event of the Scheduler.
  2. In the edit event handler get a reference to the Repeat DropDownList in the Recurrence Editor.
  3. Get the Repeat DropDownList data. Filter the needed values.
<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