<?php
namespace Dcat\Admin\Widgets;
use Illuminate\Support\Str;
class Calendar extends Widget {
    public static $js = [        '@fullcalendar'    ];
    public static $css = [        '@fullcalendar'    ];    /**     * @var string     */    protected $view = 'admin::widgets.calendar';
    protected $calendarId;    /**     * @var array     */    protected $items = [];
    protected $locale = 'zh-cn';
    protected $timeZone = 'Asia/Shanghai';
    protected $initialView = 'dayGridMonth';
    protected $header_toolbar_right_btn = 'dayGridMonth,timeGridWeek,timeGridDay,listWeek';
    /**     * Collapse constructor.     */    public function __construct() {        $this->calendarId = 'calendar' . Str::random(5);        $this->id('calendar-' . uniqid());        $this->class('box-group');        $this->style('margin-bottom: 20px');    }
    /**     * @desc 设置 日历容器ID     * @param $id     */    public function calendarId($id) {        $this->calendarId = $id;        return $this;    }
    /**     * @desc 设置 日历语言包     * @param $value     */    public function locale($value) {        $this->locale = $value;        return $this;    }
    /**     * @desc 设置 日历的时区     * @param $value     */    public function timeZone($value) {        $this->timeZone = $value;        return $this;    }
    /**     * @desc 设置 日历的初始化视图  可选值 dayGridMonth,timeGridWeek,timeGridDay,listWeek     * @param $value     */
    public function initialView($value) {        $this->initialView = $value;        return $this;    }
    /**     * @desc 设置 日历的头部右侧所展示的btn  全部：dayGridMonth,timeGridWeek,timeGridDay,listWeek     * @param $value     */    public function headerToolbarRightBtn($value) {        $this->header_toolbar_right_btn = $value;        return $this;    }
    /**     * @desc 设置 日历的日期事件     * @param $value     */    public function eventItem(array $item) {        $this->items = $item;        return $this;    }
    /**     * Add item.     * 单个增加日历的日期事件     * @param string $title 标题     * @param string $title 描述     * @param string $start 开始日期     * @param string $end   结束日期     * @return $this     */    public function addEvents($title, $description = '', $start, $end = '') {        $event_info = [            'title'       => $title,            'description' => $description,            'start'       => $start,            'allDay'      => false,            'showModal'   => true,        ];        if (!empty($end)) {            $event_info['end'] = $end;        }        $this->items[] = $event_info;
        return $this;    }    //     public function backgroundColor($color) {        if(!empty($this->items[count($this->items) - 1])){            $this->items[count($this->items) - 1]['backgroundColor'] = $color;        }        return $this;    }
    public function borderColor($color) {        if(!empty($this->items[count($this->items) - 1])){            $this->items[count($this->items) - 1]['borderColor'] = $color;        }                return $this;    }
    public function allDay($bool) {        if(!empty($this->items[count($this->items) - 1])){            $this->items[count($this->items) - 1]['allDay'] = $bool;        }                return $this;    }
    /**     * @desc 设置 日历的日期事件是否 点击 展示modal     * @param $value     */    public function showModal($bool = true) {        if(!empty($this->items[count($this->items) - 1])){            $this->items[count($this->items) - 1]['showModal'] = $bool;        }                return $this;    }
    /**     * @desc 设置 日历的日期事件的weburl     * @param $value     */    public function webUrl($url) {        if(!empty($this->items[count($this->items) - 1])){            $this->items[count($this->items) - 1]['url'] = $url;        }                return $this;    }    /**     * {@inheritdoc}     */    public function defaultVariables() {
        return [            'id'                       => $this->id,            'locale'                   => $this->locale,            'timeZone'                 => $this->timeZone,            'initialView'              => $this->initialView,            'header_toolbar_right_btn' => $this->header_toolbar_right_btn,            'calendar_id'              => $this->calendarId,            'items'                    => json_encode($this->items, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES),            'attributes'               => $this->formatAttributes(),        ];    }
}

<div class="calendar-box">    <div id="{{$calendar_id}}"></div>
    <div id="external-events">    </div>    <div id="drop-remove">
    </div>
    <!-- 模态框 -->    <div class="modal fade" id="{{$calendar_id}}-Modal" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="eventModalLabel" aria-hidden="true">        <div class="modal-dialog modal-lg" role="document">            <div class="modal-content ">                <div class="modal-header">                    <h5 class="modal-title">事件详情</h5>                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">                        <span aria-hidden="true">&times;</span>                    </button>                </div>                <div class="modal-body">
                </div>                <div class="modal-footer">                    <button type="button" class="btn btn-secondary" data-dismiss="modal">知道了</button>                </div>            </div>        </div>    </div></div>
