【发布时间】:2018-09-04 09:29:51
【问题描述】:
如何在 fullcaledar 中使用 startParam 和 endParam?我不太了解 jQuery 和 Javascript。视图在路由中:example.com/agenda,然后我认为我必须将 startParam 和 endParam 按以下方式放入我的脚本中:
startParam: 'agenda.start',
limitParam : 'agenda.limit',
这个想法是通过限制这两个参数来避免事件加载缓慢(大约 10 秒),以便只加载当时在页面上看到的内容。我理解的很好吗?这不起作用,我的意思是它继续缓慢加载,其余的工作完美。我该怎么做?谢谢。
这是完整的文件 my-fullcalendar.js 我从一个 json 文件中收集数据:
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'
},
});
这是控制器。我正在使用 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);
}
}
【问题讨论】:
-
“不起作用”究竟是什么意思?一个错误?意外的结果或行为?请澄清
-
无论如何,有两个明显的问题:1) 您没有正确阅读 fullCalendar 文档 - 没有“limitParam”这样的参数。 fullcalendar.io/docs/endParam 是您想要指定定义时间段结束的参数的名称。 2) 我在您的 PHP 中没有看到您实际使用这些值来限制查询输出的任何地方。
-
谢谢,阿迪森。 “不工作”是指它继续缓慢加载,其余工作完美。
-
fullCalendar 在发出 ajax 请求以获取事件时会自动为您传递它们。它们将是查询字符串参数。所有这些都在fullcalendar.io/docs/events-json-feed 进行了解释。通过设置 startParam 和 endParam options,您可以告诉日历更改参数的 name。这很可能是不必要的,除非默认名称(“start”和“end”)与您希望发送的其他自定义参数冲突,但在这种情况下您似乎没有这个问题。所以可能不需要设置这些选项。
-
顺便说一句,您还可以通过删除“orderBy”子句来受益 - fullCalendar 不需要事件按任何特定顺序排列,它显然只会根据日期将它们放在日历上,不无论他们收到什么订单。如果您的“startDate”列未在数据库中编制索引,并且您有很多记录,则按该列排序可能会减慢速度。
标签: jquery json laravel-5 fullcalendar fullcalendar-3