FullCalendar插件的基本使用带详细配置翻译

2020-02-22 17:59:34

　

参考地址 FullCalendar插件的基本使用

前段时间，一直在开发考勤系统，当时为满足设计的需求，选了好几个插件，最后决定采用Fullcanlendar的插件。感觉这个插件可以满足现阶段的功能开发需求

　　　　需求图

　　　　

　　　　一、使用方式

　　　　1、依赖的文件引入

　　　　　　　　

　　　　2、页面使用--具体的各项属性和方法可以参照中文手册https://blog.csdn.net/ymnets/article/details/78661247

复制代码

    
         
         
        Fullcanlendar代码示例

复制代码

三、获取数据：

　　整个的插件使用的难点就在于获取数据，如果依赖events函数直接获得数据源的话，将后台传过来的当月数据整理好放入回调函数中，也是可行的，但是在获取上一个月或者下一个月的时候数据不会再次获取数据；

　　使用eventSources也是同样的道理，具体可以查看博客https://www.helloweba.net/javascript/454.html；

　　使用ajax请求，向后台请求该月份的数据的话，最好的方式就是在切换月份的时候，请求接口，获取数据；而不是一次获取大量的数据渲染，这样会导致渲染速度太慢，网页响应速度慢，影响用户的体验。

　　

复制代码

                   events: date = .getDate().format('YYYY-MM' arr=date.split("-" events = loopMonthDay(arr[0],arr[1loopMonthDay(arr[0],arr[1]); 是自己封装的函数
 　　　　　　　　　　}

复制代码

 

 四、说明

　　因为默认的Fullcanlendar的样式比较简单直接，所以一般情况下是需要改写样式的。


  • 精彩推荐

  • 2017-01-16 15:09:40

    Javascript模块化编程（一）：模块的写法

    随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。

  • 2017-01-16 15:16:24

    Javascript模块化编程（二）：AMD规范

    AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

  • 2017-01-16 15:19:24

    RequireJS 入门指南

    如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目，都用到了RequireJS，或者是我向它们推荐了增加RequireJS。在这篇文章中，我将描述RequireJS是什么，以及它的一些基础场景。

  • 2017-01-16 15:22:30

    CommonJS规范

    CommonJS模块规范。 根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

  • 2017-01-17 15:42:03

    vue-cli 发布（译）

    当我们真正开发一个应用的时候，我们不可避免的会用到一大堆的工具，模块化、预处理器、热模块加载、代码校验和测试。这些工具对于一个需要长期维护的大型应用是必须的，但是项目初始化将会是让人痛苦的事情。这就是为什么我们做了 vue-cli 。