Is there a way to remove the "repeat every" option when creating recurring schedules

Question

Hi,

I am using the schedule control and when creating recurring events I would like to remove the abiolity for a user to use the "Repeat every" (Day(s), Week(s),Month(s)) options. Is there a way to target and remove that element? Thanks!

I currently have it in my html as.

<tr> 
    <td colspan="4"> 
        <div id='RecurrenceEditor'></div> 
    </td> 
</tr>

Vengatesh Maniraj · Accepted Answer

Hi Daniel, 

Greetings from Syncfusion Support. 

We can remove the repeat every option by overriding the below CSS class. 

.e-interval { 
    display: none; 
} 

For your reference, we have prepared the sample for this changes that can be available in the below link. 

Sample: https://stackblitz.com/edit/anfjbi?file=index.html 

Regards, 
Vengatesh

Daniel Brown · Answer

Hi,Thanks for the reply. That worked. I had tried that several times in the past and never worked so not sure what changed now. One last thing related to this, I'm trying to hide the monthly 'Repeat on day x' for instance I dont want them to be able to repeat on a specific day each month, only a specific dayPos e.g first tuesday.So I used:.e-month-expand-wrapper > tbody > tr:first-child {   display: none;}Which works fine but when monthly is selected the hidden radio button is still the default selected button and the user can still use its defaults by hitting save before checking the dayPos radio button. Is there a nice clean way you know of to have it default select the DayPos radio button instead of the now hidden radion button? Thanks!

Vengatesh Maniraj · Answer

Hi Daniel,

Thanks for the update.

We checked the reported issue at our end but unfortunately, we could not replicate this issue. We applied the styles that you shared and it could be working fine. Could you please check the below image and sample?

Style:

<style>

body {

touch-action: none;

}

.e-interval {

display: none;

}

.e-month-expand-wrapper>tbody>tr:first-child {

display: none;

}

</style>

Sample: https://stackblitz.com/edit/anfjbi-ujizxk?file=index.html

Kindly check the above sample and if you still face the problem kindly replicate the issue in the above sample.

Regards,

Vengatesh

Daniel Brown · Answer

Hmm thats weird that it works on your end. I have the same css. I have edited the sample with the way mine is set up unfortunately I do not know typescript so the function broke. But I use a template for the editor that I also included in the sample if you are able to see it. Below is how mine appears. function onPopupOpen(args) { if (args.type === 'Editor') { var startElement = args.element.querySelector('#StartTime'); if (!startElement.classList.contains('e-datetimepicker')) { new ej.calendars.DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement); } var endElement = args.element.querySelector('#EndTime'); if (!endElement.classList.contains('e-datetimepicker')) { new ej.calendars.DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement); } var recurElement = args.element.querySelector('#RecurrenceEditor'); if (!recurElement.classList.contains('e-recurrenceeditor')) { recurrObject = new ej.schedule.RecurrenceEditor({ }); recurrObject.appendTo(recurElement); scheduleObj.eventWindow.recurrenceEditor = recurrObject; scheduleObj.eventWindow.recurrenceEditor.frequencies = ['none', 'daily', 'weekly', 'monthly']; } var callsignElement = args.element.querySelector('#Callsign'); callsignElement.value = self.stationSchedules().find(x => x.ChannelID === args.data.ChannelID).CallSign; var channelIDElement = args.element.querySelector('#ChannelID'); channelIDElement.value = Number(args.data.ChannelID); } }var scheduleObj = new ej.schedule.Schedule({ allowKeyboardNavigation: false, readonly: !self.isEditable(), selectedDate: new Date(), views: ['Day', 'WorkWeek', 'Week'], currentView: 'Day', popupOpen: onPopupOpen, actionFailure: onActionFailure, editorTemplate: '#EventEditorTemplate' });Attachment: Untitled_f6c9ca6d.zip

Vengatesh Maniraj · Answer

Hi Daniel, 
 
Thanks for the update. 
 
We checked the shared code snippet by you and found the cause for this problem is that you have used the custom template for the editor window. And, we have modified the popupOpen event functionality to achieve your requirement. Please find the below code snippet. 
 
function onPopupOpen(args) { 
  if (args.type === "Editor") { 
      var dialog = args.element.ej2_instances[0]; 
      dialog.open = function() { 
        document.querySelector('.e-month-expander-wrapper').ej2_instances[0].checked = true 
      }; 
    var startElement = args.element.querySelector("#StartTime"); 
    if (!startElement.classList.contains("e-datetimepicker")) { 
      new ej.calendars.DateTimePicker( 
        { value: new Date(startElement.value) || new Date() }, 
        startElement 
      ); 
    } 
 
    var endElement = args.element.querySelector("#EndTime"); 
    if (!endElement.classList.contains("e-datetimepicker")) { 
      new ej.calendars.DateTimePicker( 
        { value: new Date(endElement.value) || new Date() }, 
        endElement 
      ); 
    } 
 
    var recurElement = args.element.querySelector("#RecurrenceEditor"); 
    if (!recurElement.classList.contains("e-recurrenceeditor")) { 
      recurrObject = new ej.schedule.RecurrenceEditor({}); 
      recurrObject.appendTo(recurElement); 
      scheduleObj.eventWindow.recurrenceEditor = recurrObject; 
      scheduleObj.eventWindow.recurrenceEditor.frequencies = [ 
        "none", 
        "daily", 
        "weekly", 
        "monthly" 
      ]; 
    } 
 
    var callsignElement = args.element.querySelector('#Callsign'); 
    callsignElement.value = self.stationSchedules().find(x => x.ChannelID === args.data.ChannelID).CallSign; 
 
    var channelIDElement = args.element.querySelector("#ChannelID"); 
    channelIDElement.value = Number(args.data.ChannelID); 
  } 
} 
 
For your reference, we have prepared the sample that can be available in the below link. 
 
Sample: https://stackblitz.com/edit/4a3eli-fhvbrf?file=index.js 

Please try the above solution and get back to us if you need any further assistance. 

Regards, 
Vengatesh

Daniel Brown · Answer

That worked great! Thanks!

Vengatesh Maniraj · Answer

Hi Daniel, 

You are most welcome. 

Please get in touch with us if you need any further assistance. 

Regards, 
Vengatesh

Hari · Answer

How to remove never in End (Repeat)

Vengatesh Maniraj · Answer

Hi Hari,Greetings from Syncfusion Support.We have checked your requirement “We need to remove the
"never" list from the End drop-down” and we can achieve
your requirement by modifying the data source of the dropdown list. Here we
have used the popupOpen event to modify the datasource like the below code.functiononPopupOpen(args) {  if (args.type === 'Editor') {    varrecurElement = document.querySelector('.e-recurrenceeditor');    varendList = recurElement.ej2_instances[0].endType.dataSource;    if (endList.length === 3) {      varnewDatasource = [        { text:'Until', value:'until' },        { text:'Count', value:'count' },      ];      recurElement.ej2_instances[0].endType.dataSource = newDatasource;    }  }Sample: https://stackblitz.com/edit/4a3eli-fhvbrf?file=index.js
Kindly try the above solution and get back to us if you need any
further assistance.Regards,Vengatesh