登录  /  注册
首页 > 博客列表 > laravel后台极速开发框架 - 集成日历组件
博主信息
博文 1
粉丝 0
评论 0
访问量 271
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
laravel后台极速开发框架 - 集成日历组件
eRic
原创
271人浏览过

效果截图

代码实现

  1. <?php
  3. namespace Dcat\Admin\Widgets;
  5. use Illuminate\Support\Str;
  7. class Calendar extends Widget {
  9.     public static $js = [
  10.         '@fullcalendar'
  11.     ];
  13.     public static $css = [
  14.         '@fullcalendar'
  15.     ];
  16.     /**
  17.      * @var string
  18.      */
  19.     protected $view = 'admin::widgets.calendar';
  21.     protected $calendarId;
  22.     /**
  23.      * @var array
  24.      */
  25.     protected $items = [];
  27.     protected $locale = 'zh-cn';
  29.     protected $timeZone = 'Asia/Shanghai';
  31.     protected $initialView = 'dayGridMonth';
  33.     protected $header_toolbar_right_btn = 'dayGridMonth,timeGridWeek,timeGridDay,listWeek';
  35.     /**
  36.      * Collapse constructor.
  37.      */
  38.     public function __construct() {
  39.         $this->calendarId = 'calendar' . Str::random(5);
  40.         $this->id('calendar-' . uniqid());
  41.         $this->class('box-group');
  42.         $this->style('margin-bottom: 20px');
  43.     }
  45.     /**
  46.      * @desc 设置 日历容器ID
  47.      * @param $id
  48.      */
  49.     public function calendarId($id) {
  50.         $this->calendarId = $id;
  51.         return $this;
  52.     }
  54.     /**
  55.      * @desc 设置 日历语言包
  56.      * @param $value
  57.      */
  58.     public function locale($value) {
  59.         $this->locale = $value;
  60.         return $this;
  61.     }
  63.     /**
  64.      * @desc 设置 日历的时区
  65.      * @param $value
  66.      */
  67.     public function timeZone($value) {
  68.         $this->timeZone = $value;
  69.         return $this;
  70.     }
  72.     /**
  73.      * @desc 设置 日历的初始化视图  可选值 dayGridMonth,timeGridWeek,timeGridDay,listWeek
  74.      * @param $value
  75.      */
  77.     public function initialView($value) {
  78.         $this->initialView = $value;
  79.         return $this;
  80.     }
  82.     /**
  83.      * @desc 设置 日历的头部右侧所展示的btn  全部：dayGridMonth,timeGridWeek,timeGridDay,listWeek
  84.      * @param $value
  85.      */
  86.     public function headerToolbarRightBtn($value) {
  87.         $this->header_toolbar_right_btn = $value;
  88.         return $this;
  89.     }
  91.     /**
  92.      * @desc 设置 日历的日期事件
  93.      * @param $value
  94.      */
  95.     public function eventItem(array $item) {
  96.         $this->items = $item;
  97.         return $this;
  98.     }
  100.     /**
  101.      * Add item.
  102.      * 单个增加日历的日期事件
  103.      * @param string $title 标题
  104.      * @param string $title 描述
  105.      * @param string $start 开始日期
  106.      * @param string $end   结束日期
  107.      * @return $this
  108.      */
  109.     public function addEvents($title, $description = '', $start, $end = '') {
  110.         $event_info = [
  111.             'title'       => $title,
  112.             'description' => $description,
  113.             'start'       => $start,
  114.             'allDay'      => false,
  115.             'showModal'   => true,
  116.         ];
  117.         if (!empty($end)) {
  118.             $event_info['end'] = $end;
  119.         }
  120.         $this->items[] = $event_info;
  122.         return $this;
  123.     }
  124.     // 
  125.     public function backgroundColor($color) {
  126.         if(!empty($this->items[count($this->items) - 1])){
  127.             $this->items[count($this->items) - 1]['backgroundColor'] = $color;
  128.         }
  129.         return $this;
  130.     }
  132.     public function borderColor($color) {
  133.         if(!empty($this->items[count($this->items) - 1])){
  134.             $this->items[count($this->items) - 1]['borderColor'] = $color;
  135.         }
  137.         return $this;
  138.     }
  140.     public function allDay($bool) {
  141.         if(!empty($this->items[count($this->items) - 1])){
  142.             $this->items[count($this->items) - 1]['allDay'] = $bool;
  143.         }
  145.         return $this;
  146.     }
  148.     /**
  149.      * @desc 设置 日历的日期事件是否 点击 展示modal
  150.      * @param $value
  151.      */
  152.     public function showModal($bool = true) {
  153.         if(!empty($this->items[count($this->items) - 1])){
  154.             $this->items[count($this->items) - 1]['showModal'] = $bool;
  155.         }
  157.         return $this;
  158.     }
  160.     /**
  161.      * @desc 设置 日历的日期事件的weburl
  162.      * @param $value
  163.      */
  164.     public function webUrl($url) {
  165.         if(!empty($this->items[count($this->items) - 1])){
  166.             $this->items[count($this->items) - 1]['url'] = $url;
  167.         }
  169.         return $this;
  170.     }
  171.     /**
  172.      * {@inheritdoc}
  173.      */
  174.     public function defaultVariables() {
  176.         return [
  177.             'id'                       => $this->id,
  178.             'locale'                   => $this->locale,
  179.             'timeZone'                 => $this->timeZone,
  180.             'initialView'              => $this->initialView,
  181.             'header_toolbar_right_btn' => $this->header_toolbar_right_btn,
  182.             'calendar_id'              => $this->calendarId,
  183.             'items'                    => json_encode($this->items, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES),
  184.             'attributes'               => $this->formatAttributes(),
  185.         ];
  186.     }
  188. }

