Is there a possible way to Drop a HTML Element to a Project/Appointment rendered on each date cell ?

Question

Hi,I need to drag and drop the external div element to a each appointment/project rendered on date cell and it should be droppable across each date cell's appintment !is there any way to do this ?I've also attached a image for your reference !ThanksAttachment: Capture_121c914b.zip

Nevitha Ravi · Accepted Answer

Hi Praveen, 

Greetings from Syncfusion Support. 

We have prepared a sample to meet your requirement ‘div on each date cell of the appointments’ using eventRendered event which can be viewed from the following link. 
https://stackblitz.com/edit/div-in-each-date-of-appointments?file=index.js  

 onEventRendered(event) { 
    const offsetWidth = parseInt(event.element.style.width.trim(), 10); 
    const cellWidth = this.scheduleObj.element.querySelector('.e-work-cells').offsetWidth; 
    const noOfDays = Math.ceil(offsetWidth / cellWidth); 
    for (var a = 0; a < noOfDays; a++) { 
      const resource = createElement('div', { className: 'e-resource', innerHTML: event.data.Subject[0], styles: `left:${cellWidth * a}px` }); 
      event.element.appendChild(resource); 
    } 
  } 

Please try the sample and get back to us if you need any further assistance. 

Regards, 
Nevitha