fullcalendar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div id='calendar'></div>

JavaScript

$(document).ready(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();
  console.log(y + "-" + m + "-" + d);

  $('#calendar').fullCalendar({
    defaultView: 'month',
    fixedWeekCount: false,
    editable: true,
    droppable: true,
    eventLimit: true,
    selectable: true,
    slotDuration: "00:41:00",
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    eventRender: function(event) {
      if (event.ranges) {
        return (event.ranges.filter(function(range) { // test event against all the ranges

          return (event.start.isBefore(range.end) &&
            event.end.isAfter(range.start));

        }).length) > 0; //if it isn't in one of the ranges, don't render it (by returning false)
      } else {
        return true;
      }
    },
    events: [{
     
      id: 1,
      title: "fc event",
      start: "10:00",
      end: "12:00",
      dow: [1,3, 4],
      ranges: [{       
        start: "2018-06-01",
        end: "2018-08-01"
      }]
    }]
  });
  
 var ttt = [{
     
      id: 1,
      title: "dynamic call",
      start: "10:00",
      end: "12:00",
      dow: [6],
      ranges: [{       
        start: "2018-06-01",
        end: "2018-08-01"
      }]
    }]
 var myCalendar = $("#calendar"); 
myCalendar.fullCalendar();
myCalendar.fullCalendar( "addEventSource", ttt );
  
});