JSFiddle - React, Tailwind, and code Playground

by Ketan Patel

HTML

<script src="http://qtip2.com/v/stable/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://qtip2.com/v/stable/jquery.qtip.css">
<link rel="stylesheet" href="http://qtip2.com/static/stylesheets/libs/jquery.fullcalendar.css">
<script src="http://qtip2.com/static/javascripts/libs/jquery.fullcalendar.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<div id="fullcalendar"></div>

JavaScript

// Setup FullCalendar
(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  var tooltip = $('<div/>').qtip({
    id: 'fullcalendar',
    prerender: true,
    content: {
      text: ' ',
      title: {
        button: true
      }
    },
    position: {
      my: 'bottom center',
      at: 'top center',
      target: 'mouse',
      viewport: $('#fullcalendar'),
      adjust: {
        mouse: false,
        scroll: false
      }
    },
    show: false,
    hide: false,
    style: 'qtip-light'
  }).qtip('api');

  $('#fullcalendar').fullCalendar({
    editable: true,
    height: 300,
    header: {
      left: 'title',
      center: '',
      right: 'today prev,next'
    },
    eventClick: function(data, event, view) {
      var content = '<h3>' + data.title + '</h3>' +
        '<p><b>Start:</b> ' + data.start + '<br />' +
        (data.end && '<p><b>End:</b> ' + data.end + '</p>' || '');

      tooltip.set({
          'content.text': content
        })
        .reposition(event).show(event);
    },
    dayClick: function() {
      tooltip.hide()
    },
    eventResizeStart: function() {
      tooltip.hide()
    },
    eventDragStart: function() {
      tooltip.hide()
    },
    viewDisplay: function() {
      tooltip.hide()
    },
    events: [{
      title: 'All Day Event',
      start: new Date(y, m, 1)
    }, {
      title: 'Long Event',
      start: new Date(y, m, d - 5),
      end: new Date(y, m, d - 2)
    }, {
      id: 999,
      title: 'Repeating Event',
      start: new Date(y, m, d + 4, 16, 0),
      allDay: false
    }, {
      title: 'Meeting',
      start: new Date(y, m, d, 10, 30),
      allDay: false
    }, {
      title: 'Birthday Party',
      start: new Date(y, m, d + 1, 19, 0),
      end: new Date(y, m, d + 1, 22, 30),
      allDay: false
    }]
  });
}());