How to add "day of week" to the time header day

Asked by Vincent
2 years ago.

I currently have a calendar that is set to show by the day but I was wondering what the best way to also add the day of the week just below the day number. for example, if the date was Tuesday January 23rd, I would like that date to show as 23 with “Tue” just under it in a smaller font.

how-to javascript

Answer posted by Dan Letecky [DayPilot]
2 years ago.

You can customize the calendar column headers using the onBeforeHeaderRender event handler:

const calendar = new DayPilot.Calendar("calendar", {
  // ...
  headerHeight: 50,
  onBeforeHeaderRender: args => {
      const date = args.header.start.toString("d MMMM");
      const dayOfWeek = args.header.start.toString("ddd");
      args.header.html = `${date}<br>${dayOfWeek}`;
  },
});

You may want to add this to the CSS to center the text lines:

.calendar_default_colheader_inner {
  text-align: center;
}

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.