FullCalendar

by slicedtoad

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css">
<title>Full Calendar Test</title>
    
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>

<script src="http://momentjs.com/downloads/moment.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.3/fullcalendar.min.js"></script>
    
<body>
    <div id="calendar">
        
    </div>

</body>

JavaScript

$(document).ready(function () {
        $('#calendar').fullCalendar({
            defaultView: 'agendaWeek',
            lang: 'es',
            contentHeight: "auto",
            views: {
                agenda: { // name of view
                    axisFormat: 'H:mm',
                    timeFormat: 'H:mm', // uppercase H for 24-hour clock,
                    titleFormat: 'DD/MM YYYY',
                    timezone: 'local',
                    columnFormat: 'dddd D/M',
                    allDaySlot: false,
                    slotDuration: '01:00:00'
                }
            },     
            events :    [
                {"id":"1","playingfield_id":"1","dow":null,"when":null,"start":"10:00:00","end":"14:00:00", rendering:"background"},
                {"id":"2","playingfield_id":"1","dow":"6","when":null,"start":"14:00:00","end":"15:00:00", rendering:"background"},
                {"id":"3","playingfield_id":"1","dow":null,"when":"2015-05-05","start":"15:00:00","end":"16:00:00", rendering:"background"}
            ],
            eventDataTransform: function(event) {
                if (event.when) {
                    event.start = event.when + 'T' + event.start;
                    event.end = event.when + 'T' + event.end;
                }
                console.log(event);
                return event;
            }
        });
    });