【问题标题】:Fullcalendar v3.6.2 startParam and endParamFullcalendar v3.6.2 startParam 和 endParam
【发布时间】:2018-09-04 09:29:51
【问题描述】:

如何在 fullcaledar 中使用 startParam 和 endParam?我不太了解 jQuery 和 Javascript。视图在路由中:example.com/agenda,然后我认为我必须将 startParamendParam 按以下方式放入我的脚本中:

    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


【解决方案1】:

我已经解决了感谢 ADyson 的回答:

在控制器中,我添加了:

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-01-27
    • 1970-01-01
    • 1970-01-01
    • 2016-03-20
    • 1970-01-01
    • 1970-01-01
    • 2015-03-25
    • 1970-01-01
    相关资源
    最近更新 更多