neuronetio / gantt-elastic

Gantt Chart [ javascript gantt chart, gantt component, vue gantt, vue gantt chart, responsive gantt, project manager , vue projects ]

Home Page:https://neuronet.io/gantt-elastic/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Question about date format in calendar row

nedia05 opened this issue · comments

First thanks for your project. I want to set the format of date in calendar like : "weekdays date in number". For example I want to see in calendar "Saturday 24" instead of "24 Saturday".
How I can do that? What property in with which component i should change? Thanks in advance for your answer.
Ps: i translate my dates in French this is why i want this format instead of the one you set in default calendar

Takie a look at this configuration


Just copy whole calendar property and paste it in your options.

Or better, copy just what you need.
Options are extended so you can choose what you want.
For example if you need just day format, make calendar object and inside put empty day object and copy inside only format property.

I just change the format include in day object to "dddd DD" in the src/GanttElastic.vue and it works.
Thanks for your answer

It's a bad idea to modify original source files.
Do it this way:

new Vue({
components:{ 'gantt-elastic': GanttElastic},
data:{
  tasks:[/* your tasks here */],
  dynamicStyle:{/* your style here */},
  options:{
    /* your other options here */
    calendar: {
      hour: {
        format: {
          long(date) {
            return date.format('HH:mm');
          },
          medium(date) {
            return date.format('HH:mm');
          },
          short(date) {
            return date.format('HH');
          }
        }
      },
      day: {
        format: {
          long(date) {
            return date.format('DD dddd');
          },
          medium(date) {
            return date.format('DD ddd');
          },
          short(date) {
            return date.format('DD');
          }
        }
      },
      month: {
        format: {
          short(date) {
            return date.format('MM');
          },
          medium(date) {
            return date.format("MMM 'YY");
          },
          long(date) {
            return date.format('MMMM YYYY');
          }
        }
      }
    },
  }
}
})