Search code examples
javascripthtmlfullcalendarfullcalendar-5

how to display all details of selected event immediately on fullcalendar

I have the following html page that uses fullcalendar:

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    editable: true,
    headerToolbar: {
      start: 'prev,next today',
      center: 'title',
      end: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    selectable: true, //can click to set event
    selectMirror: true, // so it's solid 
    unselectAuto: false, //if you click outside calendar, event doesn't disappear, but if you click inside calendar, event still disappears

    editable: true,
    eventStartEditable: true,
    eventResizableFromStart: true,
    eventDurationEditable: true,
    select: function(selectionInfo) {
      calendar.addEvent({
        title: 'dynamic event',
        start: selectionInfo.start,
        end: selectionInfo.end //need these and not endTime/startTime, otherwise they won't re-render
      });
    }



  });
  calendar.render();

});
<!DOCTYPE html>
<html>

<head>
  <title>Fullcalendar Demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
</head>

<body>
  <div id="calendar"></div>
</body>

</html>

When the calendar is in the week view, and I click (just click once and don't do anything - this is important) somewhere, a 30-minute event is created (the start and end times depend on where you click) and I am able to see the start and end times on the event, but not the title ("dynamic event"). It is only when I click elsewhere on the calendar that I can see the title being displayed on the aforementioned event. I have confirmed through console.log statements (not in the code) that the title is actually present in the event object in the javascript, but is there a way that the title will immediately be visible with just one click (so probably something that needs to be done in the select function)?

Solution

  • You just need to run calendar.unselect(); after you've added the event so that the element which visualises the selection (which because of the selectMirror option is solid rather than transparent) doesn't overlay on top of the rendered event.

    Selections are not cleared automatically until you click somewhere else (unless you have unselectAuto: true in the options).

    Relevant documentation:

    https://fullcalendar.io/docs/Calendar-unselect

    https://fullcalendar.io/docs/unselectAuto

    Demo:

    document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    editable: true,
    headerToolbar: {
      start: 'prev,next today',
      center: 'title',
      end: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    selectable: true, //can click to set event
    selectMirror: true, // so it's solid 
    unselectAuto: false, //if you click outside calendar, event doesn't disappear, but if you click inside calendar, event still disappears

    editable: true,
    eventStartEditable: true,
    eventResizableFromStart: true,
    eventDurationEditable: true,
    select: function(selectionInfo) {
      calendar.addEvent({
        title: 'dynamic event',
        start: selectionInfo.start,
        end: selectionInfo.end //need these and not endTime/startTime, otherwise they won't re-render
      });
      calendar.unselect();
    }



  });
  calendar.render();

});
    <!DOCTYPE html>
<html>

<head>
  <title>Fullcalendar Demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
</head>

<body>
  <div id="calendar"></div>
</body>

</html>