JS FullCalendar Day & Event Double Click Functions

Question

I have seen several solutions for handling these actions but the majority deal with versions older than V4.

I would like to add functions that handle double clicking on a day, and double clicking on an event.

Below is my current setup without the sections handling these events.

<div id="calendar"></div>
<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/fullcalendar/core/main.min.js"></script>
<script src="./vendor/fullcalendar/daygrid/main.min.js"></script>
<script src="./vendor/fullcalendar/timegrid/main.min.js"></script>
<script src="./vendor/fullcalendar/interaction/main.min.js"></script>
<script src="./vendor/fullcalendar/moment/main.min.js"></script>
<script>
    var time = new Date();
    var now = time.getHours()+":00:00";
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['dayGrid','timeGrid','interaction'],

            height: 550,
            header:{
                left:   'title',
                center: '',
                right: 'today dayGridMonth timeGridWeek timeGridDay prev,next'
            },
            minTime: '05:00:00',
            maxTime: '22:00:00',
            nowIndicator: true,
            scrollTime: now,
            selectable: true,
            events: myEvents,
            slotEventOverlap: false,
            views:{
                dayGrid:{eventLimit:4},
            },
        });
        calendar.render();
      });
</script>

Now there are several solutions I have tried, First was below which returned an error that "fullCalendar is not a function"

$('#calendar').fullCalendar({
   eventRender: function(event, element) {
      element.bind('dblclick', function() {
         alert('double click!');
      });
   }
})

Next was below which was non-functional:

        eventRender: function(event, element) {
             $(element).on({
                 click: function() {
                     // Handle click...
                 },
                 dblclick: function() {
                     // Handle double click...
                 }
             });
        },

I believe my issues may stem from version differences. I would appreciate links to examples or other solutions dealing with this functionality in V4.

EDIT 1 so I can currently cause alerts for clicking/double-clicking a day or event using whats below. For some reason the dayRender functions are only triggered when the lower half of the day is clicked. I would like assistance with this.

        eventRender: function(info) {
          info.el.addEventListener('click', function() {
                clickCount++;
            if (clickCount === 1) {
                singleClickTimer = setTimeout(function() {
                    clickCount = 0;
                    alert('single click');
                }, 400);
            } else if (clickCount === 2) {
                clearTimeout(singleClickTimer);
                clickCount = 0;
                alert('double click');
            }          
          });
        },

        dayRender: function(info) {
            console.log(info.el);
          info.el.addEventListener('click', function() {
            clickCount++;
            if (clickCount === 1) {
                singleClickTimer = setTimeout(function() {
                    clickCount = 0;
                    alert('single click');
                }, 400);
            } else if (clickCount === 2) {
                clearTimeout(singleClickTimer);
                clickCount = 0;
                alert('double click');
            }          
          });
        },

Answer 1

The eventRender function receives an info parameter, that contains event and element objects. You need to use something like:

eventRender: function(info) {
    info.el.addEventListener('click', function() {
        alert('click')
    });
}

See this jsfiddle I made: https://jsfiddle.net/6jc7ngLo/