zabuto/calendar

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/zabuto/calendar/master/zabuto_calendar.min.css">
<script src="https://rawgit.com/zabuto/calendar/master/zabuto_calendar.min.js"></script>
<!-- 
https://github.com/zabuto/calendar http://zabuto.com/dev/calendar/examples/action.html
use https://rawgit.com/ to serve file 
-->
<div id="date-popover" class="popover top" >
    <h3>
    lalalallalala
    </h3>
    <div id="date-popover-content" class="popover-content"></div>
</div>


<div id="my-calendar"></div>

JavaScript

var eventData = [
    {"date":"2018-11-01","badge":false,"title":"Example 1"},
    {"date":"2018-11-02","badge":true,"title":"Example 2"}
];

    $(document).ready(function () {
     
       

        $("#my-calendar").zabuto_calendar({
            action: function () {
                return myDateFunction(this.id, false);
            },
            action_nav: function () {
                return myNavFunction(this.id);
            },
            data: eventData,
                modal: true,
            
            legend: [
                {type: "text", label: "Special event", badge: "00"},
                {type: "block", label: "Regular event"},
                {type: "block", label: "Regular event2"},
            ]
        });
       $("#date-popover").click(function(){
       $("#date-popover").hide();
       
       });

    	function myDateFunction(id, fromModal) {
      
        if (fromModal) {
            $("#" + id + "_modal").modal("hide");
        }
        var date = $("#" + id).data("date");
        var hasEvent = $("#" + id).data("hasEvent");
        if (!hasEvent && !fromModal) {
            return false;
        }
    $("#date-popover").show();
    	}

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

   });