Recurring events in FullCalendar with Laravel

Question

I'm working on a fullcalendar module for my page.I could display Events on calendar without the recurring feature. But when I altered my table to include recurring features I could not display events from the table. This is my table structure.

The Update function in controller is called while the form is submitted and i noticed that it is being updated in the table.This is my form.

and this is my controller update function.

public function update($id)
{
    //$type=Input::get('type');
    $event_id= Input::get('eventid');
    $title= Input::get('title');
    $start_day=Input::get('start');
    $end_day=Input::get('end');
    $allday=Input::get('allday');
    $repeat=Input::get('repeat');
    $frequency=Input::get('frequency');
    $start_time=Input::get('start_time');
    $end_time=Input::get('end_time');   
    $dow=Input::get('dow');
    $month=Input::get('month');
    $weekly_json=json_encode($dow);
    $monthly_json=json_encode($month);          
    $newstrt=substr($start_day,0,10);
    $newend=substr($end_day,0,10);
    $start= date("Y-m-d H:i:s",$newstrt);
    $end= date("Y-m-d H:i:s" , $newend);
    $roles = DB::table('events')
                ->where('event_id','=',$event_id)
                ->update(array('title' => $title,'daily'=>$allday,'repeat'=>$repeat,'frequency'=>$frequency,'start'=>$start,'end'=>$end,'time'=>$time,'dow'=>$weekly_json,'monthly_json'=>$monthly_json));

    if (Request::ajax())
    { 

    return Response::json(array('id'=>$event_id,'title'=>$title,'newstrt'=>$start,'newend'=>$end,'start_time'=>$start_time,'end_time'=>$end_time));
    }               
    else 
    {
        return  Redirect::route('calendar.index');
    }
}

But I'm not being able to display these details on the full calendar.I was following this link to implement recurring events on fullcalendar. Recurring Events in FullCalendar .

This is my index function used for GETting details from the table.

public function index()
{
    $event = DB::table('events')

    ->leftJoin('people','people.people_id','=','events.people_id')  
    ->where('events.flag', '=', 1)          
    ->get(array('events.event_id','events.title','events.start','events.end','events.start_time','events.end_time','events.repeat','events.frequency','events.dow'));   
    $id=array(array());
    $temp = array(array());
    $i=0;
    foreach ($event as $events)
        {
            $j=0;
            $id[$i]["event_id"]=$events->event_id;
            $id[$i]["title"]=$events->title;
            $temp[$j]['start']=$events->start;
            $temp[$j]['end'] = $events->end;
            $temp[$j]['start_time']=$events->start_time;
            $temp[$j]['end_time'] = $events->end_time;
            $start_json=json_encode($temp);
            $id[$i]['range'] = $start_json;
            $id[$i]["frequency"]=$events->frequency;
            $id[$i]["repeat"]=$events->repeat;
            $id[$i]["dow"]=$events->dow;

            $i++;           
        }


    return Response::json($id);
}

This is my calendar eventrender function and events structure.

var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var repeatingEvents = [{
                url: '/v1/calendar/',
                type: 'GET',
        ranges: [{ //repeating events are only displayed if they are within one of the following ranges.
            start: moment().startOf('week'), //next two weeks
            end: moment().endOf('week').add(7,'d'),
        },{
            start: moment('2015-02-01','YYYY-MM-DD'), //all of february
            end: moment('2015-02-01','YYYY-MM-DD').endOf('month'),
        }],
    }];

    console.log(repeatingEvents);

    var getEvents = function( start, end ){
        return repeatingEvents;
    }

    var calendar=$('#calendar');
    $.ajax({
                url: '/v1/calendar/',
                type: 'GET',
                dataType:'json',


                success:function events(response)

                {

                    console.log(response);




    calendar.fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

        eventRender: function(event, element, view){
                console.log(event.start.format());
                return (event.range.filter(function(range){
                    return (event.start.isBefore(range.end) &&
                            event.end.isAfter(range.start));
                }).length)>0;
            },
            events: function( start, end, timezone, callback ){
                var events = getEvents(start,end); //this should be a JSON request

                callback(events);
            },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar

        drop: function() {
            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }
        },



        eventSources: [

            {

                url: '/v1/calendar/',
                type: 'GET',
                dataType:'json',



            },
           calendar.fullCalendar( 'addEventSource', response )
        ],

        selectable: true,
        selectHelper: true,
        select: function(start, end, allDay) 

and I am getting JSON response like this on the console.

dow: "{[0,1,2]↵}"
event_id: 1
frequency: "weekly"
range: "[{"start":"2015-09-11","end":"2015-09-12","start_time":"11:00:00","end_time":"15:00:00"}]"
repeat: 1
title: "Youth festival"

I get no errors on the console....but the events aren't displayed too.. where did i go wrong? Helps guys?

Answer 1

See this code, i am also facing
After that I use this idea ,its working

In Controller

    $vendor_holiday = Vendor::all();
    return view('vendorpanel/holidays/index', compact('vendor_holiday'));

<script>
var calendar = $('#calendar').fullCalendar({
editable: false,
header: {
  left: 'prev,next today',
    center: 'title',
    right: 'month'
},
events:  [
    @foreach($vendor_holiday as $vendor_holiday)
    {
        title : "",
        start : '{{ $vendor_holiday->start }}',
    },
    @endforeach
],
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
  $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var start = moment(start).format('YYYY-MM-DD');
        var end = moment(end).format('YYYY-MM-DD');
        var vendor_id = $("#vendor_id").val();
        var tdate = new Date();
var dd = tdate.getDate(); //yields day
var MM = tdate.getMonth(); //yields month
var yyyy = tdate.getFullYear(); //yields year
var currentDate=  yyyy+ "-" +0+( MM+1) + "-" + dd;
         if(start <= currentDate){
             alert("Mark Holiday at least 1 day before");
             return false;
         }
         if (confirm("Are you sure you want to Add a Holiday?")) {
        $.ajax({
            url: "/vendor/holidays",
            type: "POST",
            data: { vendor_id: vendor_id, start: start, end: end },
            success: function (d) {
                calendar.fullCalendar('refetchEvents');
                alert(d);
                location.reload();
            },
        })
    }
},
eventClick: function (calEvent, jsEvent, view, event) {
  $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    if (confirm("Are you sure you want to remove it?")) {
        var start = calEvent.start.format();
        var vendor_id = $("#vendor_id").val();
        $.ajax({
            url: '/vendor/holidays/'+vendor_id,
            type: "DELETE",
            data: { _method: 'delete', start: start },
            success: function (d) {
                $('#calendar').fullCalendar('removeEvents', calEvent._id);
                alert(d);
            },
            error: function (data) {
                alert(data);
            }
        });
    }
},
});
</script>

Answer 2

Laravel - Recurring event occurrences generator and organiser.

Calendarful is a simple and easily extendable PHP solution that allows the generation of occurrences of recurrent events, thus eliminating the need to store hundreds or maybe thousands of occurrences in a database or other methods of storage.

This package ships with default implementations of interfaces for use out of the box although it is very simple to provide your own implementations if needs be.

It is compliant with PSR-2.

Installation

This package can be installed via Composer:

https://github.com/Vij4yk/calendarful

$ composer require plummer/calendarful

It requires PHP >= 5.3.0

Try this package.