schedulemycoach/laravel7-fullcalendar

基于Edo Freriks原始包的更新版Laravel fullcalendar组件

1.08 2022-08-06 17:07 UTC

This package is auto-updated.

Last update: 2024-09-13 01:23:01 UTC


README

注意:这是一个Edofre/laravel-fullcalendar包的分支,我已经渐渐喜欢并使用它。现在,该包已与Laravel 7和FullCalendar v5的新版本代码兼容。此版本现在将直接安装所需的NPM包,而不使用Bower或fxp/composer-asset插件。

警告

如果您是从旧版本升级,我建议您删除Edofre/laravel-fullcalendar包,以及任何不必要的Bower/fxp/composer-asset插件组件,如果Composer无法删除它们,请从config/app文件中删除原始的Edo服务提供者和别名,以及从public文件夹中删除该旧包的任何FullCalendar配置和FullCalendar CSS/JS文件。如果您遇到此错误,可能需要从bootstrap/config.php文件中删除旧的Edo包行

Class 'Edofre\Fullcalendar\FullcalendarServiceProvider' not found 

我还不得不从NPM中删除FullCalendar、Moment和jQuery。

npm remove fullcalendar

与Laravel/Homestead一起使用

由于VirtualBox的问题,此包在Laravel/Homestead的Windows上无法正确安装,除非遵循以下步骤。右键单击命令窗口(通常是GIT Bash),然后选择以管理员身份运行。在您的Homestead Yaml文件中,文件夹部分应如下所示

folders:
    - map: your_programming_directory
      to: /home/vagrant/code
      type: "smb"

这需要您输入Windows用户名和密码。更多信息请参阅: https://www.vagrantup.com/docs/synced-folders/smb.html#smb_username。我第一次进行此更改时,在启动Vagrant时进行了配置。

安装

安装此扩展的首选方法是使用composer

要安装,请运行

$ php composer.phar require schedulemycoach/laravel7-fullcalendar

或添加

"schedulemycoach/laravel7-fullcalendar": "^1.0.5"

到您的composer.json文件的require部分。

注意

fxp/composer-asset插件不再需要用于此包的正确安装。我们已将此包转换为使用Foxy。此插件允许您通过composer下载NPM包,并包含在此包中。您可以在本页面找到更多关于此的信息:https://github.com/fxpio/foxy

配置

将ServiceProvider添加到config/app.php

'providers' => [
        ...
        schedulemycoach\Fullcalendar\FullcalendarServiceProvider::class,
    ],

并添加外观

'aliases' => [
        ...
        'Fullcalendar' => schedulemycoach\Fullcalendar\Facades\Fullcalendar::class,
    ],

发布资源和配置文件

php artisan vendor:publish --tag=config
php artisan vendor:publish --tag=fullcalendar

配置文件

通过发布供应商配置文件,您将在/config文件夹中找到一个名为fullcalendar.php的新文件。这些配置允许您加载FullCalendar的压缩或非压缩CSS和JS。

包含Google日历

根据Fullcalendar NPM包,Google日历CSS/JS文件现在已包含在内,不需要单独加载。

手动加载脚本文件

通过在配置文件中将include_scripts选项设置为false,脚本在生成日历时将不会包含。如果您想手动包含脚本,您可以在header/footer等地方调用以下静态函数。

对于完整文件

    \schedulemycoach\Fullcalendar\Fullcalendar::renderFullScriptFiles();

对于压缩文件

      \schedulemycoach\Fullcalendar\Fullcalendar::renderMinScriptFiles();

示例

以下是一个配置日历的控制器操作的示例

    public function index()
    {
        // Generate a new fullcalendar instance
        $calendar = new \schedulemycoach\Fullcalendar\Fullcalendar();

        // You can manually add the objects as an array
        $events = $this->getEvents();
        $calendar->setEvents($events);
        // Or you can add a route and return the events using an ajax requests that returns the events as json
        $calendar->setEvents(route('fullcalendar-ajax-events'));

        // Set options
        $calendar->setOptions([
            'locale'      => 'en',
            'weekNumbers' => true,
            'selectable'  => true,
            'themeSystem' =>'bootstrap',
            /* Scripts need for this are not included in the package. See bootstrap theming at https://fullcalendar.io/docs/bootstrap-theme */
            'initialView' => 'dayGridMonth',
         /* options are dayGridMonth,dayGridWeek,dayGridDay,dayGrid,timeGridWeek,timeGridDay,timeGrid,listYear,listMonth,listWeek,listDay,list */
            // Add the callbacks
            'eventClick' => new \schedulemycoach\Fullcalendar\JsExpression("
                function(data, jsEvent, view) {
                    console.log(data.event); <-- single event
                }
            "),
         ]);

        // Check out the documentation for all the options and callbacks.
        // https://fullcalendar.io/docs/

        return view('fullcalendar.index', [
            'calendar' => $calendar,
        ]);
    }

    /**
     * @param Request $request
     * @return string
     */
    public function ajaxEvents(Request $request)
    {
        // start and end dates will be sent automatically by fullcalendar, they can be obtained using:
        // $request->get('start') & $request->get('end')
        $events = $this->getEvents();
        return json_encode($events);
    }

    /**
     * @return array
     */
    private function getEvents()
    {
        $events = [];
        $events[] = new \schedulemycoach\Fullcalendar\Event([
            'id'     => 0,
            'title'  => 'Rest',
            'allDay' => true,
            'start'  => Carbon::create(2016, 11, 20),
            'end'    => Carbon::create(2016, 11, 20),
        ]);

        $events[] = new \schedulemycoach\Fullcalendar\Event([
            'id'    => 1,
            'title' => 'Appointment #' . rand(1, 999),
            'start' => Carbon::create(2016, 11, 15, 13),
            'end'   => Carbon::create(2016, 11, 15, 13)->addHour(2),
        ]);

        $events[] = new \schedulemycoach\Fullcalendar\Event([
            'id'               => 2,
            'title'            => 'Appointment #' . rand(1, 999),
            'editable'         => true,
            'startEditable'    => true,
            'durationEditable' => true,
            'start'            => Carbon::create(2016, 11, 16, 10),
            'end'              => Carbon::create(2016, 11, 16, 13),
        ]);

        $events[] = new \schedulemycoach\Fullcalendar\Event([
            'id'               => 3,
            'title'            => 'Appointment #' . rand(1, 999),
            'editable'         => true,
            'startEditable'    => true,
            'durationEditable' => true,
            'start'            => Carbon::create(2016, 11, 14, 9),
            'end'              => Carbon::create(2016, 11, 14, 10),
            'backgroundColor'  => 'black',
            'borderColor'      => 'red',
            'textColor'        => 'green',
        ]);
        return $events;
    }

然后您可以通过生成HTML和脚本来渲染日历

    {!! $calendar->generate() !!}

测试

通过执行以下命令运行测试

composer test