dateHeader

[Isabelle Fuchs]

i want to show the holidays the right site of the date - in month view and in Day view- and if possible also the date number should be red... but it is always UNDER the number:

in the day view i have: 

Fr

1

Staatsfeiertag (holiday in Austria)

but it should be: 

Fr

1 Staatsfeiertag

and in month view:

Mai 1

Staatsfeiertag

but it should be:

Mai 1 Staatsfeiertag

} else if (args.elementType === "dateHeader") {

const Feiertag = this.getFeiertag(args.date);

// let ele = document.createElement("div", {

// innerHTML:any = Feiertag,

// className:String = 'holiday-text'

// });

// (args.element).appendChild(ele);

const ele = document.createElement("div");

ele.style.cssText = "color: red;";

// const FTText = this.getFeiertag(args.date)

ele.innerHTML = this.getFeiertag(args.date);

if (ele.innerHTML) {

args.element.appendChild(ele);

}

}

}

[Ravikumar Venkatesan]

Hi Isabelle, 

  

Greetings from Syncfusion support. 

  

We have validated your reported query “i want to show the holidays the right site of the date - in month view and in Day view” at our end. We have achieved your requirement with the help of the renderCell event with the below code. We have prepared a sample for your reference and it can be available below. 

  

[App.vue] 

    onRenderCell: function(args) { 

      var isValidElement = args.elementType === "dateHeader" || args.elementType === "monthCells"; 

      if (isValidElement && args.date.getTime() === holiday.getTime()) { 

        var element = args.element.querySelector(".e-navigate"); 

        var resultText = element.innerText + " Staatsfeiertag"; 

        element.innerText = resultText; 

        element.classList.add("e-holiday"); 

      } 

  

[index.html] 

    <style> 

      .e-holiday { 

        color: #c4504d; 

      } 

    </style> 

  

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

  

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

  

API (renderCell event): https://ej2.syncfusion.com/vue/documentation/api/schedule/#rendercell 

  

Regards, 

Ravikumar Venkatesan 

[Isabelle Fuchs]

thanks - worked!

[Vengatesh Maniraj]

Hi Isabelle, 

You are most welcome. 

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

Regards, 

Vengatesh