Laravel: 全日历 displayEventTime 没有正确显示时间 (12a)

Question

我正在尝试使用 laravel 为我正在处理的应用程序创建一个完整的日历。我创建了一些卡片，上面有一些提供者的名字，我想在开始时在卡片上显示活动开始的时间。

我知道 fullCalendar 有一个名为 displayEventTime 的日历参数。但是，当我将其设置为 true 时，无论实际事件何时发生，我的所有卡片都只会得到 12a 。我用 Google 搜索了一下，发现这是因为时间默认为 00:00。所以，我猜测要么是某些时间格式错误，要么是时间 start/end 没有从控制器传递给事件。

如何为每个事件提取 start/end 时间并将其显示在卡片上？

查看:

var calendar = $('#calendar').fullCalendar({
            events: SITEURL + "/availabilityHours?providerTypeID={{$providerTypeID}}",
            editable: false,
            //timeFormat: 'H(:mm)',
            displayEventTime: true,
            selectable: true,
            selectHelper: true,
            eventRender: function (event, element, view) {
                event.allDay = false;
            },
            select: function (start, end, allDay) {
                window.location.href = SITEURL + "/availabilityHours/create?eventDate=" + start.unix();
            },
             
            eventDrop: function (event, delta) {
                        console.log('dragged and dropped')
                    },
            eventClick: function (event) {
                window.location.href = SITEURL + "/availabilityHours/" + event.id + "/edit";
            }
        });
    });

控制器:

public function index(AvailabilityHourDataTable $availabilityHourDataTable, Request $request)
    {
        //return $availabilityHourDataTable->render('availability_hours.index');
        
        if(request()->ajax()) 
        {
 
            $start = (!empty($_GET["start"])) ? ($_GET["start"]) : ('');
            $end = (!empty($_GET["end"])) ? ($_GET["end"]) : ('');
            $providerTypeID = (!empty($_GET["providerTypeID"])) ? ($_GET["providerTypeID"]) : ('0');
        
            $providers = $providerTypeID == 0 ?
                $this->eProviderRepository->all()->pluck('id') : 
                $this->eProviderRepository->where('e_provider_type_id', $providerTypeID)->pluck('id');
            
            $data = $this->availabilityHourRepository
                    ->getModel()
                    ->whereDate('day', '>=', $start)
                    ->whereDate('day', '<=', $end)
                    ->whereIn('e_provider_id', $providers)
                    ->get();
            $responceData = [];

            
            foreach($data as $entry){
                $date = Carbon::createFromFormat('Y-m-d H:i:s', $entry->day, 'UTC')->setTimezone('Europe/Athens');
                $eProvider = $this->eProviderRepository->findWithoutFail($entry->e_provider_id);
                
                $newEntry = [
                    'id' => $entry->id,
                    'title' => $eProvider->name,
                    'date' => $date,
                    'color' => $eProvider->color,
                ];
                $responceData[] = $newEntry;
            }
            
            return Response::json($responceData);
        }
        
        $providerTypes = $this->eProviderTypeRepository->all()->pluck('name', 'id');
        $providerTypes['0'] = 'All';
        $providerTypeID = isset($request->providerTypeID) ? $request->providerTypeID : 0;
        
        return view('availability_hours.index2', compact('providerTypeID', 'providerTypes'));
    }

型号：

public static $rules = [
        'day' => 'required',
        'start_at' => 'required|date_format:H\:i',
        'end_at' => 'required|date_format:H\:i|after:start_at',
        'data' => 'max:255',
        'e_provider_id' => 'required|exists:e_providers,id'
    ];
    public $translatable = [
        'data',
    ];
    public $timestamps = false;
    public $table = 'availability_hours';
    public $fillable = [
        'day',
        'start_at',
        'end_at',
        'data',
        'e_provider_id'
    ];

相关日历：

**

编辑： 我遵循了@ADyson 的解决方案并且我正确地解析了时间。但是现在，我不知道结束时间。这是我对 Controller/View.

所做的更改

控制器

foreach($data as $entry){
                $date = Carbon::createFromFormat('Y-m-d H:i', $entry->day->toDateString().' '.$entry->start_at, 'UTC');
                $endDate = Carbon::createFromFormat('Y-m-d H:i', $entry->day->toDateString().' '.$entry->end_at, 'UTC');
                $eProvider = $this->eProviderRepository->findWithoutFail($entry->e_provider_id);
                
                $newEntry = [
                    'id' => $entry->id,
                    'title' => $eProvider->name,
                    'date' => $date,
                    'endDate' => $endDate,
                    'color' => $eProvider->color,
                ];
                $responceData[] = $newEntry;                
            }
            
            return Response::json($responceData);

查看

<script>
    $(document).ready(function () {
        var SITEURL = "{{url('/')}}";
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
 
        var calendar = $('#calendar').fullCalendar({
            events: SITEURL + "/availabilityHours?providerTypeID={{$providerTypeID}}",
            editable: false,
            displayEventTime: true,
            timeFormat: 'H:mm',
            displayEventEnd: true,
            selectable: true,
            selectHelper: true,
            select: function (start, end, allDay) {
                window.location.href = SITEURL + "/availabilityHours/create?eventDate=" + start.unix();
            },
            eventDrop: function (event, delta) {
                        console.log('dragged and dropped')
                    },
            eventClick: function (event) {
                window.location.href = SITEURL + "/availabilityHours/" + event.id + "/edit";
            }
        });
    });
    $('#providerType').change(function(ev) {
        console.log(ev.target.value)
        let optionValue = ev.target.value
        document.location.href="{!!route('availabilityHours.index')!!}" + "?providerTypeID=" + optionValue;
    });
    </script>

[enter image description here][2]

**

Answer 1

如果您传递给 fullCalendar 的数据中没有指定时间，那么您将不会在日历中获得时间。在你的情况下，它似乎是 $entry 这是错误的并且只包含一个日期（没有时间）。

由于您的日期和时间是分开存储的，您可以将它们连接在一起并确保它们以 fullCalendar 3 所需的格式（实际上是 momentJS 可以解析的任何格式。最明显和可靠的格式）构成有效日期将是 ISO8601 兼容字符串，例如 YYYY-MM-DD HH:mm）。如果您愿意，Carbon 可以帮助您格式化，而不是直接连接。可能有点取决于数据在数据库/模型中的存储方式。

其次，要显示您的结束时间，请更改 'endDate' => $endDate to 'end' => $endDate。您的事件对象的属性名称必须与 fullCalendar 期望的名称相匹配 - 请参阅 documentation 以了解它识别哪些属性名称。（严格来说，你的 date 也应该是 start 但我认为在 fullCalendar 3 的那个特殊情况下它实际上会接受日期，即使它没有记录。）

Laravel: 全日历 displayEventTime 没有正确显示时间 (12a)

Laravel: full-calendar displayEventTime doesn't display the time correctly (12a)

php

laravel

fullcalendar

laravel-8

fullcalendar-3