How to add attachments to event

[Madhukar]

I have a requirement to add attachments to events as I send the invite across. What is the best way to achieve this enhancement from the standard template?

[Hareesh Balasubramanian]

Hi Madhukar, 

Greetings from Synfusion Support..! 

We have prepared a sample based on your shared query “I have a requirement to add attachments to events” using eventTemplate property and actionBegin, popupOpen events of the Scheduler and in that we have used the File Uploader component as an additional field for adding the attachments for the scheduler events and the sample can be viewed from the following link. 

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

  onPopupOpen(args) { 

    if (args.type === "Editor") { 

      if (!args.element.querySelector(".custom-field-row")) { 

        var row = new createElement("div", { 

          className: "custom-field-row" 

        }); 

        var formElement = args.element.querySelector(".e-schedule-form"); 

        formElement.firstChild.insertBefore( 

          row, 

          args.element.querySelector(".e-title-location-row") 

        ); 

        var container = new createElement("div", { 

          className: "custom-field-container" 

        }); 

        var uploaderEle = new createElement("input", { 

          id: "EventType", 

          attrs: { name: "UploadFiles", type: "file" } 

        }); 

        container.appendChild(uploaderEle); 

        row.appendChild(container); 

 

        var uploadObj = new Uploader({ 

          asyncSettings: { 

            saveUrl: "https://ej2.syncfusion.com/services/api/uploadbox/Save", 

            removeUrl: 

              "https://ej2.syncfusion.com/services/api/uploadbox/Remove" 

          } 

        }); 

        uploadObj.appendTo(uploaderEle); 

      } 

      var uploaderObj = document.getElementById("EventType").ej2_instances[0]; 

      if (typeof args.data.EventType != "undefined") { 

        uploaderObj.clearAll(); 

        var data = args.data.EventType.split("."); 

        var preloadFiles = [{ name: data[0], size: 500000, type: data[1] }]; 

 

        uploaderObj.files = preloadFiles; 

      } else { 

        uploaderObj.clearAll(); 

      } 

    } 

  } 

   

  eventTemplate(props) { 

    return ( 

      <div> 

        <div className="subject">Subject : {props.Subject}</div> 

        <div className="time"> 

          Time: {this.getTimeString(props.StartTime)} -{" "} 

          {this.getTimeString(props.EndTime)} 

        </div> 

        <div class="uploadedData">Attachment : {props.EventType}</div> 

      </div> 

    ); 

  } 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Hareesh