Show Week number on Year View

Scheduler
#1

Hi,
is there a way to show the Week number into the Scheduler on Year view?

Thanks a lot,
Nicola

#2

Hi Nicola,
there is no inbuilt way to show week numbers in Year view scheduler, but you can implement it with your own code.
I suppose the easiest way is adding week numbers manually, i.e. to insert your DOM elements with week numbers inside after the Year view to be rendered on the page.
Here are general steps of how it can be done:

  1. Every time after the Year view is rendered, we get all blocks with months (.dhx_year_box) and insert a DIV element near each block. The week numbers will be added to these DIVs.
  2. Then go over the weeks in the month (blocks .dhx_year_box .dhx_year_body tr). Take the last day of the week. There is a DOM attribute with date value in this block.
  3. Then convert the date object to a week number and fill the block.
  4. Repeat it for all months and all weeks.

I’ve made a quick demo that shows how it can be implemented:
http://snippet.dhtmlx.com/5/4f328d882
Here are some important implementation notes:
week numbers must be rendered every time the Year view is rendered when onAfterSchedulerResize or onViewChange fires.
API onAfterSchedulerResize:
https://docs.dhtmlx.com/scheduler/api__scheduler_onschedulerresize_event.html
API onViewChange:
https://docs.dhtmlx.com/scheduler/api__scheduler_onviewchange_event.html
To position our block with weeks relative to the block of the month, we need redefine some of the built-in styles. In my example, I added a block wrapper for each month and positioned everything via flex-box, the details you can see in the snippet. Keep in mind, this sample is made in material skin of the latest version of the scheduler, if you have different skin or another version of the scheduler, you may need a different solution.