<style>
   .fc-event
   {
    background-color:#fff;
    border:1px solid #fff;
}

</style>
<div class="container mt-5 mb-5">
    <div class="card bg-light-transparent">  
        <div class="card-header bg-white">
            <div class="float-left">
                <h5>Meeting Room Booking Calendar</h5>           
                <a href="<?php echo base_url('hr/serviceform/onlineForm/meeting_list') ?>" data-tooltip="tooltip" title="Listing" class="btn btn-outline-dark btn-sm d-print-none" title="Print"><i class="fa fa-list"></i>List</a>
                <a onclick="window.print()" target="_blank" class="btn btn-outline-dark btn-sm d-print-none" title="Print"><i class="fa fa-print"></i>Print</a>
                <br>
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="fc-overflow">
                                    <div id="calendar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {

        $('#calendar').fullCalendar({
            themeSystem: 'bootstrap4',
            header: 
            {
                left: 'prev,next today',
                center: 'title',
                right: 'month,listMonth'
            },
            buttonText: {
                today: 'Today',
                month: 'Calendar',
                listMonth: 'List'
            },

            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [
            <?php if(!empty($booking_calendar)): foreach($booking_calendar as $booking): 
                $startDate  = $booking['start_date'];
                $endDate    = $booking['end_date'];

                ?>
                {
                    title       : '<?php echo $booking['dept_name']; ?>',
                    start       : '<?php echo $startDate; ?>',
                    end         : '<?php echo date('Y-m-d',strtotime($endDate."+1 days")); ?>',
                    color       : '#006600',
                    textColor   : '#ffffff',
                },
            <?php endforeach; endif; ?>
            ]
        });

    });
</script>