fullcalendar应用(三)

本文介绍如何使用fullcalendar实现日程查找功能。点击查找按钮,若无内容则提示输入,找到匹配项则跳转至新日程(calendar3),取消查找返回原日程(calendar2)。同时,更新了html、options.js和添加了相关按钮功能。日历之间事件的切换和清除逻辑得到了详细阐述。
摘要由CSDN通过智能技术生成

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
效果就是这样,点击查找,如果查不到内容会弹出“请输入内容”查到内容就会跳到新的日程(calendar3),点击取消查找会跳回原来的日程(calendar2),重新显示所有的日程,同时清除查找text标签的内容,清除calendar3的所有事件。

与上一篇结合,只是更换几个地方就可以了。
html部分,只需要把"findlist"及后面的tabal都去掉换成calendar3就行了。

<div style="clear:both">
    <div class="calendar_body">
      <div id="calendar" class="calendar_left"></div>
      <div id="calendar2" class="calendar_right"></div>
      <div id="calendar3" class="calendar_right" style="display:none">
      </div>
    </div>
  </div>

options.js内容
可以把findlist所有内容清空了,都用不上了。
customButtons:增加按钮功能,我把‘

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值