对应的前端模板

  1. <div class="calendar-box">
  2.     <div id="{{$calendar_id}}"></div>
  4.     <div id="external-events">
  5.     </div>
  6.     <div id="drop-remove">
  8.     </div>
  10.     <!-- 模态框 -->
  11.     <div class="modal fade" id="{{$calendar_id}}-Modal" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="eventModalLabel" aria-hidden="true">
  12.         <div class="modal-dialog modal-lg" role="document">
  13.             <div class="modal-content ">
  14.                 <div class="modal-header">
  15.                     <h5 class="modal-title">事件详情</h5>
  16.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  17.                         <span aria-hidden="true">&times;</span>
  18.                     </button>
  19.                 </div>
  20.                 <div class="modal-body">
  22.                 </div>
  23.                 <div class="modal-footer">
  24.                     <button type="button" class="btn btn-secondary" data-dismiss="modal">知道了</button>
  25.                 </div>
  26.             </div>
  27.         </div>
  28.     </div>
  29. </div>
  31. <script>
  33.     /* initialize the external events
  34.      -----------------------------------------------------------------*/
  35.     function ini_events(ele) {
  36.         ele.each(function () {
  38.             // create an Event Object (https://fullcalendar.io/docs/event-object)
  39.             // it doesn't need to have a start or end
  40.             var eventObject = {
  41.                 title: $.trim($(this).text()) // use the element's text as the event title
  42.             }
  44.             // store the Event Object in the DOM element so we can get to it later
  45.             $(this).data('eventObject', eventObject)
  47.             // make the event draggable using jQuery UI
  48.             $(this).draggable({
  49.                 zIndex: 1070,
  50.                 revert: true, // will cause the event to go back to its
  51.                 revertDuration: 0  //  original position after the drag
  52.             })
  54.         })
  55.     }
  57.     ini_events($('#external-events div.external-event'))
  59.     /* initialize the calendar
  60.  -----------------------------------------------------------------*/
  61.     //Date for the calendar events (dummy data)
  62.     var date = new Date()
  63.     var d = date.getDate(),
  64.         m = date.getMonth(),
  65.         y = date.getFullYear()
  67.     var Calendar = FullCalendar.Calendar;
  68.     var Draggable = FullCalendar.Draggable;
  70.     var containerEl = document.getElementById('external-events');
  71.     var checkbox = document.getElementById('drop-remove');
  72.     var calendarEl = document.getElementById('{{$calendar_id}}');
  74.     // initialize the external events
  75.     // ----------------------------------------------------------------
  76.     new Draggable(containerEl, {
  77.         itemSelector: '.external-event',
  78.         eventData: function (eventEl) {
  79.             return {
  80.                 title: eventEl.innerText,
  81.                 backgroundColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
  82.                 borderColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
  83.                 textColor: window.getComputedStyle(eventEl, null).getPropertyValue('color'),
  84.             };
  85.         }
  86.     });
  88.     var calendar = new Calendar(calendarEl, {
  89.         initialView: '{{$initialView}}',
  90.         selectable: true,
  91.         locale: '{{$locale}}',
  92.         timeZone: '{{$timeZone}}',
  93.         headerToolbar: {
  94.             left: 'prev,next today',
  95.             center: 'title',
  96.             right: '{{$header_toolbar_right_btn}}'
  97.         },
  98.         buttonText: { // 设置按钮文本为中文
  99.             today: '今天',
  100.             month: '月',
  101.             week: '周',
  102.             day: '日',
  103.             list: '日程',
  104.         },
  105.         views: {
  106.             list: {
  107.                 buttonText: '日程',
  108.             }
  109.         },
  110.         themeSystem: 'bootstrap',
  111.         events: {!! $items !!},
  112.         eventClick: function(info) {
  113.             // 检查事件是否允许弹出模态框
  114.             if (info.event.extendedProps.showModal) {
  115.                 // 获取事件的标题和描述
  116.                 var eventTitle = info.event.title;
  117.                 var eventDescription = info.event.extendedProps.description;
  119.                 // 设置模态框的内容
  120.                 $('#{{$calendar_id}}-Modal').find('.modal-title').text(eventTitle);
  121.                 $('#{{$calendar_id}}-Modal').find('.modal-body').text(eventDescription);
  122.                 // 显示模态框
  123.                 $('#{{$calendar_id}}-Modal').modal('show');
  124.             }
  126.         },
  127.         editable: true,
  128.         droppable: false, // this allows things to be dropped onto the calendar !!!
  129.         drop: function (info) {
  130.             // is the "remove after drop" checkbox checked?
  131.             if (checkbox.checked) {
  132.                 // if so, remove the element from the "Draggable Events" list
  133.                 info.draggedEl.parentNode.removeChild(info.draggedEl);
  134.             }
  135.         }
  136.     });
  138.     calendar.render();
  139.     // $('#calendar').fullCalendar()
  141.     /* ADDING EVENTS */
  142.     var currColor = '#3c8dbc' //Red by default
  143.     // Color chooser button
  144.     $('#color-chooser > li > a').click(function (e) {
  145.         e.preventDefault()
  146.         // Save color
  147.         currColor = $(this).css('color')
  148.         // Add color effect to button
  149.         $('#add-new-event').css({
  150.             'background-color': currColor,
  151.             'border-color': currColor
  152.         })
  153.     })
  154.     $('#add-new-event').click(function (e) {
  155.         e.preventDefault()
  156.         // Get value and make sure it is not null
  157.         var val = $('#new-event').val()
  158.         if (val.length == 0) {
  159.             return
  160.         }
  162.         // Create events
  163.         var event = $('<div />')
  164.         event.css({
  165.             'background-color': currColor,
  166.             'border-color': currColor,
  167.             'color': '#fff'
  168.         }).addClass('external-event')
  169.         event.text(val)
  170.         $('#external-events').prepend(event)
  172.         // Add draggable funtionality
  173.         ini_events(event)
  175.         // Remove event from text input
  176.         $('#new-event').val('')
  177.     })
  178. </script>

使用方法

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

配置项

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

plus 版已集成，可直接使用

  1. composer require dcat-plus/laravel-admin:1.2.8

plus 版已集成多种表单组件

表单：sku 来自于 ：https://github.com/abbotton/dcat-sku-plus
表单：多媒体选择器 来自于：https://github.com/deatil/dcat-form-media
在此感谢他们开源对dcat-admin 的贡献。



dcat-admin 并未停止不前，plus版 持续更新 保持活力

dcat-plus admin （plus版）沿用 dcat-admn 最新代码，并让dcat-admin 保持活力。已支持到Laravel11，并新增多个组件。

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录