custom icon for a extra field in datasource.

[Tonathiu]

Good morning, 

Is there a was to create custom icons for a different field other than: 'Subject:', StartTime-EndTime,  Description and Location. As you can see below each field has assinged its own icon. We want to create an extra icon for a custom field. For example a field called 'Status' with a customized icon(bootstrap4). As seen in the image below you can see what i mean. We are using the readonly vue scheduler.

Thanks in advance.

Greetings

Our data structure looks somethink like this.

let msPerDay = 86400000;

let msPerHour = 3600000;

let currentTime = new Date().setMinutes(0, 0, 0);

let readonlyEventsData = [

  {

    Id: 1,

    Subject: 'Project Workflow Analysis',

    StartTime: new Date(currentTime + msPerDay * -2 + msPerHour * 2),

    Description: "TEst 2 ",

    Location: 'A',

    Status:'Status 1',

    EndTime: new Date(currentTime + msPerDay * -2 + msPerHour * 4),

    IsReadonly: true

  }, {

    Id: 2,

    Subject: 'Project Requirement Planning',

    StartTime: new Date(currentTime + msPerDay * -1 + msPerHour * 2),

    Description: "TEst 3 ",

    Location: 'B',

Status:'Status 2',

    EndTime: new Date(currentTime + msPerDay * -1 + msPerHour * 4),

    IsReadonly: true

  }, {

    Id: 3,

    Subject: 'Meeting with Developers',

    StartTime: new Date(currentTime + msPerDay * -1 + msPerHour * -3),

    Description: "TEst 4 ",

    Location: 'C',

Status:'Status 3',

    EndTime: new Date(currentTime + msPerDay * -1 + msPerHour * -1),

    IsReadonly: true

  }, {

    Id: 4,

    Subject: 'Team Fun Activities',

    StartTime: new Date(currentTime + msPerHour * -4),

    Description: "TEst 5 ",

    Location: 'D',

Status:'Status 4',

    EndTime: new Date(currentTime + msPerHour * -2),

    IsReadonly: true

  }

];

[Ravikumar Venkatesan]

Hi Tonathiu, 

Greetings from Syncfusion support. 

We have fulfilled your requirement by using popupOpen event for the same sample we prepared below. 

[App.vue] 

onPopupOpen: function(args) { 

      if (args.type === "QuickInfo" && args.target.classList.contains("e-appointment") && !isNullOrUndefined(args.data.Status)) { 

        let row = createElement("div", { className: "e-custom-row" }); 

        let iconDiv = createElement("div", { className: "e-custom-icon e-icons" }); 

        let statusDiv = createElement("div", { className: "e-custom-status" }); 

        statusDiv.innerText = args.data.Status; 

        row.appendChild(iconDiv); 

        row.appendChild(statusDiv); 

        let popupElement = args.element.querySelector(".e-popup-content"); 

        popupElement.appendChild(row); 

      } 

    } 

 

[index.html] 

    <style> 

      .e-quick-popup-wrapper .e-event-popup .e-custom-row { 

        color: #212529; 

        display: -ms-flexbox; 

        display: flex; 

        padding-top: 10px; 

      } 

 

      .e-quick-popup-wrapper .e-event-popup .e-custom-icon { 

        color: #495057; 

        font-size: 18px; 

        padding-right: 13px; 

        font-size: 16px; 

        padding: 2px 10px 0 0; 

      } 

 

      .e-quick-popup-wrapper .e-event-popup .e-custom-status { 

        color: #212529; 

        cursor: default; 

        font-size: 14px; 

      } 

 

      .e-quick-popup-wrapper .e-custom-icon::before { 

        content: "\e77d"; 

      } 

    </style> 

Sample: https://codesandbox.io/s/vue-schedule-quickinfo-popup-customization-n9vcz?file=/index.html 

UG (popupOpen event): https://ej2.syncfusion.com/vue/documentation/api/schedule/#popupopen 

UG (Steps to use icon library): https://ej2.syncfusion.com/vue/documentation/appearance/icons/#steps-to-use-icon-library 

Kindly try the above sample and get back to us If you would require further assistance. 

Regards, 

Ravikumar Venkatesan 

[Tonathiu]

Wonderful! Thank you as always for your support. 

[Vengatesh Maniraj]

Hi Tonathiu, 

You are most welcome. 

Please get in touch with us if you need any further assistance. 

Regards, 

Vengatesh