How to use header, footer and buttonText toolbar in JavaScript FullCalendar

Tech Area
March 2, 2023

In this post, we have discuss how to use JavaScript FullCalendar in website and use header, footer and buttonText toolbar. If you are working on event management website like schedule any event or plan any task on particular date and that details you want to show on web page in calendar format, then you can achieve this task using JavaScript FullCalendar plugin.

First of all include necessary CSS and JavaScript library.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>

Now create body for calendar.

<body>
  <h2><center>Javascript Fullcalendar</center></h2>
  <div class="container">
   <div id="calendar"></div>
  </div>
  <br>
</body>

After this, create script for calendar loading and set header, footer and buttonText toolbar.

<script>
   $(document).ready(function() {
   $('#calendar').fullCalendar({
           header:
           {
           left: 'month, agendaWeek, agendaDay, list',
           center: 'title',
           right: 'prev, today, next'
           },
           footer:
           {
           left: 'month, agendaWeek, agendaDay, list',
           center: 'title',
           right: 'prev, today, next'
           },
           buttonText:
           {
           today: 'Today',
           month: 'Month',
           week: 'Week',
           day: 'Day',
           list: 'List'
           }
});
});
</script>

Source Code

Here is the full code that we have written for index.php.

<html>  
<head>  
    <title>Fullcalendar</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script> 
</head>
 <body>
  <h2><center>Javascript Fullcalendar</center></h2>
  <div class="container">
   <div id="calendar"></div>
  </div>
  <br>
</body>
</html>
<script>
   $(document).ready(function() {
   $('#calendar').fullCalendar({
           header:
           {
           left: 'month, agendaWeek, agendaDay, list',
           center: 'title',
           right: 'prev, today, next'
           },
           footer:
           {
           left: 'month, agendaWeek, agendaDay, list',
           center: 'title',
           right: 'prev, today, next'
           },
           buttonText:
           {
           today: 'Today',
           month: 'Month',
           week: 'Week',
           day: 'Day',
           list: 'List'
           }
});
});
</script>

Output