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

admin管理员组

文章数量:1135124

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?

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?

• javascript
• jquery
• fullcalendar

Share Improve this question Follow edited Apr 1, 2014 at 12:04 suhailvs 21.7k1414 gold badges102102 silver badges102102 bronze badges asked Nov 17, 2011 at 21:41 StefanStefan 54511 gold badge44 silver badges88 bronze badges

Add a comment  | 

10 Answers 10

Sorted by: Reset to default 94

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.

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

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

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

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'),
    ...
});

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

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',
     ...
});

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.

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

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

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

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.

本文标签：