我有一个带有 LiveWire 组件的页面，用于显示 Fullcalendar 事件。该页面运行良好，活动正在显示，我可以更改月份、周和活动加载良好。
我迷失、困惑，严重陷入困境。如果有人可以帮助我，那就太好了。
我可以在网络工具调试器上看到一些更新火了，但屏幕上没有任何变化。
组合视图：
<?php
namespace App\Livewire;
use App\Models\User;
use Carbon\Carbon;
use Livewire\Component;
class UserCalendrier extends Component
{
public $events = [];
public $show = true;
public $showAnniversary = true;
public $start;
public $end;
protected $listeners = [
'triggerShowCalendar',
'refreshCalendar'
];
public function triggerShowCalendar()
{
$this->show = true;
$this->events = $this->fetchEvents($this->start, $this->end);
return view('livewire.calendar');
}
public function render()
{
return view('livewire.calendar');
}
public function fetchEvents($start, $end)
{
$this->start = $start;
$this->end = $end;
$start = Carbon::parse($this->start);
$end = Carbon::parse($this->end);
if( $this->showAnniversary ) {
$users = User::whereBetween('anniversary', [$start, $end])->get();
} else {
$users = User::whereHas('activities', function ($query) {
$query->whereBetween('start', [$start, $end]);
})->get();
}
$eventsGrouped = [];
foreach ($users as $user) {
$eventsGrouped[] = [
'id' => $user->id,
'start' => $this->showAnniversary ? $user->activities->start->format('Y-m-d H:i:s') : $user->anniversary,
'start' => $this->showAnniversary ? $user->activities->end->format('Y-m-d H:i:s') : $user->anniversary,
'title' => $this->showAnniversary ? $user->activities->title : $user->name.'anniversary'
];
}
return array_values($eventsGrouped);
}
public function eventDetail($user_id, $debut)
{
$this->dispatch('triggerShowDetailActiviteEleve', [$user_id, $debut, 'calendar-calendrier']);
$this->show= false;
}
public function filterAnniversary()
{
$this->showAnniversary = !$this->showAnniversary;
$this->events = $this->fetchEvents($this->start, $this->end);
$this->dispatch('refreshCalendar');
return view('livewire.calendar');
}
public function refreshCalendar()
{
$this->events = $this->fetchEvents($this->start, $this->end);
return view('livewire.calendar');
}
}
Livewire 视图组件
<div>
<div style="{{ $show ? '' : 'display: none' }};">
<button wire:click="filterAnniversary" class="btn btn-light-primary">{{ $showAnniversary ? 'Hide anniversary' : 'Show Anniversary' }}</button>
<div id='calendar-container' wire:ignore >
<div id='calendar'></div>
</div>
</div>
@push('scripts')
<script src='https://cdn.jsdelivr.net/npm/[email protected]/main.min.js'></script>
<script>
document.addEventListener('livewire:initialized', function() {
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
theme: false,
disableDragging: false,
disableResizing: false,
firstDay: 1,
weekends: true,
locale: '{{ config('app.locale') }}',
aspectRatio: 2,
noEventsMessage: 'no activities',
displayEventEnd: true,
slotEventOverlap: false,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
eventLimit: false,
views: {
agenda: {
eventLimit: 15
}
},
eventClick: info => {
@this.eventDetail(info.event.id, info.event.extendedProps.debutBrut);
//calendar.render();
@this.on(`refreshCalendar`, () => {
calendar.refetchEvents();
});
},
selectable: true,
selectHelper: true,
editable: false,
eventContent: function(arg) {
let customColor = arg.event.extendedProps.eventColor;
if (customColor) {
arg.backgroundColor = customColor;
arg.borderColor = customColor;
}
},
//events: JSON.parse(@this.events),
events: function(fetchInfo, successCallback, failureCallback) {
@this.call('fetchEvents', fetchInfo.startStr, fetchInfo.endStr)
.then(events => successCallback(events))
.catch(error => failureCallback(error));
},
dayClick: function (date, jsEvent, view) {
alert(date.format('DD-MM-YYYY'))
},
});
calendar.render();
window.addEventListener('refreshCalendar', () => {
calendar.refetchEvents();
});
});
</script>
<link href='https://cdn.jsdelivr.net/npm/[email protected]/main.min.css' rel='stylesheet' />
@endpush
</div>
但是，我试图了解如何通过另外两种方式重新获取日历上的事件，即通过一个简单的按钮“filterAnniversary”，以及在显示事件详细信息之后。
感谢您的帮助
据我所知，需要进行一些小修正：
在 PHP 方面
在 fetchEvents() 方法中
$users = User::whereHas('activities', function ($query) {
$query->whereBetween('start', [$start, $end]);
})->get();
应该是：
$users = User::whereHas('activities', function ($query) use ($start, $end) {
$query->whereBetween('start', [$start, $end]);
})->get();
此外，当您在
foreach循环中填充
$events Grouped[] 变量时，您设置了“start”键两次：第二个应该是“end”
我还认为'start'，'end''和'title'设置的字符串应该交换，例如：
'start' => $this->showAnniversary ? $user->anniversary : $user->activities->start->format('Y-m-d H:i:s'),不需要
array_values($eventsGrouped)班级层面：
return view('livewire.calendar')在 javascript 方面：
在 eventClick 属性中，必须删除事件处理程序语句
@this.on('refreshCalendar'.....eventClick可以变成这样：
eventClick: information => {
@this.eventDetail(info.event.id, info.event.extendedProps.debutBrut);
},
但是尚不清楚 info.event.extendedProps.debutBrut 属性来自何处以及 triggerShowDetailActiviteEleve 事件在何处处理
请注意，您已经设置了处理 refreshCalendar 事件的代码：
window.addEventListener('refreshCalendar', () => {
calendar.refetchEvents();
});
最后，请记住，日历提供的“结束”数据对应于撰写查询时要考虑的时间段之后的日期（参见此处）