Custom date header template in timeline week

#1

Hi,
I’m using event calendar with this view settings:

timeline: {
      type: 'week',
      size: 52,
      resolution: 'week',
      weekNumbers: true
    }

I want to customize the date template showing year and week number. I’ve tried to use dayTemplate option, but it’s not working and calendar render the standard header with start - end of the week.
Is it possible to customize that template or at least add an option to show week number or year?

thank you,
Manuel

#2

Hi @Manuel_Costalunga_Co,

The dayTemplate renders the mbsc-timeline-day element, which contains the days. You can check it by switching to daily resolution. There’s no template for customizing the week header at the moment, however you can change the text of the months by using the monthNamesShort option.

#3

I can’t use monthNamesShort, because i need a different header for each week.

image
image.png1628×609 73.8 KB

I need something similar to that, with also a row for the year number above the week header cell.
Are you planning to implement a template also for the week timeline resolution header?

thank you in advance,
Manuel

1 Like
#4

Hi @Manuel_Costalunga_Co,

Thank you for sharing!
We do not have a template for the week view header at the moment, but I just created a feature request and added your voice to it.

#5

Hi,
I quote the request of Manuel_Costalunga_Co, we’re interested on this feature too.
Thanks

#6

Hi @Manuel_Costalunga_Co and @Marco_Ferretti

Happy to let you know that we are introducing Mobiscroll 5.26 where w e added the renderWeek / renderWeekFooter and weekTemplate / weekFooterTemplate options for custom week content rendering in the timeline header and footer.

The timeline receives a number of new templating capabilities that enables the customization of the header and footer for hour, day, week, month and year columns. By using steps that are below the hour, it is possible customize sub-hour header and footers as well.

Feel free to test the new features with this live example: https://demo.mobiscroll.com/timeline/hour-day-week-month-year-header-footer-template#.