Fullcalendar v3.6.2 startParam and endParam

Question

How to use startParam and endParam in fullcaledar? I don´t know much about jQuery and Javascript. The view is in the route: example.com/agenda, then I thought that I have to put the startParam and endParam in the following way in my script:

    startParam: 'agenda.start',
    limitParam : 'agenda.limit',

The idea is to avoid the slow loading of events (about 10 seconds) by limiting both parameters so that only loads what is seen on the page at that moment. Have I understood it well? This does not work, I mean that it continues to load slowly, the rest works perfect. How should I do it? Thanks.

This is the complete file my-fullcalendar.js I collect data from a json file:

var currentLangCode = $("#lang_js").data('value');

$('#calendar').fullCalendar({

    locale:currentLangCode,
    eventColor: '#58C1AB',
    eventTextColor: '#fff',
    startParam: 'agenda.start',
    limitParam : 'agenda.limit',

    eventClick:  function(event, jsEvent, view) {  // when some one click on any event

        if(currentLangCode == 'en'){
            startdate = moment(event.start).format('ddd, MMM D');
            enddate = moment(event.end).format('ddd, MMM D YYYY');
        }else{
            startdate = moment(event.start).format('dddd, D MMMM YYYY');
            enddate = moment(event.end).format('dddd, D MMMM YYYY');
        }

        starttime = moment.utc((event.start), "H:mm");
        endtime = moment.utc((event.end), "H:mm");

        var s_time = starttime.format("H:mm");
        var e_time = endtime.format("H:mm");

        if(s_time == '0:00'){
            var mytime = '';
        }else{
            var mytime = '<img src="images/web/icons/clock.svg" class="icono" width="18"> ' + s_time + ' - ' + e_time;
        }

        if(enddate == startdate){
            var mydate = '<img src="images/web/icons/date.svg" class="icono" width="18"> ' + startdate;
        }else if(event.end == null){
            var mydate = '<img src="images/web/icons/date.svg" class="icono" width="18"> ' + startdate;
        }else{
            var mydate = '<img src="images/web/icons/date.svg" class="icono" width="18"> ' + startdate + ' - ' + enddate;
        }

        if((event.imagen)){
            var myimage = '<img src="'+(event.imagen)+'" width="100%"/>';
        }else{
            var myimage = '';
        }
        var myplace = '<img src="images/web/icons/map-marker.svg" class="icono" width="18"/> ' +(event.lugar);

        $('#modalTitle').html(event.title);
        $('#modalPlace').html(myplace);
        $('#modalDate').html(mydate);
        $('#modalTime').html(mytime);
        $('#modalImage').html(myimage);

        $('#calendarModal').modal();
    },

    header: {
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },

    editable: false,
    eventLimit: true,
    events:{
        url:'agenda/evento'
    },


});

And this is the controller. I´m using Laravel 5.4:

class EventoController extends Controller
{
public function index()
{
        return view('web.agenda.index', compact('calendar'));
}

public function api(Request $request)
{

    $events = Evento::where('active', '1')->orderBy('start_date')->get();

    $lang = Session::get('lang');
    if($lang == 'en') $lang_id = '2';
    elseif($lang == 'pt') $lang_id = '3';
    else $lang_id = '1';

    $data = [];
    foreach($events as $event){

        foreach($event->langs as $event_lang){
            if($event_lang->lang_id == $lang_id and $event_lang->evento_id == $event->id){

                // title and place
                $title[]=$event_lang->text;
                $place[]=$event_lang->place;

                $id[] = $event->id;

                // start
                if($event->start_time){
                    $start[] = $event->start_date.'T'.$event->start_time;
                } else{
                    $start[] = $event->start_date;
                }

                // end
                if($event->end_time){
                    $end[] = $event->start_date.'T'.$event->end_time;
                }elseif($event->end_date){
                    $end[] = $event->end_date;
                }else{
                    $end[] ='';
                }

                // image
                if(count($event->images)){
                    $imagen = Image::select('path')->where('imageable_type', 'App\Models\Evento')->where('imageable_id', $event->id)->first();
                    $image[] = $imagen->path;
                }else{
                    $image[] = '';
                }
            }
        }

    }

    $count = count($id);

    for($i=0; $i<$count; $i++){
        $data[$i] = array(
            "title"=>$title[$i],
            "lugar"=>$place[$i],
            "start"=>$start[$i],
            "end"=>$end[$i],
            "imagen"=>$image[$i],
        );
    }

    return response()->json($data);

}

}

Answer 1

I have solved it thanks to ADyson for his answers:

In the controller, I added:

    $from= $request->start;
    $to= $request->end;

    $events = Evento::where('active', '1')->whereBetween('start_date', [$from, $to])->get();