layui+fullcalendar

Layui 是一款简洁易用的前端 UI 框架，而 FullCalendar 是一个开源的日历插件，可以用来展示日历、日程安排等内容。使用 layui+fullcalendar 可以轻松实现一个美观、实用的日历组件。

具体实现方式如下：

1. 引入 layui 和 fullcalendar 的相关文件：

<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="fullcalendar/fullcalendar.css">
<script src="layui/layui.js"></script>
<script src="fullcalendar/fullcalendar.js"></script>

2. 创建一个容器用来展示日历：

<div id="calendar"></div>

3. 初始化 fullcalendar：

layui.use('layer', function(){
  var layer = layui.layer;
  // 初始化 fullcalendar
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2021-01-01',
    navLinks: true, // 可以点击日历中的日期/事件
    editable: true, // 可以拖拽或缩放日历中的事件
    eventLimit: true, // 限制每天能够显示的事件数量
    events: [
      {
        title: '测试事件',
        start: '2021-01-01T10:00:00',
        end: '2021-01-01T12:00:00'
      },
      // 可以添加更多的事件
    ],
    // 点击事件的回调函数
    eventClick: function(event, jsEvent, view) {
      layer.msg(event.title + ' 被点击了');
    },
    // 拖拽事件的回调函数
    eventDrop: function(event, delta, revertFunc) {
      layer.msg(event.title + ' 被拖拽了');
    }
  });
});

以上代码可以初始化一个简单的日历，并添加一些测试事件、事件的回调函数等。

更详细的使用方式可以参考 fullcalendar 的官方文档：https://fullcalendar.io/docs。