CODEWITHSUNDEEP
javascriptangularjsfullcalendarui-calendar
Yana Karpinska
Yana Karpinska

Reputation: 63

fullCalendar today button custom behavior

I have troubles with fullCalendar. I am using week view(defaultView: 'basicWeek'), and the toolbar buttons 'today', 'prev', 'next'. And when I click 'today' button is clicked calendar navigates back to current week, but date selection doesn't change. I want calendar to navigate to current week and select today date on the calendar. But I am having troubles with redefining 'today' button click event.

Code sample: https://plnkr.co/edit/dv9yiq1CdJxfFTsDg4Yx?p=preview 

defaultView: 'basicWeek',
            defaultDate: '2016-01-12',
            selectable: true,
            selectHelper: true,
            select: function(start, end) {
              console.log('select');
                var title = prompt('Event Title:');
                var eventData;
                if (title) {
                    eventData = {
                        title: title,
                        start: start,
                        end: end
                    };
                    $('#calendar').fullCalendar('renderEvent', eventData, true); 
                }
                $('#calendar').fullCalendar('unselect');
            }

I want a popup(alert) for today date to appear when I clicked 'today' button in this case.So basicly the button click not only navigate me to current week, but to select current day.

Upvotes: 6

Views: 6323

Answers (2)

Ilyas Ayuubi
Ilyas Ayuubi

Reputation: 526

try :

this.calendarComponent.calendar.today()

or

this.calendar.getApi().changeView('resourceTimelineWeek','2022-07-26')

Upvotes: 0

Volodymyr Synytskyi
Volodymyr Synytskyi

Reputation: 4055

You can manually listen to the today's button click and then call calendar's select method passing correct arguments.

Try the following code: https://plnkr.co/edit/62Dx5pVrDDXnwoME5jbU?p=preview

calendar.find('.fc-today-button').click(function(){
  var start = new Date();
  start.setHours(0,0,0,0);
  var end = new Date();
  end.setDate(end.getDate() + 1);
  end.setHours(0,0,0,0);
  calendar.fullCalendar('select', start, end);
});

Upvotes: 2

Related Questions