Hi Drew,
Greetings from Syncfusion support.
Based on your requirement we have prepared the below sample with the help of popupOpen event.
Adding custom button to the Editor window
Step 1: Bind the popupOpen event to the Schedule like the below code.
|
render() {
return (<div className='schedule-control-section'>
<div className='col-lg-12 control-section'>
<div className='control-wrapper'>
<ScheduleComponent width='100' height='650px' selectedDate={new Date(2018, 1, 15)} ref={t => this.scheduleObj = t} eventSettings={{ dataSource: this.data }} popupOpen={this.onPopupOpen.bind(this)}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]}/>
</ScheduleComponent>
</div>
</div>
</div>);
} |
Step 2: Use the below code in the popupOpen event to add custom buttons to the editor window.
[index.js]
|
onPopupOpen(args) {
if(args.type === 'Editor') {
// Fetching editor dialog object
let dialogObj = document.querySelector('.e-schedule-dialog').ej2_instances[0];
// Fetching the fotter element of the editor window
let footer = dialogObj.element.querySelector('.e-footer-content');
// Creting the button element
let btnElement = createElement("BUTTON", {innerHTML: "Custom Button"});
// Creting the button object
let buttonObj = new Button();
// Appeding the button object to the button element
buttonObj.appendTo(btnElement);
// Appendig the creted button to the footer of the editor window.
footer.appendChild(btnElement);
// Binding the evnet to the custom button element
buttonObj.element.onclick = () => alert('Custom button click');
}
} |
Hiding default editor window buttons
You can hide the default editor window buttons with help of CSS style like below.
[index.css]
|
.e-event-save, .e-event-delete {
display: none;
} |
Kindly try the above sample and get back to us If you would require further assistance.
Regards,
Ravikumar Venkatesan
