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. 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);
}
}
from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2pHfWdp
via IFTTT
Aucun commentaire:
Enregistrer un commentaire