I have 2 custom buttons for my own fixed prev and next functions. I like all the buttons how they are but need to make the << and >> for those 2 buttons bigger, so I have to change the FontSize I guess. What is the best way to do this by preserving the other buttons (including their current FontSize) as they are? My code:

      customButtons: {
        prevMonth: {
          text: '<<',
          click: function() {
            calendar.changeView( 'resourceTimelineMonth');
            calendar.incrementDate( { days: -31 } );
          }
        },
        nextMonth: {
          text: '>>',
          click: function() {
            calendar.changeView( 'resourceTimelineMonth');
            calendar.incrementDate( { days: 31 } );
          }
        }
      },
      headerToolbar: {
        center: 'week,d14,month',
        right: 'today prevMonth,prev,next,nextMonth'
      },

I have 2 custom buttons for my own fixed prev and next functions. I like all the buttons how they are but need to make the << and >> for those 2 buttons bigger, so I have to change the FontSize I guess. What is the best way to do this by preserving the other buttons (including their current FontSize) as they are? My code:

      customButtons: {
        prevMonth: {
          text: '<<',
          click: function() {
            calendar.changeView( 'resourceTimelineMonth');
            calendar.incrementDate( { days: -31 } );
          }
        },
        nextMonth: {
          text: '>>',
          click: function() {
            calendar.changeView( 'resourceTimelineMonth');
            calendar.incrementDate( { days: 31 } );
          }
        }
      },
      headerToolbar: {
        center: 'week,d14,month',
        right: 'today prevMonth,prev,next,nextMonth'
      },

• javascript
• css
• fullcalendar

• Probably with the class for those two buttons – Aleksandar Commented Dec 6, 2020 at 11:01
• Sure but the issue is that custom buttons share their classes with the other buttons which are not supposed to change. – Rome Commented Dec 6, 2020 at 11:49

1 Answer 1

Add this to your CSS:

.fc .fc-prevMonth-button,
.fc .fc-nextMonth-button {
  font-size: 18px;
}