Custom Business Logic in today button of fullcalendar

Question

I am using Angular JS and FullCalendar control for one of my requirement.

My code for full calendar in Angular JS is as below:-

<div ui-calendar="uiConfig.calendar" ng-model="eventSources" id="calendar"></div>

$scope.uiConfig = {
                calendar: {                   
                    editable: true,
                    header: {
                        left: 'title',
                        center: '',
                        //right: 'today prev,next'
                        right: 'today next'
                    },
                    aspectRatio: 1.25,
                    selectable: true,
                    events: $scope.eventsselection,                    
                    dayClick: $scope.dayClick,                                       
                    validRange: function (nowDate) {
                        return {
                            start: nowDate.clone().subtract(1, 'days'),                            
                        };
                    }                    
                }                
            };

I want to add my custom business logic when user clicks on "today" button at top right. How to achieve this?

Answer 1

You can define a customButton with the text 'Today'

customButtons: {
 myTodayButton: {
  text: 'Today',
  click: function() {
     /* Add custom logic here */
     $('#calendar').fullCalendar('today'); //will change calendar to today
                   }
               }
        },

In order to be able to see this button you must add it to the header option instead of the today option

header: {
  left: 'title',
  center: '',
  right: 'myTodayButton next'
        },