How to create a full day event in fullcalendar

Question

I am really stuck with this.How can i create a full day event in fullcalendar when clicked on a day.

dayClick: function (date, allDay, jsEvent, view) {

  var eventTitle = prompt('Provide Event title');

  if (eventTitle) {
    $('#calendar').fullCalendar('renderEvent', {
      title : eventTitle,
      allDay : true,
      stick : true,
    });
  }
}

Answer 1

You haven't actually said what's going wrong with this code, but it seems fairly obvious that you missed out the start and end dates. Otherwise how will the calendar know where you want to place the event? It doesn't take any implication from the fact that you called "renderEvent" from inside the "dayClick" method, that's just a coincidence. "renderEvent" can be called anytime and is independent. It expects you to tell it everything about the event you want to add.

If you'd checked your browser console after you tried to add the event, you'd have noticed an error "Cannot read property 'stripTime' of undefined" which would hopefully have given you a clue about the nature of the error, being related to time. You could also trace it back in the source to see what it was doing and what you had omitted to do.

Anyway, since you want this to be an all-Day event for a single day, you can use the date property supplied by the callback quite easily:

dayClick: function (date, allDay, jsEvent, view) {

  var eventTitle = prompt('Provide Event title');

  if (eventTitle) {
    $('#calendar').fullCalendar('renderEvent', {
      title : eventTitle,
      allDay : true,
      start: date, //specify start date
      stick : true,
    });
  }
}

Note that, as per https://fullcalendar.io/docs/event_data/Event_Object/, only "start" is required. "end" is optional and I haven't used it. If you specify "allDay: true" and only supply a start date, then fullCalendar will assume it's an all-day event for a single day.

For future reference: If you want to allow more flexibility in adding events (e.g. not all-day ones), you should use the "select" callback instead to allow users to specify the exact start and end times for the event by dragging their mouse on the calendar. https://fullcalendar.io/docs/selection/select_callback/