javascript - 使用 Laravel 在 FullCalendar 中重复发生的事件

Question

我正在为我的页面开发一个完整的日历模块。我可以在没有重复功能的情况下在日历上显示事件。但是，当我更改表格以包含重复出现的功能时，我无法显示表格中的事件。这是我的表结构。

提交表单时调用 Controller 中的更新函数，我注意到它正在表中更新。这是我的表单。

这是我的 Controller 更新功能。

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');
    }
}

但我无法在完整日历上显示这些详细信息。我正在点击此链接以在完整日历上实现重复发生的事件。 Recurring Events in FullCalendar .

这是我的索引函数，用于从表中获取详细信息。

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);
}

这是我的日历 eventrender 函数和事件结构。

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) 

我在控制台上收到了这样的 JSON 响应。

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"

我在控制台上没有收到任何错误……但是事件也没有显示……我哪里做错了？有帮助吗？

Answer 1

看到这段代码，我也面临
之后我使用了这个想法，它的工作

在 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>