<div class="row">
    <div class="msnry animated fadeInUp">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 item">
            <div class="panel panel-event">
                <div class="panel-body">
                    <div id="calendar"></div> 
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        events: '/events/json_index',
        //defaultView: 'agendaWeek',
        editable: false,
        droppable: false,
        weekMode: 'liquid',
        <?php if (Configure::read('CFG.time_format') == 'H:i') { ?>
        axisFormat: 'HH:mm',
        timeFormat: 'HH:mm',
        <?php } ?>
        eventColor: '#ef5b5f',
        eventTextColor: '#ffffff',
        allDaySlot: false,
        eventClick: function(calEvent, jsEvent, view) {
            id = calEvent.id;
            window.location='events/view/' + id;
        },
        eventRender: function(event, element) {
            element.css('cursor', 'pointer');
        }
    });
});
</script>