CODEWITHSUNDEEP
javascriptfullcalendar
user783322
user783322

Reputation: 481

Affecting Fullcalendar today button .fc-today-button

I'm having trouble getting custom controls to work when clicking the 'today' button that is part of Fullcalendar.

All the documentation I can find tells me that Fullcalendar's built-in controls can be affected using two methods:

So, this one works for me when it's applied to previous, next, month, agendaWeek and agendaDay, but not for 'today' (button.fc-today-button):

    $('body').on('click', 'button.fc-next-button', function() {
            console.log('I Clicked Next');
    });

Some documentation also say that this works, although I can't make it do so on any button:

    $('.fc-next-button span').click(function(){
            console.log('I Clicked Next');
    });

Does anyone know why this is and what I'm doing wrong?

Upvotes: 3

Views: 13693

Answers (3)

karns
karns

Reputation: 5847

I was able to more or less achieve this with a native workaround of sorts. You may utilize the "customButtons" and "headerToolbar" in combination to effectively remove the original today button and replace it with your own which can trigger custom function code upon being clicked.

I'm actually using this with VueJS, but should be equally feasible with Vanilla JS.

// these are the options you can pass when initializing a fullcalendar
    customButtons: {
      focusButton: {
        text: "focus",
        click: this.scrollToCurrentDay // this is a vue component function, but you could just as well pass a vanilla JS function
      }
    },
    headerToolbar: { // this effectively removes the original today button and adds our custom button to the header of the calendar
      left: '',
      center: 'title',
      right: 'prev focusButton next'
    }

I wanted to do this because I wanted to not only focus the month when today was clicked, but also to scroll the calendar to the day (useful when using small screens like phones).

My custom today button click handler:

scrollToCurrentDay: function(arg) {
  let CalendarAPI = this.$refs.calendar.getApi();
  CalendarAPI.today();
  var todayElement = document.getElementsByClassName('fc-day-today')[0];
  var calendarElement = document.getElementsByClassName('fc')[0];
  if (todayElement) {
    todayElement.scrollIntoView();
  } else {
    calendarElement.scrollIntoView();
  }
},

Upvotes: 0

user783322
user783322

Reputation: 481

After investigation and the help of MikeSmithDev (thanks Mike - your help was invaluable), it appears as though the 'today' event only gets triggered if it physically positioned below/after the calendar, the rest of the header controls (button.fc-next-button etc) don't seem to mind where they are physically positioned.

Likely the first function executes before the calendar is finished loading... so it works, there is just no button to bind it to.

Upvotes: 0

MikeSmithDev
MikeSmithDev

Reputation: 15797

Well, you want to affect the "today" button, yet you are adding code for the "next" button. You want to do something like:

$(".fc-today-button").click(function() {
    alert('Clicked Today!');
});

This applies a click event to anything with the class "fc-today-button" (that is the class that the Today button will have).

Working example:

$('#fullCal').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',
});
               
$(".fc-today-button").click(function() {
    alert('Clicked Today!');
});
<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="fullCal"></div>

Upvotes: 4

Related Questions