0

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,
    });
  }
}
ADyson
  • 57,178
  • 14
  • 51
  • 63
Pooja
  • 113
  • 1
  • 2
  • 7

1 Answers1

3

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/

ADyson
  • 57,178
  • 14
  • 51
  • 63
  • It actually doesn't plot anything if you supply end. So you need to specify star and allDay to plot these events. – somecallitblues Jun 15 '18 at 05:34
  • @somecallitblues I thought I had made that fairly clear in the answer and the example...is there something I should clarify in the text? I'm not quite sure what you're getting at but I can amend it if you can detail what you mean. The example shows adding start and allDay as you mention. Naturally if you only supply an end date then it can't work, that seems fairly self-evident. – ADyson Jun 15 '18 at 08:46
  • you said ""end" is optional and I haven't used it", so my reply is referring to that. The calendar will not plot events if you have start, end, and allDay . You can't have the "end" attribute in there. Only start and allDay. I hope makes sense and I apologise for being too brief in my comment. – somecallitblues Jul 11 '18 at 06:53
  • @somecallitblues "The calendar will not plot events if you have start, end, and allDay"...sorry but where's your evidence for that statement? See http://jsfiddle.net/sbxpv25p/930/ for a demo which includes all 3 properties and displays the events. In my reply to your first comment I thought you were saying it would not work if _only_ the "end" date was supplied, which clearly it wouldn't. However if you supply start, end and allDay it works fine. I can only think maybe you're using Agenda view and set https://fullcalendar.io/docs/allDaySlot to false or something? – ADyson Jul 11 '18 at 08:31