日程表插件(fullcalendar),自定义任务显示、切换视图

所属分类:输入-日期和时间

 40194  317  查看评论 (38)
分享到微信朋友圈
X
日程表插件(fullcalendar),自定义任务显示、切换视图 ie兼容9

更新时间:2020-01-10 00:17:40

更新说明:修复年视图,点击返回数据的正确性


更新时间:2020-01-09 00:32:11

更新说明:

1. 增加刷新数据的方法

2. 增加点击事件返回的数据


更新时间:2019/1/28 下午1:01:43

更新说明:修复事件,不正确显示在日期单元格内

<div id="calendar"></div>
var data = [
  { startDate: "2018-10-10", name: "事件1" },
  { startDate: "2018-10-10", name: "事件11" },
  { startDate: "2018-10-10", name: "事件12" },
  { startDate: "2018-10-1", name: "事件2" },
  { startDate: "2018-10-1", name: "事件3" },
  { startDate: "2018-10-1", name: "事件4" },
  { startDate: "2018-10-1", name: "事件5" },
  { startDate: "2018-10-1", name: "事件5" },
  { startDate: "2018-6-10", name: "事件7" },
  { startDate: "2018-4-10", name: "事件8" },
  { startDate: "2017-10-10", name: "事件9" },
  { startDate: "2017-2-10", name: "事件10" },
]
$("#calendar").calendar({
      data: data,
      mode: "month",
      //maxEvent: 3,
      //showModeBtn: false,
      newDate: "2018-10-1",
      cellClick: function (events) {
    //viewCell的事件列表
    },
})
相关插件-日期和时间

jquery日历控件datePicker

jquery.datePicker日历控件应用text文本框弹出日历表与默认显示日历表
  日期和时间
 65536  370

日程表插件(fullcalendar),自定义任务显示、切换视图

加载事件数据、能切换年月视图、控制任务的自定义显示数量和效果、单元格绑定事件和元素
  日期和时间
 40195  317

仿IOS移动端日历

超好用美观的移动端日历,兼容安卓和苹果及微信浏览器
  日期和时间
 45739  419

移动端万年历类型(滑动效果)

基于swiper的万年历模板,简单,移动端日历
  日期和时间
 60364  548

讨论这个项目(38)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    三年。 0
    2022/1/4 10:30:35
    0
    2021/4/21 21:45:41
    获取的当前时间不对
    回复
    梦萌比较懵。 0
    2020/1/8 13:15:37
    没有点击日期格的点击事件吗? 回复
    暖心 0
    2019/12/5 15:11:42
    谁有源代码啊
        w8074227040
        2020/1/8 15:52:30
        下载就是源代码啊
    回复
    LKFY 0
    2019/11/5 13:39:21
    钢铁侠也有玻璃心 0
    2019/10/18 16:07:57
    data重新获取后怎么刷新日历显示数据啊
        w8074227041
        2019/10/18 16:13:37

        源码里加个方法:

         loadData:function(data){
               var  me=this;
               if(!data) throw("数据错误");
               me.options.data=data;
               me._createCalendar();
           },

        页面调用:

        ("#calendar").data("calendar").loadData(data)
        钢铁侠也有玻璃心0
        2019/10/18 17:15:17
        谢谢 大牛牛批~~
        钢铁侠也有玻璃心0
        2019/10/18 17:23:51
        $("#calendar").data("calendar").loadData(data) 少了个$
    回复
    zero93 0
    2019/7/11 14:22:21
    怎么在不需要刷新的情况下更改data数据?现在做的是点击添加数据,但是data显示不知道怎么更改?
        w8074227041
        2019/10/18 16:14:36

        源码里加个方法:

         loadData: function(data) {
             var me = this;
             if (!data) throw ("数据错误");
             me.options.data = data;
             me._createCalendar();
         },

        页面调用:

        ("#calendar").data("calendar").loadData(data)
    回复
    w807422704 0
    2019/6/12 13:36:04
    绑定click事件 attr("title") 就是当前日期 回复
    独白 0
    2019/3/11 15:57:22
    如何获取当前日期呢
        w8074227041
        2019/3/11 16:17:49

        没有直接写方法
        1.可以通过id获取属性:

        $("#calendar").data("calendar").options.newDate

          2.如果点击时候获取日期,可以 .calendar-cell 点击事件中将cellDate返回

        独白0
        2019/3/12 15:41:38
        好的,给cellclick方法加了个获取日期的,还想问问您,当选择月份的时候,有没有月份改变事件呢,如何获取当前选择的月份
    回复
    曾** 0
    2019/2/27 9:22:32
    怎么获取点击cell获取的日期呢???
        独白0
        2019/3/11 15:52:40
        请问您知道怎么解决了吗?
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复