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-04-15 23:56:30

    onInterceptTouchEvent和onTouchEvent调用关系详解

    如果没有onInterceptTouchEvent，只考虑onTouchEvent的话，比较容易分析和理解。假如有三层布局结构，linearLayout1,linearLayout2,textView，从前到后是包含的关系。那么下面分情况说明。

  • 2017-04-16 19:36:32

    ViewPager预加载问题和onCreateView多次调用问题的解决

    1,在使用ViewPager嵌套Fragment的时候，由于VIewPager的几个Adapter的设置来说，都会有一定的预加载(默认是左右各一个Frament)。通过设置setOffscreenPageLimit（int number) 来设置预加载的熟练，在V4包中，默认的预加载是1，即使你设置为0，也是不起作用的，设置的只能是大于1才会有效果的。我们需要通过更改V4包中的默认属性才可以

  • 2017-04-16 21:02:55

    ImageView的android:adjustViewBounds属性

    取值为true时： Adjust the ImageView's bounds to preserve the aspect ration of its drawable. 调整ImageView的界限来保持图像纵横比不变。 这并不意味着ImageView的纵横比就一定和图像的纵横比相同

  • 2017-04-18 17:12:50

    Laravel 读取 config 下的数据

    Laravel的config下一般存放配置信息，可以通过config('key')方法获取指定的数据。 设置值可通过「点」式语法读取，其中包含要访问的文件名以及选项名称。