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
- Subscribe to the
edit
event of the Scheduler - Select the button instances of the Recurrence editor's ButtonGroup with jQuery
-
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:
- Get the
data
of Recurrence editor's DropDownList widget - Get the
dataSource
of the of the DropDownList - Use
filter
to return only the desired recurrence options - 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>