How to set full calendar to a specific start date when it's initialized for the 1st time?

Question

I would like to set the initial month to an arbitrary month when I call the function to display the calendar.

Say for example the user selects a date last june (June 2011) somewhere else and I want fullcalendar to show up with a month display of April before (April 2010). And yes, this is just to make a case, not to make sense ;-) )

I tried to call 'gotodate' before I then subsequently call the display function but this doesn't seem to work

$('#calendar').fullCalendar( 'gotoDate', currentdate);
$('#calendar').fullCalendar({
    header: {left: 'prevYear,prev,today,next,nextYear',
         center: 'title', right: 'month,basicWeek,basicDay' etc...}

Could someone eventually please provide an example how to do this properly?

score 93 · Answer 1 · edited Aug 16 '22 at 16:14

93

You should use the options 'year', 'month', and 'date' when initializing to specify the initial date value used by fullcalendar:

$('#calendar').fullCalendar({
 year: 2012,
 month: 4,
 date: 25
});  // This will initialize for May 25th, 2012.

See the function setYMD(date,y,m,d) in the fullcalendar.js file; note that the JavaScript setMonth, setDate, and setFullYear functions are used, so your month value needs to be 0-based (Jan is 0).

UPDATE: As others have noted in the comments, the correct way now (V3 as of writing this edit) is to initialize the defaultDate property to a value that is

anything the Moment constructor accepts, including an ISO8601 date string like "2014-02-01"

as it uses Moment.js. Documentation here.

Updated example:

$('#calendar').fullCalendar({
    defaultDate: "2012-05-25"
});  // This will initialize for May 25th, 2012.

UPDATE: in the V5, defaultDate parameter has been renamed to initialDate.

edited Aug 16 '22 at 16:14

Alex

217
1
17

answered Sep 24 '12 at 16:12

Jammerms

1,491
2
13
13

4

Yeah i believe this is the 'correct' answer to this question. `year, month, date` should be used. IIRC, the answer by Brandon would load the calendar with 2x ajax calls for the events. (if using json events). Once for the initial load using default dates, then once for the 'gotoDate' event json load. – wired00 Oct 04 '13 at 01:41
Definitely. If using json events, calling .fullCalendar('gotoDate'... would likely result in an additional ajax request. – James H Oct 31 '13 at 21:00
@Jammerms since you have experience with fullcalendar, if you wouldn't mind checking my question here: http://stackoverflow.com/questions/30330106/pass-date-params-into-jquery-fullcalendar. It is not getting any responses. – user2363025 May 20 '15 at 08:08
1

The docs have changed since this answer, you should now use the 'defaultDate' option – Jelmer Keij Apr 29 '16 at 08:45

score 53 · Accepted Answer · answered Nov 17 '11 at 21:51

53

You have it backwards. Display the calendar first, and then call gotoDate.

$('#calendar').fullCalendar({
  // Options
});

$('#calendar').fullCalendar('gotoDate', currentDate);

answered Nov 17 '11 at 21:51

Brandon

68,708
30
194
223

6

hmmmm...it's working, but the logic is strange, wouldn't you agree. So I tell the calendar to go somewhere, and then I tell him: "wait a second, that's not what I meant. What I REALLY meant is THIS...Anyway, thanks a bunch for your fast asnwer, it's working fine! Stefan – Stefan Nov 17 '11 at 21:58
That code doesn't just display the fullCalendar, it also initializes it. So think of it this way, your way was telling a calendar that didn't yet exist to display a date. This way it's saying create the calendar, then show a date. Also, if this solved your problem, don't forget to mark it as an accepted answer by clicking on the checkbox. Thanks. – Brandon Nov 17 '11 at 22:00
6

The other answer (by Jammerms) is clearly better. Please reconsider which answer you accepted. – Olson.dev Apr 29 '13 at 19:28
How do you get it to also highlight the date it goes to this way? – Mar 02 '18 at 00:40

StuartLC · Answer 3 · 2015-09-02T20:19:01.990

30

As per machineAddict's comment, as of version 2 and later, year, month and day have been replaced by defaultDate, which is a Moment, supporting constructors such as an ISO 8601 date string or a Unix Epoch.

So e.g. to initialize the calendar with a given date:

$('#calendar').fullCalendar({
    defaultDate: moment('2014-09-01'),
    ...
});

edited Sep 02 '15 at 20:19

answered Nov 25 '14 at 05:05

StuartLC

104,537
17
209
285

score 6 · Answer 4 · answered Apr 01 '16 at 11:29

6

You can just pass a Date object:
For current date:

$('#calendar').fullCalendar({
    defaultDate: new Date()
});

For specific date '2016-05-20':

$('#calendar').fullCalendar({
    defaultDate: new Date(2016, 4, 20)
});

answered Apr 01 '16 at 11:29

CIRCLE

4,501
5
37
56

score 6 · Answer 5 · answered Jul 22 '20 at 15:53

6

For v5 please use initialDate instead of defaultDate. Simply renamed option

eg

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
     ...
     initialDate: '2020-09-02',
     ...
});

answered Jul 22 '20 at 15:53

thnszgns

61
1
3

score 4 · Answer 6 · answered May 24 '14 at 19:06

4

I've had better luck with calling the gotoDate in the viewRender callback:

$('#calendar').fullCalendar({
  firstDay: 0,
  defaultView: 'basicWeek',
  header: {
    left: '',
    center: 'basicDay,basicWeek,month',
    right:  'today prev,next'
  },
  viewRender: function(view, element) {
    $('#calendar').fullCalendar( 'gotoDate', 2014, 4, 24 );
  }
});

Calling gotoDate outside of the callback didn't have the expected results due to a race condition.

answered May 24 '14 at 19:06

Eric Parshall

731
9
15

2

Be sure that this approach doesn't trigger `events` twice – Maxim Shoustin Jul 11 '15 at 15:00
Doing this seemed to disable the ability to move forward and back through months by clicking the buttons. – swinn Mar 14 '18 at 13:53

score 1 · Answer 7 · answered Oct 30 '14 at 14:57

1

In version 2.1.1 this works :

$('#calendar').fullCalendar({
// your calendar settings...
});

$('#calendar').fullCalendar('gotoDate', '2014-05-01');

Documentation about moment time/date format : http://fullcalendar.io/docs/utilities/Moment/ Documentation about the upgrades in version 2 : https://github.com/arshaw/fullcalendar/wiki/Upgrading-to-v2

answered Oct 30 '14 at 14:57

BAAC

33
1
8

How do you get it to also highlight the date it goes to this way? – Mar 02 '18 at 00:40

score 1 · Answer 8 · answered Nov 09 '20 at 12:26

This can be used in v5.3.2 to goto a date after initialization

calendar.gotoDate( '2020-09-12' );

eg on datepicker change

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
     ...
     initialDate: '2020-09-02',
     ...
});    

$(".date-picker").change(function(){
     var date = $(this).val();
     calendar.gotoDate( date );
});

score 0 · Answer 9 · answered Aug 20 '15 at 12:54

If you don't want to load the calendar twice and you don't have a version where defaultDate is implemented, do the following:

Change the following method:

function Calendar(element, options, eventSources) { ... var date = new Date(); ... }

to:

function Calendar(element, options, eventSources) { ... var date = options.defaultDate ? options.defaultDate : new Date(); ... }

score 0 · Answer 10 · answered Sep 23 '21 at 18:13

document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            initialView: 'dayGridMonth',
            initialDate: '2020-09-12',
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            nowIndicator: true,
            dayMaxEvents: true, // allow "more" link when too many events
            editable: true,
            selectable: true,
            businessHours: true,
            dayMaxEvents: true, // allow "more" link when too many events
            events: [{
                title: 'All Day Event',
                start: '2020-09-01',
            }]
        });
        calendar.render();
    });


Just simply add that particular date to initialDate key.

Please add some explanation to your code. – Muhammedogz Sep 24 '21 at 00:49 — Muhammedogz, Sep 24 '21 at 00:49

How to set full calendar to a specific start date when it's initialized for the 1st time?

10 Answers10

Linked