Scheduler component highlight event when we drop any activity

[Sonam Diwate]

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]

Hi Sonam, 

 

Greetings from Syncfusion. 

 

We have prepared the below sample to highlight the event dropped row using dragStop event. 

https://stackblitz.com/edit/react-atvja5-pmwemq?file=index.css 

 

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'); 

    } 

 

 

 

Regards, 

Karthi 

[Sonam Diwate]

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]

Hi Sonamric, 

 

We have prepared the sample as per your requirement, Which can be viewed from the below link.  

  

https://stackblitz.com/edit/react-okvuac-xt9xsd?file=index.js 

 

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. 

 

Regards, 

M.Vinitha devi. 

[Sonam Diwate]

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

[Nevitha Ravi]

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. 

https://stackblitz.com/edit/react-okvuac-bzryaj?file=index.js  

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; 

} 

Regards, 

Nevitha 

[Sonam Diwate]

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]

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. 

https://stackblitz.com/edit/react-okvuac-xqapth?file=index.js 

onTreeDragStop(event) { 

    let treeElement = closest(event.target, '.e-treeview'); 

    let classElement = this.scheduleObj.element.querySelector('.e-device-hover'); 

    if (classElement) { 

      classElement.classList.remove('e-device-hover'); 

    } 

    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; 

        } 

      } 

    } 

  } 

Regards, 

Nevitha