fullcalendar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale-all.js"></script>
<div id='workshifts_ocupations_calendar'></div>

JavaScript

$(document).ready(function() {
  $('#workshifts_ocupations_calendar').fullCalendar({
  defaultView: 'agendaWeek',
  eventSources: [
    {
      id: "workshiftSource", 
      url: 'https://api.myjson.com/bins/rw6pw',
      editable:true,
      success: function(){
        console.log("turnos");
      }
    },
    {
      id: "backSource",
      url: 'https://api.myjson.com/bins/1a24dw',
      rendering: 'background',
      editable:false,
      success: function(){
        console.log("fondos");
      }
    }
  ],
  eventRender: function(event, element) {
    // Si es background - Mostramos el tĂ­tulo.
    if(event.source.rendering == "background"){
      element.html('<span class="backgroundEventsTitle">' + event.title + "</span>");
    }
  },
  locale: 'es',
  themeSystem: 'bootstrap3',
  minTime: '07:00:00',
  maxTime: '23:00:00',
  slotDuration: '00:15:00',
  slotLabelInterval: '00:30:00',
  slotLabelFormat: 'H:mm',
  selectable: true,
  allDaySlot: false,
  selectConstraint:{
    start: '07:00',
    end: '23:00',
  },
  eventConstraint:{
    start: '07:00',
    end: '23:00',
  },
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  }

});
});