Weeknumbers in date picker schedule component

[Peter Vledder]

Hi,

Is it possible to show weeknumbers in the date picker?

Thanks,

Peter

[Praveenkumar Narasimhanaidu]

Hi Peter, 

  

Greetings from Syncfusion support..! 

  

We have validated your requirement “weeknumbers in scheduler datepicker ” at our end and we have prepared sample based on your requirement with the help of scheduler actionBegin event which can be viewed from following link. 

  

Sample: https://codesandbox.io/s/show-week-numbers-in-scheduler-date-picker-xlofm 

  

App.vue 

onActionBegin: function (args) { 

      if (args.requestType === "toolbarItemRendering") { 

        args.items[2].click = this.onCalendarCreated.bind(this); 

      } 

    }, 

    onCalendarCreated: function () { 

      setTimeout((e) => { 

        let container = document.querySelector(".e-schedule-toolbar-container"); 

        let calendar = container.querySelector(".e-calendar"); 

        if (calendar) { 

          document.querySelector( 

            ".e-calendar" 

          ).ej2_instances[0].weekNumber = true; 

        } 

      }, 1); 

    }, 

  

UG(actionBegin): https://ej2.syncfusion.com/vue/documentation/api/schedule/#actionbegin 

  

Kindly try the above solution and get back to us if you need any further assistance. 

  

Regards, 

Praveenkumar. 

[Peter Vledder]

Hi Praveenkumar,

Thanks for your help, really happy that we bought a license for your product. The components are awesome but the support is even better!

Maybe a little tip.. I should add the week numbers as a Boolean property to the component. Business users are always asking for week numbers in a calendar..

Thanks again,

Best Regards,

Peter

[Peter Vledder]

Hi,

I have a two additional questions. 

1) The weeknumbers are showing up but they are not correct....

The 1st of may should be week 17 not 18 -->  http://www.whatweekisit.org/

2) The weeks starts on sunday, but I configured my culture to nl so it should start on monday..... this are my internationalization settings:

    import {loadCldr, setCulture} from '@syncfusion/ej2-base'

    import numberingSystems from 'cldr-data/supplemental/numberingSystems.json'

    import weekData from 'cldr-data/supplemental/weekData.json'

    import gregorian from 'cldr-data/main/nl/ca-gregorian.json'

    import numbers from 'cldr-data/main/nl/numbers.json'

    import timeZoneNames from 'cldr-data/main/nl/timeZoneNames.json'

    loadCldr(numberingSystems, gregorian, numbers, timeZoneNames, weekData)

    setCulture('nl')

All the above settings seem to work except from the weekdata...

Kind Regards,

Peter

[Peter Vledder]

Any news?

[Hareesh Balasubramanian]

Hi Peter, 

Sorry for getting back to you.

Q1: We already provided support for handling the week number based on the year starts in the 18.4.35 version.  We suggest you use the weekRule property to overcome the reported issue. Please provide any of the below values to this property based on your requirement. 

 

weekRule property possible values	Description
FirstDay	Set the first week of the year's week number to be started from 1. Then it followed as 1, 2, 3 ...
FirstFullWeek	Set the first week of the year's week number to be started from 52 or 53 (i.e December last week's week Number). Then it followed as 53, 1, 2 …
FirstFourDayWeek	Set the week number based on the majority of dates present in the week for the respected months. If January dates are presented in the week more than December, the first week of the year's week number will be started from 1. If December dates are presented in the week more than January, the first week of the year's week number will be started from 52 or 53.

  

Please find the sample below modified sample.
https://codesandbox.io/s/show-week-numbers-in-scheduler-date-picker-forked-cu0mg?file=/src/App.vue 

 

    onCalendarCreated: function () { 

      setTimeout((e) => { 

        let container = document.querySelector(".e-schedule-toolbar-container"); 

        let calendar = container.querySelector(".e-calendar"); 

        if (calendar) { 

          document.querySelector( 

            ".e-calendar" 

          ).ej2_instances[0].weekNumber = true; 

          document.querySelector(".e-calendar").ej2_instances[0].weekRule = 

            "FirstFourDayWeek"; 

        } 

      }, 1); 

    }, 

Q2: You can set firstDayOfWeek property as 1 to scheduler to start the week from Monday instead of Sunday. Please refer the same in the above sample.

 

    return { 

      firstDay: 1, 

      selectedDate: new Date(2019, 0, 10), 

    }; 

Regards,
Hareesh 

[Peter Vledder]

Hi,

Thanks for your solution but why is this not working with the code below? The documentation states that by importing weekdata from cldr this should work for the selected culture.

Regards,

Peter

    import {loadCldr, setCulture} from '@syncfusion/ej2-base'

    import numberingSystems from 'cldr-data/supplemental/numberingSystems.json'

    import weekData from 'cldr-data/supplemental/weekData.json'

    import gregorian from 'cldr-data/main/nl/ca-gregorian.json'

    import numbers from 'cldr-data/main/nl/numbers.json'

    import timeZoneNames from 'cldr-data/main/nl/timeZoneNames.json'

    loadCldr(numberingSystems, gregorian, numbers, timeZoneNames, weekData)

    setCulture('nl')

[Praveenkumar Narasimhanaidu]

Hi Peter, 

Thanks for your update. 

We have validated your reported query at our end let you know that, since the date picker component is used inside scheduler, date picker’s firstDayofWeek property is rendered based on the scheduler firstDayofWeek. So, culture specific first day of week not showing in date picker because of this. If you use date picker as an individual component, in that case, first day of week rendered based on culture. 

Please get back to us if you need any further assistance. 

Regards, 

Praveenkumar