title: JS FullCalendar Day & Event Double Click Functions
body: <p>I have seen several solutions for handling these actions but the majority deal with versions older than V4.</p>
  
  <p>I would like to add functions that handle double clicking on a day, and double clicking on an event.</p>
  
  <p>Below is my current setup <strong>without</strong> the sections handling these events.</p>
  
  <pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
  &lt;script src="./vendor/jquery/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="./vendor/fullcalendar/core/main.min.js"&gt;&lt;/script&gt;
  &lt;script src="./vendor/fullcalendar/daygrid/main.min.js"&gt;&lt;/script&gt;
  &lt;script src="./vendor/fullcalendar/timegrid/main.min.js"&gt;&lt;/script&gt;
  &lt;script src="./vendor/fullcalendar/interaction/main.min.js"&gt;&lt;/script&gt;
  &lt;script src="./vendor/fullcalendar/moment/main.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      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();
        });
  &lt;/script&gt;
  </code></pre>
  
  <p>Now there are several solutions I have tried, First was below which returned an error that "fullCalendar is not a function"</p>
  
  <pre><code>$('#calendar').fullCalendar({
     eventRender: function(event, element) {
        element.bind('dblclick', function() {
           alert('double click!');
        });
     }
  })
  </code></pre>
  
  <p>Next was below which was non-functional:</p>
  
  <pre><code>        eventRender: function(event, element) {
               $(element).on({
                   click: function() {
                       // Handle click...
                   },
                   dblclick: function() {
                       // Handle double click...
                   }
               });
          },
  </code></pre>
  
  <p>I believe my issues may stem from version differences. I would appreciate links to examples or other solutions dealing with this functionality in V4.</p>
  
  <p><strong>EDIT 1</strong> so I can currently cause alerts for clicking/double-clicking a day or event using whats below. For some reason the <code>dayRender</code> functions are only triggered when the lower half of the day is clicked. I would like assistance with this.</p>
  
  <pre><code>        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');
              }          
            });
          },
  </code></pre>