galih56
422
1
Laravel

How to parse json data and implement fullcalendar correctly ?

Posted 3 months ago by galih56

I have project that supposed to display calendar with dynamic load events. I created method inside controller that can return view and jsonparsed dataat the same time.But the data is not encoded correctly.What do i miss??

the error handler shows me this error: htmlspecialchars() expects parameter 1 to be string, array given

how to fix this problem??

and also i want to know,is this step good to implement fullcalendar.io in laravel?

Method show from controller

public function show($id)
    {
        $rp = Transaksi::find($id);
        if ($rp == null) {
            return redirect('ruangrapat');
        }
        $t = Transaksi::whereRaw("upper(nip_pemesan) like upper('%" . Auth::user()->nip . "%')")->get();
        $n = Notulen::find($rp->id_notulen);
        $events = [];
        foreach ($t as $item) {
            $events[] = [
                'judul_rapat' => $item->judul_rapat,
                'start' => $item->start,
                'finish' => $item->finish,
                'url' => url('transaksi/' . $item->id),
            ];
        }
        $w = json_encode($events);
        // $event_list[] = Calendar::event($rp->judul_rapat, true, new \DateTime($rp->start), new \DateTime($rp->finish));
        // $calendar_details = Calendar::addEvents($event_list);

        return view('ajax-result.transaksi.show')->with(compact('rp', 'w', 'n'));
    }

"use strict";
    $('#calendar').fullCalendar({
        header: {
            left: 'prev',
            center: 'title',
            right: 'next'
        },
        defaultDate: '{{ $rp->start }}',
        eventLimit: true, // allow "more" link when too many events
        events:{{ json_decode($w) }}
    });

    // Previous month action
    $('#cal-prev').on('click',function(){
        $('#calendar').fullCalendar( 'prev' );
    });

    // Next month action
    $('#cal-next').on('click',function(){
        $('#calendar').fullCalendar( 'next' );
    });

    // Change to month view
    $('#change-view-month').on('click',function(){
        $('#calendar').fullCalendar('changeView', 'month');

        // safari fix
        $('#content .main').fadeOut(0, function() {
            setTimeout( function() {
                $('#content .main').css({'display':'table'});
            }, 0);
        });

    });

    // Change to week view
    $('#change-view-week').on('click',function(){
        $('#calendar').fullCalendar( 'changeView', 'agendaWeek');

        // safari fix
        $('#content .main').fadeOut(0, function() {
            setTimeout( function() {
                $('#content .main').css({'display':'table'});
            }, 0);
        });

    });

    // Change to day view
    $('#change-view-day').on('click',function(){
        $('#calendar').fullCalendar( 'changeView','agendaDay');

        // safari fix
        $('#content .main').fadeOut(0, function() {
            setTimeout( function() {
                $('#content .main').css({'display':'table'});
            }, 0);
        });

    });

    // Change to today view
    $('#change-view-today').on('click',function(){
        $('#calendar').fullCalendar('today');
    });

    /* initialize the external events
     -----------------------------------------------------------------*/
    $('#external-events .event-control').each(function() {

        // store data so the calendar knows to render an event upon drop
        $(this).data('event', {
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true // maintain when user navigates (see docs on the renderEvent method)
        });
    });

    $('#external-events .event-control .event-remove').on('click', function(){
        $(this).parent().remove();
    });

    // Submitting new event form
    $('#add-event').submit(function(e){
        e.preventDefault();
        var form = $(this);

        var newEvent = $('<div class="event-control p-10 mb-10">'+$('#event-title').val() +'<a class="pull-right text-muted event-remove"><i class="fa fa-trash-o"></i></a></div>');

        $('#external-events .event-control:last').after(newEvent);

        $('#external-events .event-control').each(function() {

            // store data so the calendar knows to render an event upon drop
            $(this).data('event', {
                title: $.trim($(this).text()), // use the element's text as the event title
                stick: true // maintain when user navigates (see docs on the renderEvent method)
            });

            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });

        });

        $('#external-events .event-control .event-remove').on('click', function(){
            $(this).parent().remove();
        });

        form[0].reset();

        $('#cal-new-event').modal('hide');

    });

Please sign in or create an account to participate in this conversation.