I have used fullCalendar.js with the header content such as: today,month,year,prev,next and also made a custom add button, now I want to add a simple text in the header before the add button saying "Request new class", which will finally look like this: fullCalendar Header

now my header looks like it: my header

here is the code so far:

$('#sfullCalendar').fullCalendar({
  customButtons: {
        myCustomButton: {
            theme: 'true',
            text: '',
            click: function() {
                alert('clicked the custom button!');
            }
        }
    },
      defaultView: 'month',
      header: {
        left:   'today',
        center: 'title',
        right:  'prev,next myCustomButton'
      },
      });

<script src=".1.0/react.min.js"></script>
<script src=".1.0/react-dom.min.js"></script>
<script src=".1.1/jquery.min.js"></script>

I have used fullCalendar.js with the header content such as: today,month,year,prev,next and also made a custom add button, now I want to add a simple text in the header before the add button saying "Request new class", which will finally look like this: fullCalendar Header

now my header looks like it: my header

here is the code so far:

$('#sfullCalendar').fullCalendar({
  customButtons: {
        myCustomButton: {
            theme: 'true',
            text: '',
            click: function() {
                alert('clicked the custom button!');
            }
        }
    },
      defaultView: 'month',
      header: {
        left:   'today',
        center: 'title',
        right:  'prev,next myCustomButton'
      },
      });

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

• javascript
• jquery
• fullcalendar

2 Answers 2

You can try:

    $('#calendar').fullCalendar({
  customButtons: {
    myCustomButton: {
      theme: 'true',
      text: '',
      click: function() {
        alert('clicked the custom button!');
      }
    }
  },
  defaultView: 'month',
  header: {
    left: 'today',
    center: 'title',
    right: 'prev,next myCustomButton'
  },
  eventAfterAllRender: function(view) {
    if ($('.label').length == 0) {
      $('.fc-myCustomButton-button').before('<div class="label">test</div>');
    }
  }
});

Fiddle

I was looking for something similar today, but in my case I just wanted to insert custom text in the center element of the toolbar, not extra buttons. After looking at the CSS for the header toolbar, I came up with this to put my text into the center of the toolbar (this is on version 5.3.0 of fullcalendar-scheduler, no idea if the CSS is the same on other versions):

.fc-header-toolbar > .fc-toolbar-chunk:nth-child(2)::before {
  font-size: 1.75em;
  content: 'My Custom Header Text';
}