Custom Navigation interval in scheduler when changing year

[Marios Tasou]

Hello,

I created this custom interval to navigate from month to month on year view but when changing year it breaks the header text.

Here is an example below as you can see when i changed years it broke the Header text and went back to the start of 2021 instead of resetting to 2022 Jan. I gave the view the max months for testing.

here is the code i created to achieve this. 

var n = d.getMonth();

var tmz = Intl.DateTimeFormat().resolvedOptions().timeZone;

scheduleObj2 = new ej.schedule.Schedule({

        width: '380px', height: '680px',

        firstMonthOfYear: n,

        monthsCount: 100,

        timezone: tmz,

        currentView: 'Year',

        views: [{ option: 'Year' }],

        eventSettings: {

            dataSource: [],

        },

        actionBegin: function (args) {

            debugger;

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

                var Mprevbut = {

                    align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-prev', id: 'MPrev',

                    text: '', type: 'Button', click: MonthPrev

                };

                args.items.push(Mprevbut);

                var Mnextbut = {

                    align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-next', id: 'MNext',

                    text: '', type: 'Button', click: MonthNext

                };

                args.items.push(Mnextbut);

            }

            }

    });

    scheduleObj2.appendTo('#scheduler2');      

    function MonthNext() {

        var x = scheduleObj2.firstMonthOfYear + 1;

        console.log(x);

        scheduleObj2.firstMonthOfYear = x;

    }

    function MonthPrev() {

        var x = scheduleObj2.firstMonthOfYear - 1;

        console.log(x);

        scheduleObj2.firstMonthOfYear = x;

    }

[Vengatesh Maniraj]

Hi Marios, 

 

Greetings from Syncfusion Support. 

 

We have validated your custom navigation issue and we have to let you know that the value of the firstMonthOfYear property is accessible from 0 to 11. So when your X value is greater than 11 or lesser than 0, you need to update the Scheduler’s selectedDate property to get the proper date navigation. For more reference, please refer to the below code snippet. 

 

function MonthNext() { 

  var x = scheduleObj2.firstMonthOfYear + 1; 

 

  console.log(x); 

  if (x > 11) { 

    var date = new Date( 

      scheduleObj2.selectedDate.getFullYear() + 1, 

      scheduleObj2.selectedDate.getMonth(), 

      scheduleObj2.selectedDate.getDate() 

    ); 

    scheduleObj2.selectedDate = date; 

  } 

 

  scheduleObj2.firstMonthOfYear = x % 12; 

} 

 

function MonthPrev() { 

  var x = scheduleObj2.firstMonthOfYear - 1; 

 

  console.log(x); 

  if (x < 0) { 

    var date = new Date( 

      scheduleObj2.selectedDate.getFullYear() - 1, 

      scheduleObj2.selectedDate.getMonth(), 

      scheduleObj2.selectedDate.getDate() 

    ); 

    scheduleObj2.selectedDate = date; 

    x = 11; 

  } 

  scheduleObj2.firstMonthOfYear = x; 

} 

 

 

Also, you can find the same in the below sample. 

 

Sample: https://stackblitz.com/edit/tlkb2h?file=index.js  

 

Kindly check the above sample and get back to us if you need any further assistance. 

 

Regards, 

Vengatesh