Wednesday, June 12, 2024

Fullcalendar – Change Header Title Text in Single Day View

Fullcalendar - Change Header Title Text in Single Day View

Hello to all, welcome to In this post,I will do, Fullcalendar – Change Header Title Text in Single Day View.

Fullcalendar is open source Javascript Event Calendar. Very much use in Event Bookings, Business Hours Timings and many more.


Here is the working picture:



Here is the working code and you can add this into your html or php file:

<!DOCTYPE html>
<meta charset='utf-8' />
<link href='' rel='stylesheet' />
<link href='' rel='stylesheet' media='print' />
<script src=''></script>
<script src=''></script>
<script src=''></script>

  $(document).ready(function() {

      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
      defaultDate: new Date(),
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: [{
          title: 'All Day Event',
          start: '2018-09-12'
      }).on('click', '.fc-basicDay-button', function(event) {
         $("th.fc-today").text(moment().format('D MMM, YYYY'));
/* Act on the event */



  body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;

  #calendar {
    max-width: 900px;
    margin: 0 auto;


  <div id='calendar'></div>


 If you have any query related to this post, then do comment below or ask question.


the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.