<script>
    /* initialize the external events     -----------------------------------------------------------------*/    function ini_events(ele) {        ele.each(function () {
            // create an Event Object (https://fullcalendar.io/docs/event-object)            // it doesn't need to have a start or end            var eventObject = {                title: $.trim($(this).text()) // use the element's text as the event title            }
            // store the Event Object in the DOM element so we can get to it later            $(this).data('eventObject', eventObject)
            // make the event draggable using jQuery UI            $(this).draggable({                zIndex: 1070,                revert: true, // will cause the event to go back to its                revertDuration: 0  //  original position after the drag            })
        })    }
    ini_events($('#external-events div.external-event'))
    /* initialize the calendar -----------------------------------------------------------------*/    //Date for the calendar events (dummy data)    var date = new Date()    var d = date.getDate(),        m = date.getMonth(),        y = date.getFullYear()
    var Calendar = FullCalendar.Calendar;    var Draggable = FullCalendar.Draggable;
    var containerEl = document.getElementById('external-events');    var checkbox = document.getElementById('drop-remove');    var calendarEl = document.getElementById('{{$calendar_id}}');
    // initialize the external events    // ----------------------------------------------------------------    new Draggable(containerEl, {        itemSelector: '.external-event',        eventData: function (eventEl) {            return {                title: eventEl.innerText,                backgroundColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),                borderColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),                textColor: window.getComputedStyle(eventEl, null).getPropertyValue('color'),            };        }    });
    var calendar = new Calendar(calendarEl, {        initialView: '{{$initialView}}',        selectable: true,        locale: '{{$locale}}',        timeZone: '{{$timeZone}}',        headerToolbar: {            left: 'prev,next today',            center: 'title',            right: '{{$header_toolbar_right_btn}}'        },        buttonText: { // 设置按钮文本为中文            today: '今天',            month: '月',            week: '周',            day: '日',            list: '日程',        },        views: {            list: {                buttonText: '日程',            }        },        themeSystem: 'bootstrap',        events: {!! $items !!},        eventClick: function(info) {            // 检查事件是否允许弹出模态框            if (info.event.extendedProps.showModal) {                // 获取事件的标题和描述                var eventTitle = info.event.title;                var eventDescription = info.event.extendedProps.description;
                // 设置模态框的内容                $('#{{$calendar_id}}-Modal').find('.modal-title').text(eventTitle);                $('#{{$calendar_id}}-Modal').find('.modal-body').text(eventDescription);                // 显示模态框                $('#{{$calendar_id}}-Modal').modal('show');            }
        },        editable: true,        droppable: false, // this allows things to be dropped onto the calendar !!!        drop: function (info) {            // is the "remove after drop" checkbox checked?            if (checkbox.checked) {                // if so, remove the element from the "Draggable Events" list                info.draggedEl.parentNode.removeChild(info.draggedEl);            }        }    });
    calendar.render();    // $('#calendar').fullCalendar()
    /* ADDING EVENTS */    var currColor = '#3c8dbc' //Red by default    // Color chooser button    $('#color-chooser > li > a').click(function (e) {        e.preventDefault()        // Save color        currColor = $(this).css('color')        // Add color effect to button        $('#add-new-event').css({            'background-color': currColor,            'border-color': currColor        })    })    $('#add-new-event').click(function (e) {        e.preventDefault()        // Get value and make sure it is not null        var val = $('#new-event').val()        if (val.length == 0) {            return        }
        // Create events        var event = $('<div />')        event.css({            'background-color': currColor,            'border-color': currColor,            'color': '#fff'        }).addClass('external-event')        event.text(val)        $('#external-events').prepend(event)
        // Add draggable funtionality        ini_events(event)
        // Remove event from text input        $('#new-event').val('')    })</script>

<?php
use Dcat\Admin\Widgets\Calendar;
// 获取实例$calendar = Calendar::make();$events_list = [            [                'title' => '今天的事项',// 事项标题                'start' => '2024-10-01 14:00:00', // 事项开始日期，您可以根据需要替换                'end' => '2024-10-02 16:00:00', // 事项结束日期                'backgroundColor' => '#f56954', // red                'borderColor' => '#f56954', // red                'allDay' => false, // 指示事件是否为全天事件。默认为 false                'description' => '这是今天的事项描述', // 描述信息                'showModal' => true, // 是否弹出 事项详情 modal                 // 'url' => 'https://www.baidu.com/', // 指定跳转url            ]        ];$calendar->eventItem($events_list); // 给定日期事项列表

<?php
// 获取实例$calendar = Calendar::make();
// 设置 日历容器ID $calendar->calendarId('calendar_ids');
// 设置 日历语言包 默认 zh-cn$calendar->locale('zh-cn');
// 设置 日历的时区 默认 Asia/Shanghai$calendar->timeZone('Asia/Shanghai');
// 设置 日历的初始化视图 默认 dayGridMonth  可选值 dayGridMonth,timeGridWeek,timeGridDay,listWeek$calendar->initialView('dayGridMonth');
// 设置 日历的头部右侧所展示的btn  可选值：dayGridMonth,timeGridWeek,timeGridDay,listWeek 。可全部$calendar->headerToolbarRightBtn('dayGridMonth');

composer require dcat-plus/laravel-admin:1.2.8