CODEWITHSUNDEEP
javascriptphpjsonlaravelfullcalendar
Jesse
Jesse

Reputation: 43

FullCalendar Json string quotes properties

Solved (see N69S's comment)
(Using Laravel)
I want to show my events in an event calendar, but when I try to parse my json it returns this line of code:

"start":"2018-10-01 10:00:00","end":"2018-10-01 13:00:00","title":"Beamer"

I know that FullCalendar requires objects instead of a string, but I can not find a clear answer.
Here is my controller:

public function calendar()
{
    $columns = [
        'start_time AS start',
        'end_time AS end',
        'title AS title',
        'name AS name'
    ];
    $allBookings = Bookings::get($columns);
    $bookings = $allBookings->toJson();
    return view('booking.calendar', compact('bookings'));
}

And here is my view:

<script src='{{asset('js/moment.js')}}'></script>
<script src='{{asset('js/jquery.js')}}'></script>
<script src='{{asset('js/jqueryui.js')}}'></script>
<script src='{{asset('js/calendar.js')}}'></script>
<div class="container">
    <div class="row">
        <div class="col-md-12 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Book Asset</div>
                <div class="panel-body">
                    <div id='calendar' class="calendar"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek'
        },
        editable: true,
        selectable: true,
        selectHelper: true,
        events: [
            JSON.parse({!! $bookings !!}) 
});
</script>

It would be a huge help if you can help me. Thanks in advance!

Upvotes: 3

Views: 305

Answers (1)

N69S
N69S

Reputation: 17205

Use the toJson() method to convert your Collection to string. you dont need to parse the Json, you can define it directly.

<script type="text/javascript">
var calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek'
    },
    editable: true,
    selectable: true,
    selectHelper: true,
    events: {!! $bookings !!} 
});

if you want to parse it, pass it as string:

  [
      JSON.parse('{!! $bookings !!}')
  ]

Upvotes: 1

Related Questions