FullCalendar日程插件

版本4.3.1

坑倒是没遇到什么,就是刷新看了好久的文档o(╥﹏╥)o

下面就开始贴代码

 //加载日历
    function fullCalendarInit() {
        var calendarEl = document.getElementById(‘calendar‘);
        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: ‘zh-cn‘,//显示中文
            defaultDate: timeFormat(new Date(), "yyyy-MM-dd"),
            plugins: [‘interaction‘, ‘dayGrid‘, ‘timeGrid‘, ‘list‘],
            header: {
                left: ‘prev,next today‘,
                center: ‘title‘,
                right: ‘dayGridMonth,timeGridWeek,timeGridDay,listMonth‘
            },
            businessHours: true, // 显示营业时间(即周一~周五)
            navLinks: true, // 点击日或者周的名字跳转详细页面
            selectable: true,
            selectMirror: true,
            select: function (arg) {//点击日历空白区域
                clearData();//清空弹窗数据
                showModal();//弹出弹窗
                calendar.unselect();//清空点击
            },
            editable: true,
            eventLimit: true, // 事件太多显示更多
            events: function (info, successCallback, failureCallback) {//加载事件
                var json = new Array();
                json = GetEvents(info.start, info.end);//获取事件
                successCallback(json);//回调函数
            },
            eventTimeFormat: { //事件显示时:分
                hour: ‘2-digit‘,
                minute: ‘2-digit‘,
                hour12: false
            },
            eventClick: function (info) {//点击事件
                clearData();//清空弹窗数据
                fullCalendarEdit(info.event.id);//编辑事件
            },
            eventDrop: function (info) {//拖拽事件
                var arr = new Array();
                arr = fullCalendarDropOrResize(info.event.id, info.event.start, info.event.end)
                if (arr[0] <= 0) {//如果操作失败,就恢复没有拖拽之前的状态
                    info.revert();
                }
            },
            eventResize: function (info) {//改变事件时间大小
                var arr = new Array();
                arr = fullCalendarDropOrResize(info.event.id, info.event.start, info.event.end)
                if (arr[0] <= 0) {//如果操作失败,就恢复没有拖拽之前的状态
                    info.revert();
                }
            },
            eventMouseEnter: function (info) {//鼠标悬停事件

            }
        });

        calendar.render();
        cal = calendar;//用于刷新数据
    }
 //刷新日历
    function refreshEvent() {
        cal.refetchEvents();
    }

版本2.3.2

  

贴代码~~~

 //文档加载
    $(document).ready(function () {
        //加载日历
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        $(‘#calendar‘).fullCalendar({
            header: {
                left: ‘prev,next today‘,
                center: ‘title‘,
                right: ‘month,agendaWeek,agendaDay‘
            },
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            today: ["今天"],
            buttonText: {
                today: ‘今天‘,
                month: ‘月‘,
                week: ‘周‘,
                day: ‘日‘,
                prev: ‘<‘,
                next: ‘>‘
            },
            eventLimit: true, // 事件太多显示更多
            eventTimeFormat: "HH:mm",
            defaultDate: timeFormat(new Date(), "yyyy-MM-dd"),
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar
            events: function (begin, end, timezone, callback) {//加载事件
                var json = new Array();
                json = GetEvents(begin, end);//获取事件
                callback(json);//回调函数
            },
            dayClick: function (date, jsEvent, view) {//点击日历空白区域
                clearData();//清空弹窗数据
                showModal();//弹出弹窗
            },
            eventClick: function (calEvent, jsEvent, view) {//点击事件
                clearData();
                fullCalendarEdit(calEvent.id);
            },
            eventDrop: function (event, delta, revertFunc) {//拖拽事件
                var arr = new Array();
                arr = fullCalendarDropOrResize(event.id, event.start, event.end)
                if (arr[0] <= 0) {//操作失败,恢复原状
                    revertFunc();
                }
            },
            eventResize: function (event, delta, revertFunc) {//改变事件时间大小
                var arr = new Array();
                arr = fullCalendarDropOrResize(event.id, event.start, event.end)
                if (arr[0] <= 0) {//操作失败,恢复原状
                    revertFunc();
                }
            }
        });
    });
//刷新日历
    function refreshEvent() {
        $(‘#calendar‘).fullCalendar(‘refetchEvents‘);
    }

整理完成~~周五快乐

原文地址:https://www.cnblogs.com/MuZiLily/p/12034562.html

时间: 2024-08-30 18:21:37

FullCalendar日程插件的相关文章

FullCalendar 日历插件中文说明文档

FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中文文档,以供参阅 普通显示设置 属性 描述 默认值 header 设置日历头部信息.如果设置为false,则不显示头部信息.包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置:title: 显示当前月份/周/日信息prev: 用于切换到上一月/周/日视图的按钮ne

FullCalendar日历插件说明文档

FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中文文档,以供参阅.当前版本1.6.4. 最新版本有变化啊 minTime maxTime 普通显示设置 属性 描述 默认值 header 设置日历头部信息. 如果设置为false,则不显示头部信息.包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置:title:

FullCalendar日历插件(中文API,简单Demo)

FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中文文档,以供参阅.当前版本1.6.4. 普通显示设置 属性 描述 默认值 header 设置日历头部信息.如果设置为false,则不显示头部信息.包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置:title: 显示当前月份/周/日信息prev: 用于切换到上一月

FullCalendar日历插件说明文档(转)

FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中文文档,以供参阅.当前版本1.6.4. 普通显示设置 属性 描述 默认值 header 设置日历头部信息.如果设置为false,则不显示头部信息.包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置:title: 显示当前月份/周/日信息prev: 用于切换到上一月

FullCalendar日历插件

使用FullCalendar做个自己的日程管理(一)- 基础篇 使用FullCalendar做一个自己的日程管理(二)- 事件篇 使用FullCalendar做一个自己的日程管理(三)- 持久化篇

fullCalendar插件基本使用

效果图 html代码,需要引入jquery,layui,fullCalendar <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fullCalendar</title> <link rel="stylesheet" href="fullcalendar-3.9.0/f

FullCalendar应用——读取JSON数据

开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序.本文将结合实例使用PHP读取MySQl数据,显示在FullCalendar日历中. 查看演示DEMO 根据FullCalendar日历插件说明文档中的介绍,日历主体事件数据的来源有三,一是直接以javascript数组的形式显示日历事件,二是获取JSON数据形式显示日历事件,三是函数回调的形式显示日历数据,三种调用数据的方式各有所用之处

前端常用js插件

目前知道的插件有以下 下面有一部分我还是使用过的,但还有一部分是搜集资料了解到的 后边还会持续更新 后边我也会将这些插件的整合和全部的插件的例子放在个人github上面 欢迎star fontAwesome 字体 已经介绍 SweetAlert 已经介绍 toastr通知 已经介绍 jquerylazyload 懒加载 已经介绍 bootstrap-switch 开关插件 已经介绍 intro.js 用户引导 已经简单介绍 jqcloud 云词 已经介绍 validate 表单验证 layPag

【Ionic+AngularJS 开发】之『个人日常管理』App(二)

准备工作 资源 预装工具 安装bower 1 npm install -g bower 安装ngCordova 1 bower install ngCordova (*由于网络获取资源的原因,后面几次建项目后都无法下载到,自己便复制了原来的ngCordova目录(到YourProject\wwww\lib目录下),发现也是可以使用的) 下载好后,在项目的index.hmtl进行引用: 1 <script src="lib/ngCordova/dist/ng-cordova.js"