alhad15/laravel-fullcalendar

Laravel 全日历组件包

V1.2.4 2018-01-03 20:28 UTC

README

Latest Stable Version Total Downloads Latest Unstable Version License composer.lock Build Status Scrutinizer Code Quality

安装

安装此扩展的首选方法是通过Composer

要安装,请运行

$ php composer.phar require edofre/laravel-fullcalendar

或添加

"edofre/laravel-fullcalendar": "V1.2.4"

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

注意

此包需要fxp/composer-asset插件才能正确安装。此插件允许您通过Composer下载Bower包。

您可以使用以下命令安装它

composer global require "fxp/composer-asset-plugin:^1.4.0”

这将添加fxp composer-asset-plugin,并且您的Composer将能够找到并下载所需的bower-asset/fullcalendar包。更多详情请参阅此页面:https://packagist.org.cn/packages/fxp/composer-asset-plugin

配置

将ServiceProvider添加到您的config/app.php

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

并添加外观

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

发布资源和配置文件

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

手动加载脚本文件

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

    \Edofre\Fullcalendar\Fullcalendar::renderScriptFiles();

示例

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

    public function index()
    {
        // Generate a new fullcalendar instance
        $calendar = new \Edofre\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'      => 'nl',
            'weekNumbers' => true,
            'selectable'  => true,
            'defaultView' => 'agendaWeek',
            // Add the callbacks
            'eventClick' => new \Edofre\Fullcalendar\JsExpression("
                function(event, jsEvent, view) {
                    console.log(event);
                }
            "),
            'viewRender' => new \Edofre\Fullcalendar\JsExpression("
                function( view, element ) {
                    console.log(\"View \"+view.name+\" rendered\");
                }
            "),
        ]);

        // 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 \Edofre\Fullcalendar\Event([
            'id'     => 0,
            'title'  => 'Rest',
            'allDay' => true,
            'start'  => Carbon::create(2016, 11, 20),
            'end'    => Carbon::create(2016, 11, 20),
        ]);

        $events[] = new \Edofre\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 \Edofre\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 \Edofre\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