fullCalendar today button custom behavior

Question

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.

score 2 · Accepted Answer · answered Mar 10 '16 at 09:09

2

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);
});

answered Mar 10 '16 at 09:09

Volodymyr Synytskyi

3,885
1
15
19

I have an angular application and I tried this. ngOnInit() { $('#calendar').find('.fc-today-button').click(function() { alert("test"); }); } but it is not firing any event – Missak Boyajian Sep 06 '17 at 08:41
In spite of ngOnInit() try to use another angular hook (maybe ngAfterViewChecked() ). It is possible that html is not rendered yet when ngOnInit() is called. And because of that jquery can't find ("#calendar") on the page. – Volodymyr Synytskyi Sep 06 '17 at 21:32
Thanks it worked. However, I don't know why it is alerting forever. I don't know why – Missak Boyajian Sep 08 '17 at 04:53
Hey I still could not solve this problem. When I do this, the event is firing more than 400 times. I tried to to $.unbind however in that case the calendar would not switch case. Do you have any idea why it is firing the events many times? – Missak Boyajian Oct 12 '17 at 08:35

Ilyas Ayuubi · Answer 2 · 2022-07-26T10:59:16.847

0

try :

this.calendarComponent.calendar.today()

or

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

edited Jul 26 '22 at 10:59

answered Jul 26 '22 at 10:43

Ilyas Ayuubi

436
4
5

fullCalendar today button custom behavior

2 Answers2