FullCalendar插件js原生用法

1. 先看下要实现的效果图，左侧栏为当日时间，顶部为部门所有人员，表格内容是人员事件，要求数据多的时候，左侧栏和顶部固定，支持横竖滚动条，如图：

2. 这里用的js原生写法：

<html>
  <head>
    <title>工作记录详情</title>
    <meta name="decorator" content="default" />
    <script
      src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.method.js"
      type="text/javascript"
    ></script>
    <script
      src="${ctxStatic}/fullcalendar/index.global.js"
      type="text/javascript"
    ></script>
    <style>
      #calendar {
        max-width: 100vw;
        max-height: 90vh;
      }

      /* 控制事件的最小高度 */
      .fc-event {
        min-height: 20px; /* 设置事件的最小高度 */
      }

      /* 控制事件内容溢出时的行为 */
      .fc-event .fc-event-title {
        white-space: normal; /* 允许事件内容换行 */
        overflow: hidden; /* 隐藏溢出部分 */
        text-overflow: ellipsis; /* 添加省略号 */
      }

      .fc-theme-standard td,
      .fc-theme-standard th {
        min-height: 50px;
      }

      .fc td,
      .fc th {
        min-height: 50px;
        height: 50px;
        vertical-align: middle;
      }
      .fc-scrollgrid-section-liquid tr {
        height: 80px;
      }
    </style>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        fullcalendarData();
      });

      function fullcalendarData() {
        var deptId = $("#deptIdQueryId").val();
        var calendarEl = document.getElementById("calendar");
        var calendar = new FullCalendar.Calendar(calendarEl, {
          locale: "zh-cn", // 使用中文语言包
          timeZone: "Asia/Shanghai",
          allDaySlot: false,
          initialView: "resourceTimeGridDay",
          slotLabelFormat: {
            // 格式化Y轴时间为24小时制
            hour: "2-digit",
            minute: "2-digit",
            hour12: false, // 24小时制
          },
          eventTimeFormat: {
            // 格式化节点时间为24小时制
            hour: "2-digit",
            minute: "2-digit",
            hour12: false, // 24小时制
          },
          buttonText: {
            // 自定义按钮文本
            today: "今天",
          },
          views: {
            resourceTimeGridThreeDay: {
              type: "resourceTimeGrid",
            },
          },
          datesAboveResources: true,
          dayMinWidth: 100, // 格子宽度
          slotMinTime: "09:00:00", // 最小时间
          slotMaxTime: "24:00:00", // 最大时间
          resources: [],
          events: [],
          datesSet: function (info) {
            loading("加载中...");
            $.ajax({
              url: "${ctx}/perform/tPerform/workScheduleData",
              type: "GET",
              data: {
                deptIdQuery: deptId,
                startTimeQuery: info.startStr,
                endTimeQuery: info.endStr,
              },
              success: function (data) {
                if (data.code == 200) {
                  closeLoading();
                  var resData = data.data;
                  // 批量更新资源和事件
                  calendar.batchRendering(function () {
                    // 移除现有的资源和事件
                    calendar.getResources().forEach(function (resource) {
                      calendar.getResourceById(resource.id).remove();
                    });
                    calendar.removeAllEvents();
                    // 添加新的资源和事件
                    resData.resources.forEach(function (resource) {
                      calendar.addResource(resource);
                    });
                    resData.events.forEach(function (event) {
                      calendar.addEvent(event);
                    });
                  });
                }
              },
              error: function () {
                // 错误处理逻辑
              },
            });
          },
        });
        calendar.render();
      }
    </script>
  </head>
  <body>
    <br />
    <form:form
      id="searchForm"
      modelAttribute="TPerform"
      action=""
      method="post"
      class="breadcrumb form-search"
    >
      <ul class="ul-form">
        <li class="shrink">
          <label>部门：</label>
          <sys:treeselect
            isAll="true"
            id="deptIdQuery"
            name="deptId4Query"
            value="${TPerform.deptId4Query}"
            labelName="deptIdQueryName"
            labelValue="${fns:getOfficeById(TPerform.deptId4Query)}"
            title="部门"
            url="/sys/office/treeData?type=2&isAll=true"
            cssClass="input-small"
            notAllowSelectParent="false"
            allowClear="true"
          />
        </li>
        <li class="btns">
          <input
            id="btnSubmit"
            class="btn btn-primary"
            type="button"
            onclick="fullcalendarData()"
            value="查询"
          />
        </li>
      </ul>
    </form:form>
    <form:form class="form-horizontal">
      <div class="tabbable">
        <div id="calendar"></div>
      </div>
    </form:form>
  </body>
</html>

View Code

3. 怎么调整表格的列宽度：

看官方解释：https://fullcalendar.io/docs/dayMinWidth

dayMinWidth：200；

3. 附上官方文档地址：

我选的视图：（js配置和css是滚动条关键）

视图实例: 打开：https://fullcalendar.io/docs/dayMinWidth

posted @ 2024-05-23 11:17 行走的蒲公英阅读(315) 评论(2) 收藏举报

行走的蒲公英

FullCalendar插件js原生用法

公告