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 json_events = '[{"id":"1","start":"10:00","end":"12:00","title":"my event1","dow":"2","ranges":[{"dowstart":"2018-06-07","dowend":"2018-06-27"}],"color":"lightgreen"},{"id":"2","start":"14:00","end":"18:00","title":"my event2","dow":"0,5","ranges":[{"dowstart":"2018-06-07","dowend":"2018-07-07"}],"color":"lightblue"},{"id":"4","start":"14:00","end":"16:00","title":"my event3","dow":"1,4","ranges":[{"dowstart":"2018-06-07","dowend":"2018-07-07"}],"color":"pink"},{"id":"5","start":"14:00","end":"16:00","title":"my event4","dow":"1,4","ranges":[{"dowstart":"2018-08-08","dowend":"2018-08-18"}],"color":"pink"}]';

//console.log(JSON.parse(json_events));

$('#calendar').fullCalendar({
    events: JSON.parse(json_events),
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'month',
    editable: true, 
    slotDuration: '00:30:00',
    eventRender: function(event){
        return (event.ranges.filter(function(range){ 
            return (event.start.isBefore(moment(range.dowend)) && event.end.isAfter(moment(range.dowstart)));
        }).length) > 0;
    },
    eventReceive: function(event){
        var title = event.title;
        var start = event.start.format("YYYY-MM-DD[T]HH:mm:SS");
        $.ajax({
            url: 'process.php',
            data: 'type=new&title='+title+'&startdate='+start+'&zone='+zone,
            type: 'POST',
            dataType: 'json',
            success: function(response){
                event.id = response.eventid;
                $('#calendar').fullCalendar('updateEvent',event);
            },
            error: function(e){
                console.log(e.responseText);
            }
        });      
    }
});
});