JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Reservations </title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zabuto_calendar/1.6.4/zabuto_calendar.min.css">
  </head>

  <body>
    <div class="container calendar">
      <div class="row">
        <div class="col-md-6">

          <div id="date-popover" class="popover top">
            <h3>More Information</h3>


            <div id="date-popover-content" class="popover-content"></div>

            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

          </div>
          <!-- define the calendar element -->
          <div id="my-calendar"></div>

        </div>



      </div>
      <!-- end calender row -->
    </div>
    <!-- end container calender  -->


    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zabuto_calendar/1.6.4/zabuto_calendar.js"></script>
  </body>

</html>

CSS

#date-popover .popover-content {
  white-space: pre-wrap;
}

JavaScript

var eventData = [

  {
    "date": "2019-06-02",
    "badge": false,
    "title": "Boxing Day",
    "body": "party nights",
    "footer": "all night",
    "classname": "grad100"
  },
  {
    "date": "2019-06-01",
    "badge": false,
    "title": "New Years Eve",
    "body": "party nights",
    "footer": "all night",
    "classname": "grad75"
  }



];

$(document).ready(function() {

  $("#my-calendar").zabuto_calendar({
    action: function(event) {
      console.log(event)
      return myDateFunction(this.id, false);
    },
    action_nav: function() {
      return myNavFunction(this.id);
    },
    data: eventData,
    modal: true,

    /* The legend 

            legend: [
                {type: "text", label: "Special event", badge: "00"},
                {type: "block", label: "Regular event"}
            ]

    */
  });
  $("#date-popover").click(function() {
    $("#date-popover").hide();

  });

  function myDateFunction(id, fromModal) {

    console.log({
      id
    })
    if (fromModal) {
      $("#" + id + "_modal").modal("hide");
    }
    var date = $("#" + id).data("date");
    var eventItem = eventData.find(function(item) {
      return item.date === date;
    })
    if (!eventItem && !eventItem) {
      return false;
    }
    const lines = [
      "You clicked on " + eventItem.date,
      "Which is a  " + eventItem.title + ".",
      "This is one of our " + eventItem.body,
      "we are currently " + eventItem.classname
    ]
    $("#date-popover .popover-content").text(lines.join('\n'))
    $("#date-popover").show();
  }

  function myNavFunction(id) {

    $("#date-popover").hide();
    var nav = $("#" + id).data("navigation");
    var to = $("#" + id).data("to");
  }

});