UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

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

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

 41338  317  查看评论 (40)
分享到微信朋友圈
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的事件列表
    },
})
相关插件-日期和时间
查看更多

轻量级移动端日期选择器mtimer

 轻量级移动端日期选择器
  日期和时间
 47125  356

自带三种风格的日历日期选择插件

 小巧精致自带三种风格可换背景
  日期和时间
 28183  309

抖音超火的罗马时钟

 原生js实现抖音超火的罗马时钟，代码注释全。
  日期和时间
 44020  402

jquery周日历展示可选择

 基于jquery简单易用的周日历选择插件，可选择跳转到指定年份指定周
  日期和时间
 40496  323

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

    三年。 0
    2022/1/4 10:30:35
    奈斯啊炒鸡棒
        Mr.Y0
        2024/6/26 9:05:59
        🍺👏
    回复
    我 0
    2021/4/21 21:45:41
    获取的当前时间不对
        Mr.Y0
        2024/6/26 9:06:15
        👍👍
    回复
    梦萌比较懵。 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
        请问您知道怎么解决了吗？
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复