How to open the editor after selecting the group of cells like Google?

This article explains how to open the editor after selecting a group of cells, similar to Google.

Step 1: Create a React Scheduler by referring to the following user guide link.

https://ej2.syncfusion.com/react/documentation/schedule/getting-started/

Step 2: Bind and un-bind the mouseup event in componentDidMount and componentWillUnmount as shown in the following code example.

componentDidMount() {
    document.addEventListener('mouseup', this.mouseupHandler.bind(this));
  }
  componentWillUnmount() {
    document.removeEventListener('mouseup', this.mouseupHandler.bind(this));
  }

Step 3: In the mouseupHandler function, the start and end times of the selected cells can be retrieved using the getCellDetails function, which is then passed to the openEditor function to open the editor, as shown in the following code example.

mouseupHandler(e: any) {
    let sch: any = ((document.querySelector('.e-schedule')) as any).ej2_instances[0];
    var target = e.target.classList.contains('e-work-cells');
    var selectedCells = sch.element.querySelectorAll(".e-selected-cell");
    if (selectedCells.length > 1 && target) {
      var activeCellsData = sch.getCellDetails(sch.getSelectedElements());
      sch.openEditor(activeCellsData, 'Add');
    }
  }

Step 4: Run the sample. Once the mouse is released after selecting a group of cells, the editor will open as shown below.

                      Figure 1: Editor window opened after selecting the group of cells.

Please refer to the example from the following GitHub link: Open editor after selecting cells