README

本包基于asantibanez/livewire-calendar的出色工作

此包允许您构建一个Livewire月历网格，以显示每天的事件。事件可以从组件内部加载，并按事件日期显示在每天上。

预览

安装

您可以通过composer安装此包

composer require asantibanez/livewire-calendar

要求

此包底层使用livewire/livewire (https://laravel-livewire.com/)。

它还使用TailwindCSS (https://tailwind.org.cn/)进行基本样式。

请在使用此组件之前确保包含这两个依赖项。

使用方法

为了使用此组件，您必须创建一个新的Livewire组件，该组件扩展自LivewireCalendar

您可以使用make:livewire创建一个新的组件。例如。

php artisan make:livewire AppointmentsCalendar

在AppointmentsCalendar类中，不要从基础Component Livewire类扩展，而是从LivewireCalendar扩展。此外，删除render方法。您将有一个类似于以下片段的类。

class AppointmentsCalendar extends LivewireCalendar
{
    //
}

在此类中，您必须重写以下方法

public function events() : Collection
{
    // must return a Laravel collection
}

在events()方法中，返回一个包含将在日历上显示的事件的集合。事件必须是包含以下键的键值数组：id、title、description、date（date必须是Carbon\Carbon实例）。

示例

public function events() : Collection
{
    return collect([
        [
            'id' => 1,
            'title' => 'Breakfast',
            'description' => 'Pancakes! 🥞',
            'date' => Carbon::today(),
        ],
        [
            'id' => 2,
            'title' => 'Meeting with Pamela',
            'description' => 'Work stuff',
            'date' => Carbon::tomorrow(),
        ],
    ]);
}

date值将用于确定事件属于哪一天。要在events()方法中加载值，您可以使用以下组件属性来过滤事件。

startsAt：月份的起始日期
endsAt：月份的结束日期
gridStartsAt：日历网格的起始日期。可以是上个月的一个日期。
endingStartsAt：日历网格的结束日期。可以是下个月的一个日期。

示例

public function events(): Collection
{
    return Model::query()
        ->whereDate('scheduled_at', '>=', $this->gridStartsAt)
        ->whereDate('scheduled_at', '<=', $this->gridEndsAt)
        ->get()
        ->map(function (Model $model) {
            return [
                'id' => $model->id,
                'title' => $model->title,
                'description' => $model->notes,
                'date' => $model->scheduled_at,
            ];
        });
}

现在，我们可以将我们的组件包含在任何视图中。

示例

<livewire:appointments-calendar/>

这将渲染一个日历网格。

默认情况下，组件将渲染当前月份。如果您想更改起始月份，可以设置year和month属性。

示例

<livewire:appointments-calendar
   year="2019"
   month="12"
/>

带有区域设置的周视图

 <livewire:appointments-calendar
    initial-calendar-mode="1"
    week-starts-at="1"
    week-ends-at="0"
    initialLocale="da"
/>

为了启用默认启用的拖放，您应包括@livewireCalendarScripts脚本。您必须在@livewireScripts之后包含它们。

@livewireScripts
@livewireCalendarScripts

组件有3个公开方法，可以帮助在月份之间导航

goToPreviousMonth
goToNextMonth
goToCurrentMonth

您可以在以下额外视图中使用这些方法：before-calendar-view或以下所述的after-calendar-view。

高级使用

UI自定义

当在视图中渲染时，您可以使用以下属性来自定义组件的行为

week-starts-at，可以是0到6之间的数字，根据Carbon一周中的天数来指示日历应该渲染的第一天。
event-view，可以是任何用于渲染事件卡的blade.php视图。此视图将注入一个包含其数据的$event变量。
before-calendar-view和after-calendar-view可以是任何在日历本身之前或之后渲染的blade.php视图。这些可以用于使用Livewire向组件添加额外功能。
drag-and-drop-classes 可以是任何 CSS 类，用于在拖动事件悬停在日历中的每一天上时渲染悬停效果。默认值为 border border-blue-400 border-4
day-of-week-view 可以是任何 blade.php 视图，用于渲染日历中每一天的标题。此视图将被注入 day 属性，它是一周中某天的 Carbon 实例。

<livewire:appointments-grid
    week-starts-at="0, 1, 2, 3, 4, 5 or 6. 0 stands for Sunday"
    event-view="path/to/view/starting/from/views/folder"
    day-of-week-view="path/to/view/starting/from/views/folder"
    before-calendar-view="path/to/view/starting/from/views/folder"
    after-calendar-view="path/to/view/starting/from/views/folder"
    drag-and-drop-classes="css classes"
/>

高级 UI 定制

（应使用基于组件默认视图的 blade 视图使用这些选项）

要使用这些选项，建议发布组件使用的基 blade 视图，并扩展其行为和样式以符合您的需求。为此，请运行 php artisan vendor:publish 并导出 livewire-calendar 标签。

calendar-view 可以是任何 blade.php 视图，用于渲染整个组件。建议用修改后的 calendar-view 基本视图覆盖此视图，例如添加一个组件旁边的视图。
day-view 可以是任何 blade.php 视图，用于渲染每月的每一天。此视图将被注入以下属性：componentId（Livewire 组件的 id）, day（作为 Carbon 实例的月中的某天）, dayInMonth（如果该天是月份的一部分）, isToday（如果该天是今天的日期）, events（对应于该天的活动集合）

示例

<livewire:appointments-grid
    calendar-view="path/to/view/starting/from/views/folder"
    day-view="path/to/view/starting/from/views/folder"
/>

交互定制

您可以覆盖以下方法以向组件添加交互性

public function onDayClick($year, $month, $day)
{
    // This event is triggered when a day is clicked
    // You will be given the $year, $month and $day for that day
}

public function onEventClick($eventId)
{
    // This event is triggered when an event card is clicked
    // You will be given the event id that was clicked 
}

public function onEventDropped($eventId, $year, $month, $day)
{
    // This event will fire when an event is dragged and dropped into another calendar day
    // You will get the event id, year, month and day where it was dragged to
}

自动轮询

如果需要，您还可以使用 pollMillis 参数添加自动轮询。您可以将它与 pollAction 结合使用，以便在所需的轮询间隔内调用组件中的特定操作。

禁用交互

默认情况下，启用点击和拖放事件。要禁用它们，您可以在渲染组件时使用以下参数

<livewire:appointments-grid
    :day-click-enabled="false"
    :event-click-enabled="false"
    :drag-and-drop-enabled="false"
/>

测试

composer test

变更日志

请参阅变更日志了解最近有哪些更改。

贡献

请参阅贡献指南了解详细信息。

安全

如果您发现任何与安全相关的问题，请通过电子邮件 santibanez.andres@gmail.com 而不是使用问题跟踪器。

鸣谢

许可证

MIT 许可证（MIT）。请参阅许可证文件了解更多信息。

centrepatronal / livewire-calendar

维护者

详细信息