Custom editor window

[Rethabile Mahase]

I am trying to create a custom editor window for the schedule such that when I click on a cell, a custom window with my custom CSS styling is opened. The editorTemplate does not have enough flexibility for full customization. How can I go about doing this

[Ashokkumar Karuppasamy]

Hi Rethabile Mahase,

You can achieve your requirement by using the schedule component popupOpen event. If the event uses the default editor window, set args.cancel to true to prevent it and use your customized dialog as needed. The attached code snippet and sample demonstration solution are provided below. Please try this solution and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/react-dglapc-y7ex4c?file=index.js

[index.js]

  const onPopupOpen = (args) => {

    if (args.type == 'Editor') {

      args.cancel = true;

      alert('You can use your custimize window')

    }

  };

  const [currentView, setCurrentView] = useState('Week');

  return (

    <div className="schedule-control-section">

      <div className="col-lg-9 control-section">

        <div className="control-wrapper">

          <ScheduleComponent

            width="100%"

            height="650px"

            ref={scheduleObj}

            selectedDate={new Date(2021, 1, 15)}

            popupOpen={onPopupOpen}

            eventSettings={{ dataSource: data }}

            currentView={currentView}

          >

 

Regards,
Ashok