How to access resource data in quickInfo dialog when adding new event?

[Edward Butler]

When I click an empty cell to add a new event, the only values captured are StartTime, EndTime, IsAllDay and elementType. I need to capture the ID or name of the staff member (resource) in the column where the appointment is being created. How can I access this data?

[Vengatesh Maniraj]

Hi Edward, 

 

Greetings from Syncfusion Support. 

 

Based on the requirement, we have prepared below sample which displayed the resource details in quickInfoTemplate. 

Sample : https://stackblitz.com/edit/react-hokn7e-xgchqq?file=index.js 

API: https://ej2.syncfusion.com/react/documentation/api/schedule#quickinfotemplates 

Kindly try the above and revert us for further assistance with this. 

Regards, 

Vengatesh 

[Sudhanshu Jain]

Hi Syncfusion,

This above solution does not work. Still if we click on empty cell , resource id Or name is not coming in the data.How we can access empty cell data?

[Vengatesh Maniraj]

Hi Sudhanshu, 

Greetings from Syncfusion Support. 

We have validated your query that “how to get resource data when clicking on empty cell” at our end and we let you know that the scheduler does not pass the resource data while clicking on the empty cell. So we suggest you please use the popupOpen and popupClose events to get the resource details from the target element like the below code. 

onPopupOpen(props) { 

    if ( 

      props.type === "QuickInfo" && 

      props.target.classList.contains("e-work-cells") 

    ) { 

      var currentResourceIndex = parseInt( 

        props.target.getAttribute("data-group-index") 

      ); 

      var drowDownList = new DropDownList({ 

        dataSource: this.categoryData, 

        fields: { text: "text", value: "id" }, 

        placeholder: "Resource Name", 

        index: currentResourceIndex 

      });       

      drowDownList.appendTo(props.element.querySelector(".resourceName")); 

    } 

  } 

  onPopupClose(args) { 

    var selectedIndex = args.element.querySelector('.resourceName').ej2_instances[0].value; 

    var resourceId = this.categoryData[selectedIndex - 1].id; 

    args.data.ResourceId = resourceId; 

  } 

For the same, we have prepared the sample which is available in the below link. 

Sample: https://stackblitz.com/edit/react-hokn7e-ofpwnw?file=index.js 

Please check the above sample and get back to us for further assistance. 

Regards, 

Vengatesh