fullcalendar搜索事件并定位以及跳转到指定年月

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/74905758

 日历日程和事件最后的需求就是检索和定位。以及日期的跳转。别看功能很简单,这项功能也不是大家都有的,下面腾讯的TIM主推的日程暂时也没这个功能啊。

在顶端自定义添加了检索框和跳转框。

检索到事件,准备定位

定位到检索结果所在月份。

用跳转到指定月功能,穿越到1000年1月。

或者穿越到9000年1月也是片刻的事情。

向fullcalendar中添加自定义工具栏:

  $('#calendar .fc-left').append('<div class="input-group"><input type="text" id="eventtext" class="fc-prev-button fc-button fc-state-default fc-corner-left" style="width:100px;height:29px;" placeholder="搜索事件"><button type="button" id="searchbutton" class="fc-next-button fc-button fc-state-default fc-corner-right"><span class="fa fa-search"></span></button></div>');
  $('#calendar .fc-right').prepend('<div class="input-group"><input id="monthpicker" type="text" class="fc-prev-button fc-button fc-state-default fc-corner-left" style="width:100px;height:29px;" placeholder="输入年-月"><button type="button" id="monthbutton" class="fc-next-button fc-button fc-state-default fc-corner-right"><span class="add-on">goto<i class="icon-th"></i></span></button></div>');
//搜索事件,得到事件列表
  $(document).ready(function() {
    $("#searchbutton").click(function() {
      var eventtext = $("#eventtext").val();

      $('#searchtable').bootstrapTable('refresh', {url:'/admin/calendar/searchcalendar?title='+eventtext});

      $('#modalsearch').modal({
        show:true,
        backdrop:'static'
      });
    })
  })
//将搜索的事件标题加点击事件进行跳转
  function settile(value,row,index){
    articleUrl= '<a class="gotodate" href="javascript:void(0)" title="跳转"><i class="fa fa-file-text-o"></i>'+row.title+'</a>';
      return articleUrl;
  }
//搜索事件结果表中的事件进行跳转
  window.actionEvents = {
    'click .gotodate': function (e, value, row, index) {
      var date =$.fullCalendar.moment(row.start);
      $('#calendar').fullCalendar('gotoDate', date);
      $('#modalsearch').modal('hide');
    },
  }
//跳转到某月
  $(document).ready(function() {
    $("#monthbutton").click(function() {
      var monthtext = $("#monthpicker").val();
      var date =$.fullCalendar.moment(monthtext);
      $('#calendar').fullCalendar('gotoDate', date);
    })
  })
<!-- 搜索日程结果窗口 -->
  <div class="form-horizontal">
    <div class="modal fade" id="modalsearch">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">×</span>
            </button>
            <h3 class="modal-title" id="attachtitle">事件搜索结果</h3>
          </div>
          <div class="modal-body">
            <div class="modal-body-content">
              <!-- <table id="searchtable"没有data-toggle="table"就不行
                    data-query-params="queryParams"
                    data-page-size="5"
                    data-page-list="[5, 25, 50, All]"
                    data-unique-id="id"
                    data-toolbar="#searchbar"
                    data-pagination="true"
                    data-side-pagination="client"
                    data-show-refresh="true"
                    data-click-to-select="true">
                <tr> 
                  <th data-formatter="index1">#</th>
                  <th data-field="Title" data-formatter="setTtile">名称</th>
                  <th data-field="Content">内容</th>
                  <th data-field="Starttime" data-formatter="localDateFormatter">开始时间</th>
                  <th data-field="Endtime" data-formatter="localDateFormatter">结束时间</th>
                </tr>
              </table> -->
              <div id="attachtoolbar" class="btn-group">
                <button type="button" data-name="deleteAttachButton" id="deleteAttachButton" class="btn btn-default">
                <i class="fa fa-trash">删除</i>
                </button>
              </div>
              <table id="searchtable"
                    data-toggle="table"
                    data-toolbar="#attachtoolbar"
                    data-page-size="5"
                    data-page-list="[5, 25, 50, All]"
                    data-unique-id="id"
                    data-pagination="true"
                    data-side-pagination="client"
                    data-click-to-select="true">
                  <thead>     
                  <tr>
                    <th data-formatter="index1">#</th>
                    <th data-field="title" data-formatter="settile" data-events="actionEvents">名称</th>
                    <th data-field="content">内容</th>
                    <th data-field="start" data-formatter="localDateFormatter">开始时间</th>
                    <th data-field="end" data-formatter="localDateFormatter">结束时间</th>
                  </tr>
                </thead>
              </table>

            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏拂晓风起

Flex 4 NativeWindow 中添加Flex组件(问题很多,尚不完善)

1254
来自专栏移动端周边技术扩展

UniversalLink Associated Domains

2133
来自专栏自动化测试实战

《selenium2 python 自动化测试实战》(12)——跳过验证码登录add_cookie

5365
来自专栏Ken的杂谈

Grafana快速入门:InfluxDB数据源以及曲线图表仪表盘配置

Grafana默认支持的数据源:Graphite,InfluxDB,OpenTSDB,Prometheus,Elasticsearch,CloudWatch

1.7K3
来自专栏黑泽君的专栏

ubuntu16.04在英文状态下安装中文语言包的过程(法一:图形界面的方式) 以及 安装中文语言包后无法选择汉语问题的解决

 1、笔记本安装的ubuntu是桌面的,安装语言包非常方便,桌面版本选择 齿轮 --> System --> System Settings... --> La...

5281
来自专栏智能大石头

魔方NewLife.Cube升级v2.0

 魔方是一套集成权限管理的MVC管理后台,最具特色功能是模版覆盖机制,是XCode实体类的最佳搭档! v2.0.2017.1126   借助Ajax支持高级操作...

2229
来自专栏移动端周边技术扩展

Server持续构建IPA测试

2188
来自专栏码生

实现更安全、高扩展的自定义键盘 非UIButton

自定义键盘的封装网上的例子比比皆是,有的封装的非常完美,直接pod 集成到项目中便可以简单的使用,可是为什么我还要自定义一个呢? 一不是不是为了显摆,二不是网...

1222
来自专栏技术博客

ExtJs十三(ExtJs Mvc图片管理之三)

现在要完成目录的编辑操作。因为目录的编辑只是改变目录名称,因而使用Cellediting插件就可完成工作。要完成这个不难,首先在目录树的定义中加入以下语句隐藏列...

1293
来自专栏LeeCen

ShareSDK第三方分享与登录遇到的问题

3942

扫码关注云+社区

领取腾讯云代金券