Toolbar - customize prevButton and nextButton onClick functionality

[samrgupta]

Hi,
I am using bryntum calendar in resourceview mode right now. Code used -

date:theStartDate,
    	modeDefaults: {
     	startDate: theStartDate,
      	dayStartTime: 6.5,
      	dayEndTime: 20,
        visibleStartTime: 7,
      	hourHeight: 140,
      	range: 4,
      	coreHours: {
        	start: 7,
        	end: 19, //overlayDay: true
      	},
    },
    modes: {
      day: null,
      week: null,
      month: null,
      year: null,
      agenda: null,
      dayresource: {
        hideNonWorkingDays: false,
        showHeaderAvatars: false,
        minResourceWidth: "10em",
      },
    }

Present functionality -
Onclick of nextButton and prevButton it shows next 4(range) days and previous 4 days.

Required functionality -
I want to customize the onclick functionality of prevButton and nextButton in toolbar in order to move by only one day at a time instead of moving by range mentioned in the picture above i.e 4
For example in current active view if I can see dates 12,13,14,15 ; onclick of nextButton I want active view to show 13,14,15,16 ; and onclick of prevButton I want active view to show 11,12,13,14.

Current active view -

currentview.PNG (4.69 KiB) Viewed 597 times

OnAction of nextButton required view -

nextview.PNG (4.43 KiB) Viewed 597 times

OnAction of prevButton required view -

prevview.PNG (4.59 KiB) Viewed 597 times

How can I customize the prevButton and nextButton for above functionality, what props should be modified to achieve above functionality

	tbar: {
      	items: {
        	prevButton : {
          	label : 'Next',
          	ref: 'prevButton',
          	onAction : () => {         

            	theStartDate = DateHelper.add(theStartDate, -1, 'day')
          	}
      },
      nextButton : {
        label : 'Next',
        ref: 'nextButton',
        onAction : () => {
          theStartDate = DateHelper.add(theStartDate, 1, 'day')
        }
    }, 

Reference used: https://bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#config-tbar

[Animal]

Just inject a next and previous function properties into your mode which do what you want. That's what those buttons call by default.

[marcio]

Just for reference, the documentation related to the functions that Animal shared

https://bryntum.com/products/calendar/docs/api/Calendar/widget/DayResourceView#function-next

https://bryntum.com/products/calendar/docs/api/Calendar/widget/DayResourceView#function-previous

[samrgupta]

Thanks for the quick response. The above solution helped however How can we change the state of the startDate inside next function in order to re-render the calendar view with new startDate?

current code:

    date:theStartDate,
    modeDefaults: {
      startDate: theStartDate,
      dayStartTime: 6.5,
      dayEndTime: 20,
      visibleStartTime: 7,
      hourHeight: 140,
      range: 4,
      coreHours: {
        start: 7,
        end: 19, //overlayDay: true
      },
    },
    modes: {
      day: null,
      week: null,
      month: null,
      year: null,
      agenda: null,
      dayresource: {
        hideNonWorkingDays: false,
        showHeaderAvatars: false,
        minResourceWidth: "10em",
        next: () => {
          console.log("next-triggered")
          theStartDate = DateHelper.add(theStartDate, 1, 'day')   

        },
        event:{
          new:{
            startDate: theStartDate
          }
        },
        statefulEvents : [ 'change']
      },
    },

[marcio]

Hey,

You can perhaps access the calendar instance like this

const
    calendar        = new Calendar({
        // Modes are the views available in the Calendar.
        // An object is used to configure the view.
         modes: {
      day: null,
      week: null,
      month: null,
      year: null,
      agenda: null,
      dayresource: {
        hideNonWorkingDays: false,
        showHeaderAvatars: false,
        minResourceWidth: "10em",
        next: () => {
          

      console.log("next-triggered")
      calendar.date = DateHelper.add(calendar.date, 1, 'day')   
    },

[samrgupta]

Thanks for your reply, I have written the following code

agendaConfig.modes.dayresource.next = () =>{
    bCalendar.date = DateHelper.add(bCalendar.date,1,'day')
  }

calendarinstance.PNG (8.69 KiB) Viewed 494 times

However, the date on top and the start date is not changing after clicking on the next

After clicking on next expected date on top is February 17, 2023 and expected start date is Fri 17

[marcio]

Hey samrgupta,

I tried on our basic demo https://bryntum.com/products/calendar/examples/basic/ the following snippet

modes: {
      day: null,
      week: null,
      month: null,
      year: null,
      agenda: null,
      dayresource: {
        hideNonWorkingDays: false,
        showHeaderAvatars: false,
        next: () => {
           calendar.date = DateHelper.add(calendar.date,1,'day') 
                  }

  },
}

And it worked as expected, could you please provide a runnable test case for us to debug and check what's happening there?

[Animal]

Changing the calendar's date just suggests you are interested in that date. If the currently active view already contains that date, nothing will happen. If it does not, it will step on by its defined "range" (Week for WeekView, month for MonthView, or the range if you have configured a DayView to show a range)

If you want to set the startDate of a view, set the startDate of the view, and then the Calendar's date to follow.

[samrgupta]

Thank you so much, I am now able to achieve the desired results.