Display single resource on Timeline

Question

I have two resources on my schedule: Project and Person. I want both of them to show up on the pop up editor. But I only want the Project to show up on the groupings for the Timeline. Is that possible?

Hareesh Balasubramanian · Accepted Answer

Hi Christian, 

Greetings from Syncfusion Support..! 

Based on your shared requirement, we can achieve your scenario by rendering the single level resources for the Scheduler and we need to maintain the second level of resource as custom field for the Scheduler events. You can add that custom field in the editor window using popupOpen event of the Scheduler. And for the same, we have prepared a sample which can be viewed from the following link. 

Sample: https://codesandbox.io/s/vue-resources-customized-sample-e6xxx 
UG link: https://ej2.syncfusion.com/vue/documentation/schedule/editor-template/#add-additional-fields-to-the-default-editor 





    onPopupOpen: function (args) { 
      if (args.type === "Editor") { 
        // Create required custom elements in initial time 
        if (!args.element.querySelector(".custom-field-row")) { 
          let row = createElement("div", { className: "custom-field-row" }); 
          let formElement = args.element.querySelector(".e-schedule-form"); 
          formElement.firstChild.insertBefore( 
            row, 
            args.element.querySelector(".e-title-location-row") 
          ); 
          let container = createElement("div", { 
            className: "custom-field-container", 
          }); 
          let inputEle = createElement("input", { 
            className: "e-field", 
            attrs: { name: "Employee" }, 
          }); 
          container.appendChild(inputEle); 
          row.appendChild(container); 
          var dropDownList = new DropDownList({ 
            dataSource: [ 
              { text: "Nancy", value: "Nancy" }, 
              { text: "Steven", value: "Steven" }, 
              { text: "Robert", value: "Robert" }, 
              { text: "Smith", value: "Smith" }, 
            ], 
            fields: { text: "text", value: "value" }, 
            value: "", 
            floatLabelType: "Always", 
            placeholder: "Employee", 
          }); 
          dropDownList.appendTo(inputEle); 
          inputEle.setAttribute("name", "Employee"); 
        } 
      } 
    }, 

Note: You can get the two resources fields inside the editor by maintaining the empty array for the group property but the appearance of the Scheduler will look like a default scheduler. And for further reference, kindly refer to the below online sample link, 
https://ej2.syncfusion.com/vue/demos/#/material/schedule/resource.html 

Kindly try the above solution and get back to us if you need any further assistance. 

We will happy to assist you..! 

Regards, 
Hareesh