@extends('layouts.app')

@section('content')
<div class="col-12">

</div>

<div class="col-12">
    <div class="card">
        <div class="card-body ">
            <div class="row">
                <div class="col-12">
                    <div id="calendar-23564488"></div>
                </div>
            </div>

        </div>
    </div>
</div>
    @section('script')
    <script>
        $(document).ready(function(){

            $('#calendar-23564488').fullCalendar(
                {"header":{
                    "left":"prev, next today",
                    "center":"title",
                    "right":"month, agendaWeek, agendaDay"
                },
                "eventLimit":true,
                "selectable":true,
                "timeFormat":"H(:mm)",
                //nextDayThreshold: '09:00:00',
                // @foreach ($ddos as $ddo)
                // "events":[{
                //     "id":"stringEventId",
                //     "title":"{{ $ddo->first_name . ' ' . $ddo->last_name }}",
                //     "allDay":false,
                //     "start":'{{ $ddo->from_date}}T{{ $ddo->time_in}}:00',
                //     "end":'{{ $ddo->to_date}}T{{ $ddo->time_out}}:00'
                // }],
                // @endforeach


                'businessHours': [ // specify an array instead
  {
    daysOfWeek: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
    startTime: '08:00', // 8am
    endTime: '18:00' // 6pm
  },
  {
    daysOfWeek: [ 4, 5 ], // Thursday, Friday
    startTime: '10:00', // 10am
    endTime: '16:00' // 4pm
  }
]
            });

        });
    </script>
    @endsection
@endsection