首页 > 其他分享 >FullCalendar插件js原生用法

FullCalendar插件js原生用法

时间:2024-05-23 11:18:20浏览次数:24  
标签:function 24 插件 FullCalendar js fc calendar height event

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

 

标签:function,24,插件,FullCalendar,js,fc,calendar,height,event
From: https://www.cnblogs.com/shyhuahua/p/18205887

相关文章

  • JSP九大内置对象详解
    *JSP九大内置对象详解*JSP内置对象(9个内置对象):1.PageContextjavax.servlet.jsp.PageContextJSP的页面容器2.requestjavax.servlet.http.HttpServletrequest获取用户的请求信息3.responsejavax.servlet.http.HttpServletResponse服务器向客户端的回应信息4.sessionj......
  • JSP九大内置对象
    JSP九大内置对象JSP提供了由容器实现和管理的内置对象,也可以称之为隐含对象,由于JSP使用Java作为脚本语言,所以JSP将具有强大的对象处理能力,并且可以动态创建Web页面内容。但Java语法在使用一个对象前,需要先实例化这个对象,这其实是一件比较烦琐的事情。JSP为了简化开发,提供了一些内......
  • Nodejs Playwright 2Captcha 验证码识别实现自动登陆
    NodejsPlaywright2Captcha验证码识别实现自动登陆需求日常工作当中,为了提高工作效率,我们可能会写脚本来自动执行任务。有些网站因为需要用户登陆,所以脚本的自动登陆功能必不可少。不过我们在登陆网站的时候经常会出现验证码,验证码的目的就是为了防止机器登陆、自动化脚本操......
  • uniapp中使用mqtt.js的踩坑记录
    最近在uniapp的vue3.0版本中使用mqtt.js库时遇到了一些坑,经过亲身踩坑,现在把实际能够实现在uniapp的app端能够使用mqtt.js的方法步骤记录如下:一、安装首先安装mqtt.js,建议使用较为稳定的3.0.0版本:[email protected]二、引入mqtt.jsimportmqttfrom'mqtt/dist/mqtt.......
  • WPF插件之 - PropertyChanged.Fody使用详解
    总目录文章目录总目录一、PropertyChanged.Fody是什么?二、PropertyChanged.Fody的安装三、PropertyChanged.Fody的功能1.特性1实现属性通知的功能2通知其他属性4不进行属性通知3指定属性更改时将调用的方法5设置当前属性依赖的属性6不检查是否相等7DoNotSetChangedAttribu......
  • Eplan插件 - 插入表格
    前言在Eplan中,受限于Eplan的基础功能,我们没有办法直接在Eplan中插入表格。当我们需要在Eplan中插入表格的时候只能手动通过矩形、直线、文本的方式一个一个绘制矩形。为了改善这种情况制作了Eplan插件,方便快速的插入表格。插件介绍亮点特征用户界面界面左右布局,左侧用于设置......
  • 如何全程使用docker部署jeecg平台,无需安装开发环境(主要是如何使用Docker来进行Maven打
    在部署jeecg平台时,文档中即使通过docker部署,也需要安装开发环境编译一部分内容,本文记录使用docker替代安装环境的过程。使用docker的目的是在平台选型的过程中,不希望麻烦的安装环境,同时如果选型不满意,无需卸载环境就能恢复一个干净的系统。部署环境:UbuntuServer20.04docker,......
  • js 创建和触发事件 和 自定义事件
    1、创建自定义事件Eventconstevent=newEvent("build");//监听该事件。elem.addEventListener("build",(e)=>{/*…*/},false,);//分派该事件。elem.dispatchEvent(event);2、创建自定义事件&添加自定义数据——customevent事件挂在到win......
  • 坚决不走小程序,而是走插件化
    程序发展的必然方向,就是插件化;https://tech.meituan.com/2019/12/19/meituan-mrn-practice.html程序发展一定会经历的阶段:业务要求快速发版试错和原生迭代周期长;必须搭建自己的开放平台,而搭建自己的开放平台,要么使用小程序来扩展,要么使用原生语言插件;若不使用插件化,业务持续......
  • JS历理 点击图片在弹出层显示大图
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1"><title>后台首页-ICbA后台模板-普通版演示</title><m......