day of week

[Isabelle Fuchs]

hi, in the schedule in the view "timelineMonth" the days of the week - Mo, Tue, We.... etc are not displayed - is there a way to get it?

in the "normal view" Month - it is shown.

thanks

Isabelle

[Ravikumar Venkatesan]

Hi Isabelle, 

Greetings from Syncfusion support. 

We have validated your requirement at our end. We have achieved your requirement with the help of the dateHeaderTemplate of the Schedule as shown in the below code. We have prepared a sample for your reference which can be available below. 

[App.vue] 

<template> 

  <div> 

    <div id="app"> 

      <div id="container"> 

        <ejs-schedule id="Schedule" :height="height" :width="width" :dateHeaderTemplate="dateHeaderTemplate"> 

          <e-views> 

            <e-view option="TimelineMonth"></e-view> 

          </e-views> 

        </ejs-schedule> 

      </div> 

    </div> 

  </div> 

</template> 

 

<script> 

import { SchedulePlugin, TimelineMonth, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule"; 

 

Vue.use(SchedulePlugin); 

 

var dateHeaderTemplateVue = Vue.component("dateHeaderTemplate", { 

  template: `<div><span>{{data.date.toDateString().slice(0, 3)}}</span><span>{{data.date.getDate()}}</span></div>`, 

  data() { 

    return { 

      data: {}, 

    }; 

  }, 

}); 

 

export default { 

  data() { 

    return { 

      width: "auto", 

      height: "600px", 

      dateHeaderTemplate: function (e) { 

        return { 

          template: dateHeaderTemplateVue, 

        }; 

      }, 

    }; 

  }, 

  provide: { 

    schedule: [TimelineMonth, Resize, DragAndDrop], 

  }, 

  methods: {}, 

}; 

</script> 

 

<style> 

.e-date-header div { 

  display: inline-grid !important; 

  width: -webkit-fill-available; 

  height: fit-content !important; 

  text-align: center; 

} 

</style> 

Sample: https://codesandbox.io/s/ej2-vue-schedule-customize-timeline-month-view-date-header-row-6xujw?file=/src/App.vue 

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

API(dateHeaderTemplate): https://ej2.syncfusion.com/vue/documentation/api/schedule/#dateheadertemplate 

Regards, 

Ravikumar Venkatesan 

[Isabelle Fuchs]

thanks for the help - i made it a little bit different - but now it works :-)

if (this.currentView === "TimelineMonth") {

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

ele.className = "templatewrap";

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

if (Feiertag) {

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

} else {

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

}

const days = CalenderHelper.getWeekdayNamesShort();

const day = args.date;

const weekday = days[day.getDay()];

ele.innerHTML = weekday + ".";

if (ele.innerHTML) {

const container = args.element as HTMLElement;

container.insertBefore(ele, container.children[0]);

[Nevitha Ravi]

Hi Isabelle, 

Thanks for your update. We are glad that our solution helped you, please get back to us if you need any further assistance. 

Regards, 

Nevitha