How to set full calendar to show next month

Question

I want to display next month details on the initialise of the calendar,

For example, if this month is May, the next month June should be displayed in calendar.

this is my code:

$(document).ready(function() {
  var now = new Date();
  var date = new Date(now.getFullYear(), now.getMonth() + 1, 1);
  var d = date.getDate(),
    m = date.getMonth(),
    y = date.getFullYear();
  $('#calendar123').fullCalendar({
    displayEventTime: false,
    header: {
      left: 'prev,next',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    buttonText: {
      prev: "",
      next: "",
      today: 'Today',
      month: 'Month',
      week: 'Week',
      day: 'Day'
    },

    events: [{
      title: 'Team Out',
      start: new Date(y, m, d),
      backgroundColor: ('#01BC8C')
    }],
    editable: true,
    eventLimit: true,
    droppable: true
  });
});

what is the best way to show next month details on calendar??

Possible duplicate of [How to set full calendar to a specific start date when it's initialized for the 1st time?](https://stackoverflow.com/questions/8174744/how-to-set-full-calendar-to-a-specific-start-date-when-its-initialized-for-the) — Mosh Feu, May 09 '18 at 07:03

score 2 · Accepted Answer · answered May 09 '18 at 09:10

2

This will automatically detect the current month, add 1 month to it, and use that as the default date for initial display:

var cal = $('#calendar123');
cal.fullCalendar({
  header: {
    left: 'title',
    center: '',
    right: 'prev,next today'
  },
  defaultDate: moment().add(1, "months"),
});

See http://jsbin.com/hulobarite/1/edit?html,js,console,output for a working demo

answered May 09 '18 at 09:10

ADyson

57,178
14
51
63

since FullCalendar 5.0 the field is initialDate, that accepts Date object or string https://fullcalendar.io/docs/initialDate `initialDate: moment().add(1, "months").toDate(),` – snoblucha May 31 '21 at 10:17
@snoblucha true. This answer is aimed at fullCalendar 3. I'll add a tag to the question to clarify that. – ADyson May 31 '21 at 10:27

score -1 · Answer 2 · answered May 09 '18 at 06:46

-1

Use default browser input type date.

<input id="date" type="date" value="2063-10-01">

Like usual, won't work in ie: https://caniuse.com/#feat=input-datetime

answered May 09 '18 at 06:46

NVRM

11,480
1
88
87

The OP asked specific about fullCalendar. – Mosh Feu May 09 '18 at 06:56
this is nothing to do with the question – ADyson May 09 '18 at 09:10
Yep just like jquery and modern web dev. – NVRM May 09 '18 at 09:23
I just tried to set a date after 2010 with jquery, it is saying `Fatass Error: too optimist` – NVRM May 09 '18 at 09:32
At least that is a way to consistently support `i.e` +1 – NVRM May 09 '18 at 09:37
@Cryptopat what on earth are you talking about? Your comments make no sense and your answer is still entirely unrelated to the question about setting a default date in fullCalendar. Are you feeling OK today? – ADyson May 09 '18 at 10:56
You are very kind to ask! All good, programmability! Hopefully you too! All the best anyways – NVRM May 09 '18 at 18:42

Reena Mori · Answer 3 · 2018-05-09T07:48:18.120

-1

Try this one.

 var cal = $('#calendar123');
 cal.fullCalendar({
    header: {
        left: 'title',
        center: '',
        right: 'prev,next today'
    },
    defaultDate: '2018-09-05',

    viewRender: function (view, element) {
        cur = view.intervalStart;
        d = moment(cur).add('months', 1);
    }
});`

edited May 09 '18 at 07:48

answered May 09 '18 at 06:49

Reena Mori

647
6
15

Can you check [this](http://jsbin.com/lohataj/edit?html,js,console,output)? It seems to not working. – Mosh Feu May 09 '18 at 07:02
@MoshFeu your JSBin is using an ancient version of fullCalendar, is different from the code above, and contains a typo which, if corrected, appears to result in an infinite loop. Anyway for the "viewRender" to even run, you need at least fullCalendar 1.6.3 (as per the docs) whereas you used 1.6 for your "example". – ADyson May 09 '18 at 08:52
@MoshFeu however I agree this code doesn't appear to answer the question. This does, I believe: http://jsbin.com/hulobarite/1/edit?html,js,console,output – ADyson May 09 '18 at 09:01

How to set full calendar to show next month

3 Answers3