CODEWITHSUNDEEP
javascriptfullcalendarmomentjs
Rome
Rome

Reputation: 442

Using custom prev and next buttons (FullCalendar)

My goal is to have 2 custom buttons to jump 1 week back and forth and another 2 buttons to jump 1 month back and forth. In contrary to the build-in prev and next buttons of FullCalendar, my buttons are supposed not to change with the duration of the view. I am stuck with the syntax here, calendar.incrementDate( moment.duration(-1, 'week') ) brings up Uncaught TypeError: e is null in browser. moment.js seems to work fine though. My code:

(...)
      customButtons: {
        prevWeek: {
          text: '<',
          click: function() {
            calendar.changeView( 'resourceTimelineWeek' ), //works
            calendar.incrementDate( moment.duration(-1, 'week') ), //error
            alert('clicked the prevWeek button!');
          }
        }
      },
      headerToolbar: {
        center: 'week,month',
        right: 'today prevMonth,prevWeek,nextWeek,nextMonth'
      },
      slotLabelFormat: [
        { month: 'long', year: 'numeric' }, // top level of text
        { week: 'W' },
        { weekday: 'short', day: '2-digit' } // lower level of text
      ],
(...)

...and two more questions:

  1. Is there a way not to use moment.js for this?
  2. What is the best way to change the font size / add some custom CSS for a certain custom button (not for all buttons)?

Upvotes: 2

Views: 3272

Answers (1)

Rome
Rome

Reputation: 442

With the hint from ADyson I've found the solution:

      customButtons: {
        prevWeek: {
          text: '<',
          click: function() {
            calendar.changeView( 'resourceTimelineWeek' );
            calendar.incrementDate( { days: -7 } );
          }
        },

Upvotes: 2

Related Questions