Livewire日历:如何添加下一个月和上一个月

Question

在我们的应用程序中，我们有活动模块。我在我们的应用程序中实现了livewire日历，但很难显示下一个&前一个月

我使用了tailwindcss的cdn。

<<p>仪表板视图/strong>

<div>
<!-- <livewire:appointments-calendar/> -->
<livewire:appointments-grid
week-starts-at="0"
before-calendar-view="livewire/members-portalmembers-dashboardbefore-month"
/>

月前查看文件

<h2 class="">{{ $this->startsAt->format('M Y') }} </h2>

控制器

<?php
namespace AppHttpLivewireMembersPortalMembersDashboard;
use LivewireComponent;
use AsantibanezLivewireCalendarLivewireCalendar;
use IlluminateSupportCollection;
use CarbonCarbon;
class MembersDashboard extends LivewireCalendar
{
public function events() : Collection
{
// must return a Laravel collection
return collect([
[
'id' => 1,
'title' => 'Breakfast',
'description' => 'Pancakes! 🥞',
'date' => Carbon::today(),
],
[
'id' => 2,
'title' => 'Meeting with Pamela',
'description' => 'Work stuff',
'date' => Carbon::tomorrow(),
],
]);
}
}

问题:如何显示下一个&前一个月使用livewire日历?

Answer 1

如果您问的是如何导航到下一个月和前一个月，那么我建议您阅读该包的自述文件

组件有3个公共方法，可以帮助向前和向后导航月份:

goToPreviousMonth
goToNextMonth
goToCurrentMonth

这意味着您可以向这些组件添加wire:click，因为您的组件扩展了该包的组件。

<h2 class="">{{ $this->startsAt->format('M Y') }} </h2>
<button wire:click="goToPreviousMonth">Previous</button>
<button wire:click="goToCurrentMonth">Current</button>
<button wire:click="goToNextMonth">Next</button>

Answer 2

使用Livewire，我认为您可以在class 2属性中声明存储当前的月份和年份显示。之后，您可以创建前一个月和下一个月两个按钮。

InCalendar.php

<?php
namespace AppHttpLivewireMembersPortalMembersDashboard;
use LivewireComponent;
use AsantibanezLivewireCalendarLivewireCalendar;
use IlluminateSupportCollection;
use CarbonCarbon;
class MembersDashboard extends LivewireCalendar
{
public $currentMonth = 1;
public $currentYear  = 2022;
public function nextMonth()
{
// Set the month/year and call events() to update appointment list
}
public function previousMonth()
{
// Set the month/year and call events() to update appointment list
}
public function events() : Collection
{
$collect = Model::query()->get();
return collect([...]);
}
...
}