V-calendar: Support for weeknumbers

[lambertbeekhuis]

Is it possible to add the option to add weeknumbers to the calendar? And upon selection, show the whole week to be selected. I

[stuta]

+1. This is really necessary in the industry. Of course it should be an option.

[vukadinFE]

+1 Would be awesome if weeknumbers count starts at given date...up to end date.

[Moonbird-IT]

Hi @nathanreyes! Any update on this enhancement or workaround suggestion? Thanks for the great component!

[stuta]

Here are some helper functions:

dt.dateToJulian = function(date) {
    let year = date.getFullYear() // http://www.w3schools.com/jsref/jsref_obj_date.asp
    let month = date.getMonth() + 1 // js month is 0-11
    let day = date.getDate()
    let a = Math.floor((14 - month) / 12)
    let y = year + 4800 - a
    let m = month + 12 * a - 3
    return (
        day +
        Math.floor((153 * m + 2) / 5) +
        365 * y +
        Math.floor(y / 4) -
        Math.floor(y / 100) +
        Math.floor(y / 400) -
        32045
    )
}

dt.julianToWeek = function(jd) {
    let d4 = (((jd + 31741 - (jd % 7)) % 146097) % 36524) % 1461
    let L = Math.floor(d4 / 1460)
    let d1 = ((d4 - L) % 365) + L
    return Math.floor(d1 / 7) + 1
}

dt.dateToWeek = function(date) {
    return dt.julianToWeek(dt.dateToJulian(date))
}

[highstone]

+1

[AndrisSaukums]

+1
This is the most important feature for the management in the calendar widget. Unfortunately, I have not found anything up to date except jQuery UI widget. I also would be very grateful for this feature!
@nathanreyes, thanks for a great widget!

[13thbit]

+1

[nathanreyes]

Ok I think it has been requested enough so I'll try and add this in before v1.

Question: Does the first week start on the first full week of January (like this)? Or does it start on the week of the first day?

[stuta]

You need to be able to define the start day of the week.

Week calculation code is complex and very hard to do right and fast. You can use my code below when calculating weeks. Tell me if you need more conversions.

const dt = {}
dt.julianToDate = function(num) {
    // julianToYmd(julian)
    let a, b, c, d, date, day, e, int, m, month, year
    int = dt.floatToInt(num) // days are integer part of number
    a = int + 32044
    b = Math.floor((4 * a + 3) / 146097)
    c = a - Math.floor((146097 * b) / 4)
    d = Math.floor((4 * c + 3) / 1461)
    e = c - Math.floor((1461 * d) / 4)
    m = Math.floor((5 * e + 2) / 153)
    day = e - Math.floor((153 * m + 2) / 5) + 1
    month = m + 3 - 12 * Math.floor(m / 10)
    year = 100 * b + d - 4800 + Math.floor(m / 10)
    date = new Date(0) // new Date() would return current date
    date.setFullYear(year, month - 1, day) // JavaScript counts months from 0 to 11
    return date // not called
}

dt.dateToJulian = function(date) {
    let year = date.getFullYear() // http://www.w3schools.com/jsref/jsref_obj_date.asp
    let month = date.getMonth() + 1 // js month is 0-11
    let day = date.getDate()
    let a = Math.floor((14 - month) / 12)
    let y = year + 4800 - a
    let m = month + 12 * a - 3
    return (
        day +
        Math.floor((153 * m + 2) / 5) +
        365 * y +
        Math.floor(y / 4) -
        Math.floor(y / 100) +
        Math.floor(y / 400) -
        32045
    )
}

dt.julianToWeek = function(jd) {
    let d4 = (((jd + 31741 - (jd % 7)) % 146097) % 36524) % 1461
    let L = Math.floor(d4 / 1460)
    let d1 = ((d4 - L) % 365) + L
    return Math.floor(d1 / 7) + 1
}

dt.dateToWeek = function(date) {
    return dt.julianToWeek(dt.dateToJulian(date))
}

[AndrisSaukums]

Ok I think it has been requested enough so I'll try and add this in before v1.

Question: Does the first week start on the first full week of January (like this)? Or does it start on the week of the first day?

It is better to do it according the ISO 8601 standard. Take a look at the Wikipedia page:
https://en.wikipedia.org/wiki/ISO_week_date

[lambertbeekhuis]

Ok I think it has been requested enough so I'll try and add this in before v1.

Question: Does the first week start on the first full week of January (like this)? Or does it start on the week of the first day?

Great!! My understanding is that the definition of weeknumbers are different in the US en the rest of the world. Like 'the start of the week', is either sunday or monday depening on the region. Thanks voor adding!!

[stevenkuster]

@nathanreyes Thanks for the awesome plugin. Do you have an ETA for this feature? It's kind of a show stopper for the project I'm working.

[sskanthi]

@nathanreyes any update on this feature?

[lokedahlstrom]

I just submitted pull request 790 implementing (iso) week number support.

Since the project is already using date-fns the week number is calculated by getISOWeek.

There is currently no interactivity in my solution - the calendar simply shows the week number. It would, however, be quite simple to add interactivity if needed.

Note that the US week number scheme is not supported, right now at least. This entertaining article has more information on the matter if someone else wants to implement the support.

[nathanreyes]

Added in 2.3.0. Thanks @lokedahlstrom for initiating this. Made a few updates to support normal week numbers as well as ISO. More can be seen here.

<!--Show normal weeknumbers inside pane on left side-->
<v-calendar show-weeknumbers />

<!--Show normal weeknumbers outside pane on left side-->
<v-calendar show-weeknumbers="left-outside" />

<!--Show normal weeknumbers inside pane on right side-->
<v-calendar show-weeknumbers="right" />

<!--Show normal weeknumbers outside pane on right side-->
<v-calendar show-weeknumbers="right-outside" />

<!--Show ISO weeknumbers using the same convention-->
<v-calendar show-iso-weeknumbers />

There is also a weeknumberclick event for getting the weeknumber and related days clicked.

[nathanreyes]

Also note: By this API design, I'm not trying to infer that show-weeknumbers should be the default use case. I merely chose to use show-iso-weeknumbers as a matter of clarity (ISO is a specific standard). I recognize more generally that show-iso-weeknumbers should probably be preferred method.