We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Scheduler component highlight event when we drop any activity

Thread ID:





143905 Apr 10,2019 06:24 AM UTC Apr 22,2019 01:29 PM UTC React - EJ 2 7
Tags: Schedule
Sonam Diwate
Asked On April 10, 2019 06:24 AM UTC

Scheduler component highlight event when we drop any activity
I want to achieve below view in scheduler.
When user drop any activity I am making it selected, but I want to select whole row and related column of event. 
Please help me to add this functionality

Karthigeyan Krishnamurthi [Syncfusion]
Replied On April 11, 2019 10:21 AM UTC

Hi Sonam, 
Greetings from Syncfusion. 
We have prepared the below sample to highlight the event dropped row using dragStop event. 
tr.hoverTable td.e-work-cells, 
tr.hoverTable td.e-work-cells.e-work-hours, 
tr.hoverTable td.e-work-cells.e-alternate-cells, 
tr.hoverTable td.e-work-cells.e-alternate-cells.e-work-hours { 
    background-color: #deeeac !important; 
    border: 1px solid #deeeac !important; 
onDragStop(args) { 
       let trElement = this.scheduleObj.element.querySelector('.hoverTable'); 
        if (trElement) { 
            removeClass([trElement], 'hoverTable'); 
      var element = args.event.target; 
      var cellDetail = this.scheduleObj.getCellDetails(element); 
      var rows = this.scheduleObj.getTableRows(); 
      var currentRow = rows[cellDetail.groupIndex]; 
       addClass([currentRow], 'hoverTable'); 

Sonam Diwate
Replied On April 11, 2019 01:43 PM UTC

Thanks for the quick reply.
But In my case we are adding new resource dynamically, and then we need to highlight that resource. So when I am using this example to shows for some time then reset to default as scheduler get re-render again. So do we have any event where we can add this logic.

Vinitha Devi Murugan [Syncfusion]
Replied On April 12, 2019 05:44 PM UTC

Hi Sonamric, 
We have prepared the sample as per your requirement, Which can be viewed from the below link.  
Kindly check the above sample and revert us with further details, if we have misunderstood your requirement or else if you need any further assistance on this. 
M.Vinitha devi. 

Sonam Diwate
Replied On April 16, 2019 10:31 AM UTC

Could you please share POC for vertical line also as shown below:

Nevitha Ravi [Syncfusion]
Replied On April 17, 2019 01:01 PM UTC

Hi Sonamric, 

Thanks for your update. 

We have modified our previously shared sample as per your shared screenshot which can be viewed from the following link. 

onDragStop(args) { 
    var borderRows = this.scheduleObj.element.querySelectorAll('.hoverTable'); 
    borderRows.forEach(function (row) { removeClass([row], 'hoverTable'); }); 
    var rows = this.scheduleObj.getTableRows(); 
    var resource = this.scheduleObj.element.querySelectorAll('.e-resource-column-wrap tr'); 
    var rowIndex = this.scheduleObj.eventBase.getGroupIndexFromEvent(args.data); 
    var resourceRow = resource[rowIndex]; 
    var workCellsRow = rows[rowIndex]; 
    addClass([resourceRow, workCellsRow], 'hoverTable'); 
    this.appRow = args.data.CalendarId; 

tr.hoverTable td { 
    border-top: 1px solid red !important; 
    border-bottom: 1px solid red !important; 
tr.hoverTable td:first-child { 
   border-left: 1px solid red !important; 
tr.hoverTable td:last-child { 
   border-right: 1px solid red !important; 


Sonam Diwate
Replied On April 19, 2019 02:22 PM UTC

Here in my case onDragStop is not getting trigger as I am using
nodeDragStop event is getting triggered.

Basically my requirement is to draw vertical blue line on event in scheduler. which will expand till end

Nevitha Ravi [Syncfusion]
Replied On April 22, 2019 01:29 PM UTC

Hi Sonamric, 

Thanks for your update. 

We have ported the customization done in dragStop event to nodeDragStop event and the sample can be viewed from the following link. 

onTreeDragStop(event) { 
    let treeElement = closest(event.target, '.e-treeview'); 
    let classElement = this.scheduleObj.element.querySelector('.e-device-hover'); 
    if (classElement) { 
    if (!treeElement) { 
      event.cancel = true; 
      let scheduleElement = closest(event.target, '.e-content-wrap'); 
      if (scheduleElement) { 
        let treeviewData = this.treeObj.fields.dataSource; 
        if (event.target.classList.contains('e-work-cells')) { 
          const filteredData = treeviewData.filter((item) => item.Id === parseInt(event.draggedNodeData.id, 10)); 
          let cellData = this.scheduleObj.getCellDetails(event.target); 
          let resourceDetails = this.scheduleObj.getResourcesByIndex(cellData.groupIndex); 
          let eventData = { 
            Name: filteredData[0].Name, 
            StartTime: cellData.startTime, 
            EndTime: cellData.endTime, 
            IsAllDay: cellData.isAllDay, 
            Description: filteredData[0].Description, 
            CalendarId: resourceDetails.resourceData.CalendarId 
          this.scheduleObj.openEditor(eventData, 'Add', true); 
          this.target = event.target; 
          this.flag = true; 
          this.isTreeItemDropped = true; 
          this.draggedItemId = event.draggedNodeData.id; 



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon