Make week numbers available

[Jopie01]

In al lot of cases a week number shown in front of the week can be very handy because many things like vacations are referring to week numbers instead of actual dates.

Currently showing the week number requires a custom component and some logic in that component to get the week numbers. For example I have overwritten the function https://github.com/cibernox/ember-power-calendar/blob/562d48b0e7399a596e54ee382a23f1e477cfb612/ember-power-calendar/src/components/power-calendar/days.ts#L129 and extended a bit so the week number is also in de object.

I also had to copy over https://github.com/cibernox/ember-power-calendar/blob/562d48b0e7399a596e54ee382a23f1e477cfb612/ember-power-calendar/src/-private/days-utils.ts#L62-L81 otherwise it didn't work.

Would is be possible to add the week numbers into the object and add an option to show these?

[mkszepp]

@Jopie01 yes, thats a good idea to implement as option... would you like to add a PR for this?

[Jopie01]

Unfortunately this is not as straight forward as I thought. The different date libraries are having different functions for that and also when startOfWeek is used, the week number can be off by one.
So to get it work, first the ember-power-calendar-<datelib> should have a function which returns the week number and an ISO function which does the same (week number can be determined in two ways, see date-fns/date-fns#3373). Then ember-power-calendar can be updated to use that functions.

What do you think?

[mkszepp]

@Jopie01 i have quickly checked how it works the number of week... if i have understand correctly thee is an ISO-8601 (used in Europe) and US-style.

• ISO-8601: week 1 = first Thursday week => this means if somebody pass to component startOfWeek=1 (Monday) we need to find first Thursday
• US-style: weeks start on Sunday, first week = Jan 1st week

Maybe we add inside util a function like this, so we don't need to extend date libs and we have no breaking change...

function getWeekNumber(date, startOfWeek = 0) {
  // ISO-8601 special case (weeks start Monday, week 1 = week with first Thursday)
  if (startOfWeek === 1) {
    const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
    const dayNum = d.getUTCDay() || 7; // Sunday=0 → 7
    d.setUTCDate(d.getUTCDate() + 4 - dayNum); // shift to nearest Thursday
    const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
    const weekNum = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
    return weekNum;
  }

  const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
  const day = d.getDay();

  // Move back to start of this week
  const diffToWeekStart = (day - startOfWeek + 7) % 7;
  d.setDate(d.getDate() - diffToWeekStart);

  // First day of the year
  const yearStart = new Date(date.getFullYear(), 0, 1);
  const yearStartDay = yearStart.getDay();

  // Align yearStart to the chosen startOfWeek
  const diffToYearWeekStart = (yearStartDay - startOfWeek + 7) % 7;
  yearStart.setDate(yearStart.getDate() - diffToYearWeekStart);

  // Week number = distance in weeks + 1
  const weekNum = Math.floor((d - yearStart) / (7 * 24 * 60 * 60 * 1000)) + 1;
  return weekNum;
}

Let me know, if i have missed something and if this is a possible way to get this feature

[Jopie01]

@mkszepp, thanks for putting this up!. Some questions:

• what if I change the startOfWeek to something else then Sunday or Monday?
• Have you accounted for leap years?

[mkszepp]

@Jopie01

• there is no standard which defines whats correctly... ISO-8601 has defined Monday as first day of week, for US-style is Sunday... so when somebody is using Wednesday as start of week, there is no definition. In my example i have taken the US-style... when somebody really need this any time, we can provide a function for calculation, but for now i think we can ignore this case
• In my example code i think it should be respected... maybe we can check this when we have a working example

[Jopie01]

@mkszepp, I tested your code, and is seems to work almost correctly. It was a week off, but making a little change, it works.

- const weekNum = Math.floor((d - yearStart) / (7 * 24 * 60 * 60 * 1000)) + 1;
+ const weekNum = Math.ceil((d - yearStart) / (7 * 24 * 60 * 60 * 1000)) + 1;

The big problem arises when at the end / start of the year. There is something going on there and more logic is needed to have that correct. For example the last week of 2024 should be week 1, but your function returns 53. So there is a bit more to it. See also https://www.epochconverter.com/weeks/2024 and https://www.epochconverter.com/weeknumbers and scroll a bit further down to the javascript function. They extended the Date class with

Date.prototype.getWeek = function () {
    var target  = new Date(this.valueOf());
    var dayNr   = (this.getDay() + 6) % 7;
    target.setDate(target.getDate() - dayNr + 3);
    var firstThursday = target.valueOf();
    target.setMonth(0, 1);
    if (target.getDay() != 4) {
        target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
    }
    return 1 + Math.ceil((firstThursday - target) / 604800000);
}

And it works quite well, the returned week numbers are correct. But I don't know when the locale is changed.

[mkszepp]

@Jopie01 ah i think the function looks good, but we can see the result when its implemented...

At the end we need to create an internal function instead to extend Date and we can add something like this:

  if (startOfWeek === 0) {
    const firstDayOfYear = new Date(this.getFullYear(), 0, 1);
    const pastDaysOfYear = (this - firstDayOfYear) / 86400000;
    return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
  }

Can you give a try to this?

[Jopie01]

I think you don't need something like that. Here is part of my code:

import DaysComponent from 'ember-power-calendar/components/power-calendar/days';

Date.prototype.getWeek = function () {
  var target = new Date(this.valueOf());
  var dayNr = (this.getDay() + 6) % 7;
  target.setDate(target.getDate() - dayNr + 3);
  var firstThursday = target.valueOf();
  target.setMonth(0, 1);
  if (target.getDay() != 4) {
    target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
    }
  return 1 + Math.ceil((firstThursday - target) / 604800000);
}

export default class MyCalendarDaysComponent extends DaysComponent {
  
  get myWeeks() {
    const w = this.weeks;
    w.forEach(week => {
      let check = 0;
      if (this.args.startOfWeek == 0) {
        check = 4;
      }
      week.weekNumber = week.days[check].date.getWeek();
    })
    return w;
  }

}

So the the Date object is extended with the getWeek function. Then I have created my own DaysComponent which have an extra getter which calls first the 'normal' getter for the weeks and then loops over that to get the weeknumber. This is working very well, also the end of the year is working correctly.