Fullcalendar, Make Today Button for current month

Question

Today button disable for current month. when you go next or previous month it appear as active(when click on the TODAY button control goes to current month).

In following code I am showing how to make today button active for current month.

 function makeTodaybtnActive()
      {
         $('#calendar button.fc-today-button').removeAttr('disabled');
         $('#calendar button.fc-today-button').removeClass('fc-state-disabled');
       }

(where #calendar is fullcalendar id)
call this function when calendar load

 $(window).load(function() {
    makeTodaybtnActive();
 });

Also in eventRender function

   $('#calendar').fullCalendar({
        eventRender: function(event, element) {
          makeTodaybtnActive();
        },
   });

When calendar load (page load) that time first code work and when change the month and goes to current month (by clicking today button) then second code make Today button active.

Answer 1

The 'today' button is made inactive automatically when today's date is visible in the rendered calendar area since there is no point in jumping to 'today' if it is already visible. If you really wish it to be always enabled it is possible https://jsfiddle.net/73b7rva6/

document.addEventListener('DOMContentLoaded', function() {
    $('#calendar').fullCalendar({
        eventAfterAllRender: function(view) { /* used this vs viewRender */
            makeTodayButtonActive();
        }
    });

    function makeTodayButtonActive() {
        /* turn off fc-state-disabled class and remove 'disabled' property */
        $('#calendar button.fc-today-button').removeClass('fc-state-disabled').prop('disabled', false);
    }
});

Answer 2

In FullCalendar, Today button is disabled automatically when we are on Today's date. please check below code.

$('#calendar').fullCalendar({
    events: [{
        title: 'Event 1',
        start:  moment().add(1, 'h'),
        end: moment().add(2, 'h'),
        allDay: false
    }], 
    header: {
        left: '',
        center: 'prev title next today',
        right: ''
    },
    timezone:'local',
    defaultDate: '2014-11-15',
    editable: false,
    eventLimit: false,
    firstDay: 6,
    defaultView: 'agendaWeek',
});
               

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>

<div id="calendar"></div>

Answer 3

Today button disable for current month. when you go next or previous month it appear as active(when click on the TODAY button control goes to current month).

In following code I am showing how to make today button active for current month.

 function makeTodaybtnActive()
      {
         $('#calendar button.fc-today-button').removeAttr('disabled');
         $('#calendar button.fc-today-button').removeClass('fc-state-disabled');
       }

(where #calendar is fullcalendar id)
call this function when calendar load

 $(window).load(function() {
    makeTodaybtnActive();
 });

Also in eventRender function

   $('#calendar').fullCalendar({
        eventRender: function(event, element) {
          makeTodaybtnActive();
        },
   });

When calendar load (page load) that time first code work and when change the month and goes to current month (by clicking today button) then second code make Today button active.