Hello,
Please refer to this stack blitz demo based on Customization of Editot
Need to open below custom Scheduler Form with default Recurrence Rule UI when user clicks on the button "New Schedule" .
When trying to add a recurrence Rule component, it gives the below error. (Please check commented code into custom-form-editor.tsx file
Thanks
1 Answer, 1 is accepted
Hello Casey,
Due to a recent breaking change in the Scheduler, currently it is not possible to access the default recurrence editor. We have logged issue with high priority where you can follow its progress:
Meanwhile you can use version 6.1.1 of the Scheduler and the approach demonstrated in the following KB article (the example in the KB article works with version 6.1.1 of the Scheduler);
Please excuse us for any inconvenience caused by this.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 1
Hello,
Thanks for your reply.
I can fix the issue for Recurrence Component integration in custom form using the 6.1.1 version.
Please let me know how to open a new Event dialog when the user clicks on the "New Schedule " button
Please update this Stackblitz Demo
The dialog save button should add a new event in the scheduler.
Thanks
Hi Casey,
Although that there is no built-in option for opening the form programmatically, you can get reference to an element of a slot and dispatch a dblclick event for it, which will open the custom form.
I have modified the example to demonstrate this approach:
Hope this helps.
Rank 1
Our business needs to implement form Wizard in Add/Edit Item Dialog. there is no documentation to customize the save and cancel button.
How to remove the default Save and Cancel button and add a custom Form Wizard with validation.
Please update last stack blitz demo
Hi Casey,
For customizing the entire Dialog you will have to provide custom Form with custom Dialog:
You can take a look at the SchedulerFormProps that you can use within the custom form for creating its content:
Rank 1
In your Demo custom-form-dialog.jsx, there are formcontent props which is not valid props for DialogProps type .
Also, there are no props to hide the Save and cancel buttons in SchedulerFormProps.
Also on your demo, the pop-up is not closing while clicking on the close Icon.
Please provide a fully working demo with the TSX file in this Demo
Thanks
Hi Casey,
You can either use "any" or define custom type for the custom Dialog:
export const CustomFormDialog = (props: CustomDialogProps) => {As for removing the item you can use the onClose event of the Dialog component:
export const CustomFormDialog = (props) => {
const editItemProps = useSchedulerEditItemPropsContext();
const [, setRemoveItem] = useSchedulerEditItemRemoveItemContext();
const [, setFormItem] = useSchedulerEditItemFormItemContext();
const [, setShowRemoveItemDialog] =
useSchedulerEditItemShowRemoveDialogContext();
const onClose = () => {
// Sets the item to be removed
setRemoveItem(editItemProps.dataItem);
// Closes the form
setFormItem(null);
// Shows the remove confirmation dialog
setShowRemoveItemDialog(true);
};
const Title = <React.Fragment>{props.title} </React.Fragment>;
return (
<Dialog {...props} title={Title} onClose={onClose}>
{props.formContent}
</Dialog>Hope this helps.