RecurrenceConfirmationPopup
A confirmation dialog shown when modifying a recurring event or some of its occurrences. For recurring events, the dialog informs the user that the change will be applied to all occurrences.
For occurrences, the dialog lets the user choose if the change should affect all future occurrences, or this occurrence only.
//<code-header>
fiddle.title = 'Recurrence confirmation popup';
//</code-header>
const
eventRecord = new EventModel({
id : 1,
name : 'Every other week',
startDate : '2018-01-01',
duration : 3,
recurrenceRule : 'FREQ=WEEKLY;INTERVAL=2'
}),
confirmation = new RecurrenceConfirmationPopup({
rootElement : document.body,
bbar : {
items : {
// Disable button
changeSingleButton : {
disabled : true
}
}
}
});
new Button({
appendTo : targetElement,
text : 'Click to show recurrence dialog',
onClick() {
confirmation.confirm({
eventRecord,
actionType : 'delete'
});
}
});Built-in widgets and buttons
The Popup does not contain any built-in widgets, but it has built-in buttons in the toolbar that you can customize:
| Widget ref | Type | Weight | Description |
|---|---|---|---|
changeSingleButton |
Button | 100 | Change a single event in a recurring sequence |
changeMultipleButton |
Button | 200 | Change all future events in a recurring sequence |
cancelButton |
Button | 300 | Cancel |
Usage example:
const confirmation = new RecurrenceConfirmationPopup({
bbar : {
items : {
// Disable button
changeSingleButton : {
disabled : true
}
}
}
});
confirmation.confirm({
eventRecord : recurringEvent,
actionType : "delete",
changerFn : () => recurringEvent.remove(event)
});
Configs
120
Configs
120Common
Content
CSS
DOM
Float & align
Layout
misc
Misc
Other
Scrolling
Properties
101
Properties
101Class hierarchy
Other
Reference to the cancel button, if used
Reference to the "Apply changes to multiple occurrences" button, if used
Reference to the button that causes changing of the event itself only, if used
CSS
DOM
Layout
Misc
State
Widget hierarchy
Functions
81
Functions
81Other
Displays the confirmation.
This function is async, and awaitable, resolving only when the process has been either completed or canceled Usage example:
const popup = new RecurrenceConfirmationPopup();
await popup.confirm({
eventRecord,
actionType : "delete",
changerFn : () => eventStore.remove(record)
});
Toast.show('Event deleted');
| Parameter | Type | Description |
|---|---|---|
config | Object | The following config options are supported: |
config.eventRecord | EventModel | Event being modified. |
config.actionType | update | delete | Type of modification to be applied to the event. Can be either "update" or "delete". |
config.changerFn | function | A function that should be called to apply the change to the event upon user choice. |
config.thisObj | function |
|
config.cancelFn | function | Function called on |
true if the operation has been completed either way, false if the operation was canceled.
Handler for cancel button.
It calls cancelFn provided to confirm call and then hides the dialog.
Handler for "Apply changes to multiple occurrences" button. It calls processMultipleRecords and then hides the dialog.
Handler for the button that causes changing of the event itself only. It calls processSingleRecord and then hides the dialog.
Applies changes to multiple occurrences as reaction on "Apply changes to multiple occurrences" button click.
Applies changes to a single record by making it a "real" event and adding an exception to the recurrence. The method is called as reaction on clicking the button that causes changing of the event itself only.