Change click and drag accross multiple days behaviour.

[Jake Bleazby]

I'm transitioning from Full Calendar to Syncfusion and am trying to replicate our existing behaviour (see gifs for my work so far).

If I click 10am Monday and drag right I want it to select 10am Monday and 10am Tuesday, creating two appointments. Currently it selects every timeslot between those two times creating 49 appointments. How do I change this behaviour?

On a potentially related note, I am required to press Enter after a selection. Is there a way to skip this button press? I guess what I need is access to the click drag event itself and not the appointment creation function.  

Attachment: gifs_a41b7b03.zip

[Swathi Ravi]

Hi Jake,

If I click 10am Monday and drag right I want it to select 10am Monday and 10am Tuesday, creating two appointments. Currently it selects every timeslot between those two times creating 49 appointments. How do I change this behaviour?

We would like to let you know that this is the default behaviour of the current Scheduler architecture. If you want to select specific cells, you can achieve it in the Schedule’s cellClick event, as seen in the shared excerpt below. Select the desired cells with the Ctrl + Click action, and then click the button to add appointments to all the selected cells.

Sample: https://stackblitz.com/edit/react-multi-cells-selcted-using-ctrl-key?file=index.css,index.js

Api: https://ej2.syncfusion.com/react/documentation/api/schedule/#cellclick

[index.js]

let selectedElements = [];

  let cellDetails = [];

  let eventCollection = [];

 

function onCellClick(args) {

    if (args.event.ctrlKey) {

      args.cancel = true;

      args.element.style.background = 'yellow'; // Add styles directly to the element

      addClass([args.element], 'custom-class'); // add dummy class to selected element for reference

      selectedElements.push(args.element);

      cellDetails.push(args);

    } else {

      args.element.style.background = ''; // empty the style

      removeClass(selectedElements, 'custom-class'); // remove the selected element based on dummy class

      eventCollection = [];

      cellDetails = [];

      selectedElements = [];

    }

  }

 

 function onAdd() {

    let id = scheduleObj.getEventMaxID();

    for (let i = 0; i < cellDetails.length; i++) {

      let cellData = cellDetails[i];

      let eventData = {

        Id: id + 1,

        StartTime: cellData.startTime,

        EndTime: cellData.endTime,

        IsAllDay: cellData.isAllDay,

      };

      eventCollection.push(eventData);

      id++;

    }

    scheduleObj.addEvent(eventCollection); //adding events to the scheduler

    removeClass(selectedElements, 'custom-class'); //remove class to unset the background

    //empty the variables once added

    eventCollection = [];

    cellDetails = [];

    selectedElements = [];

  }

  return (<div className='schedule-control-section'>

    <div className='col-lg-12 control-section'>

      <div className='control-wrapper'>

        <button onClick={onAdd.bind(this)}>Click to add appointment</button>

        <ScheduleComponent ref={t => scheduleObj = t} allowMultiCellSelction={true} eventSettings={{ dataSource: data }} cellClick={onCellClick.bind(this)}>

        </ScheduleComponent>

      </div>

    </div>

  </div>);

}

Regards,

Swathi Ravi

[Jake Bleazby]

I am happy to adopt non-default behaviour.
Is there a way to get or set the list of cells that have been selected?
Can I access the mouse 1 release event that signals the end of a click and drag operation?

Failing that, can I separately style the cells that have, and haven't, been selected. I am happy to make the selected cells indistinguishable from non selected cells, and then use the start and end times to produce appointments as per my desired behaviour (which I can already do). This fallback solution would be even better if I could make it appear as if the cells I want selected are selected by programmatically turning those cells grey. 

[Swathi Ravi]

Jake,

Is there a way to get or set the list of cells that have been selected?

You can get all selected cells in the Schedule’s select event.

Api: https://ej2.syncfusion.com/react/documentation/api/schedule#select

Can I access the mouse 1 release event that signals the end of a click and drag operation?

The Schedule’s popupOpen event will trigger after the end of a click and drag operation.

Api: https://ej2.syncfusion.com/react/documentation/api/schedule#popupopen

This fallback solution would be even better if I could make it appear as if the cells I want selected are selected by programmatically turning those cells grey. 

We guess you want to dynamically choose the cells and apply the grey color to the selected cells. You may accomplish this by selecting the cell and adding the e-selected-cell class to the selected; when this class is added, the grey color is applied to the selected cell, as demonstrated in the shared excerpt below.

Sample: https://stackblitz.com/edit/react-schedule-dynamically-select-cellsreact?file=index.js

[index.js]

 function onCellSelctClick() {

      var date = new Date(scheduleObj.selectedDate).getTime();

      var element = document.querySelector(`[data-date="${date}"]`);

      element.classList.add('e-selected-cell');

    }

    function onCellDeSelctClick() {

      var date = new Date(scheduleObj.selectedDate).getTime();

      var element = document.querySelector(`[data-date="${date}"]`);

      element.classList.remove('e-selected-cell');

    }

    return (<div className='schedule-control-section'>

      <div className='col-lg-12 control-section'>

        <div className='control-wrapper'>

          <button onClick={onCellSelctClick.bind(this)}>Select Cell</button>

          <button onClick={onCellDeSelctClick.bind(this)}>DeSelect Cell</button>

          <ScheduleComponent width='100%' height='650px' selectedDate={new Date(2021, 1, 15, 11, 0, 0)} ref={t => scheduleObj = t} >

          </ScheduleComponent>

        </div>

      </div>

    </div>);

}