weixin_40346192 2017-11-04 15:33 采纳率: 50%
浏览 1260

jquery的fullCalendar日历插件

想查询数据库的title(日程标题),className(标题的颜色),start(开始的时间),end(日程结束时间),返回到jsp页面的fullCalendar插件中,返回数据测试过(日期的还没写)没问题,但是回传到events那里无法更新界面的个人日程事件,请问是什么回事??
title那些已经用alert方法测试过,没有问题。这个是events方法,date数据库暂时没写

  • 写回答

1条回答 默认 最新

  • weixin_40346192 2017-11-04 15:37
    关注

    下面这个是他原来的events的赋值方法,我只修改了他events部分,难道别的地方也要修改吗?

    原来的events

    下面代码是整个fullCalendar()
    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>

    <!DOCTYPE html>
    <!--[if IE 9 ]><![endif]-->





    个人日程管理

    <!-- Vendor CSS -->






    <!-- CSS -->







    Calendar FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API.

















    •                             <ul class="dropdown-menu dropdown-menu-right">
                                      <li>
                                          <a href="">Refresh</a>
                                      </li>
                                      <li>
                                          <a href="">Manage Widgets</a>
                                      </li>
                                      <li>
                                          <a href="">Widgets Settings</a>
                                      </li>
                                  </ul>
                              </li>
                          </ul>
      
                      </div>
      
                      <div id="calendar"></div>
      
                      <!-- Add event -->
                      <div class="modal fade" id="addNew-event" data-backdrop="static" data-keyboard="false">
                          <div class="modal-dialog">
                              <div class="modal-content">
                                  <div class="modal-header">
                                      <h4 class="modal-title">Add an Event</h4>
                                  </div>
                                  <div class="modal-body">
                                      <form class="addEvent" role="form" method="method">
                                          <div class="form-group">
                                              <label for="eventName">Event Name</label>
                                              <div class="fg-line">
                                                  <input type="text" class="input-sm form-control" id="eventName" placeholder="eg: Sports day">
                                              </div>
                                          </div>
      
                                          <div class="form-group">
                                              <label for="eventName">Tag Color</label>
                                              <div class="event-tag">
                                                  <span data-tag="bgm-teal" class="bgm-teal selected"></span>
                                                  <span data-tag="bgm-red" class="bgm-red"></span>
                                                  <span data-tag="bgm-pink" class="bgm-pink"></span>
                                                  <span data-tag="bgm-blue" class="bgm-blue"></span>
                                                  <span data-tag="bgm-lime" class="bgm-lime"></span>
                                                  <span data-tag="bgm-green" class="bgm-green"></span>
                                                  <span data-tag="bgm-cyan" class="bgm-cyan"></span>
                                                  <span data-tag="bgm-orange" class="bgm-orange"></span>
                                                  <span data-tag="bgm-purple" class="bgm-purple"></span>
                                                  <span data-tag="bgm-gray" class="bgm-gray"></span>
                                                  <span data-tag="bgm-black" class="bgm-black"></span>
                                              </div>
                                          </div>
      
                                          <input type="hidden" id="getStart" />
                                          <input type="hidden" id="getEnd" />
                                      </form>
                                  </div>
      
                                  <div class="modal-footer">
                                      <button type="submit" class="btn btn-link" id="addEvent">Add Event</button>
                                      <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                    <!-- Javascript Libraries -->
          <script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
          <script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>       
          <script src="vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
          <script src="vendors/bower_components/Waves/dist/waves.min.js"></script>
          <script src="vendors/bootstrap-growl/bootstrap-growl.min.js"></script>
          <script src="vendors/bower_components/bootstrap-sweetalert/lib/sweet-alert.min.js"></script>
          <script src="vendors/bower_components/moment/min/moment.min.js"></script>
          <script src="vendors/bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
      
          <!-- Placeholder for IE9 -->
          <!--[if IE 9 ]>
              <script src="vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
          <![endif]-->
      
          <script src="js/functions.js"></script>
          <script src="js/demo.js"></script>
      
          <script type="text/javascript">
              $(document).ready(function() {       
                  var date = new Date();
                  var d = date.getDate();
                  var m = date.getMonth();
                  var y = date.getFullYear();
      
                  var cId = $('#calendar'); //Change the name if you want. I'm also using thsi add button for more actions
      
                  //Generate the Calendar 形成日程表
                  cId.fullCalendar({
                      header: {
                          right: '',
                          center: 'prev, title, next',
                          left: ''
                      },
                      theme: true, //Do not remove this as it ruin the design
                      selectable: true,
                      selectHelper: true,
                      editable: true,                           
                      //Add Events 增加最新的个人日程事件 重要!                          
                      events: function(start,end,callback){
                          var params = '{}';
                          $.ajax({                
                                   url:"${ctx}/selectcalendar",
                                   type:"post",
                                   data:params,
                                   contentType:"application/json;charset:utf-8",
                                   dataType: "json",
                                   success: function(data){
                                       var events = [];
                                       for(var i=0;i<data.length;i++)       
                                          events.push({
                                               title:data[i].title,           
                                               start:new Date(2017,10,20),
                                               end:new Date(2017,10,22), 
                                               allDay:true,
                                               className:data[i].className
                                          });
      
                                       alert(events[5].title);                
                                       callback(events);  
                            }                    
                      });
      
                },             
                      //On Day Select  具体某一天选择
                      select: function(start, end, allDay) {
                          $('#addNew-event').modal('show');   
                          $('#addNew-event input:text').val('');
                          $('#getStart').val(start);
                          $('#getEnd').val(end);
                      }
                  });
      
                  //Create and ddd Action button with dropdown in Calendar header. 在日历页眉中创建下拉按钮和DDD操作按钮
                  var actionMenu = '<ul class="actions actions-alt" id="fc-actions">' +
                                      '<li class="dropdown">' +
                                          '<a href="" data-toggle="dropdown"><i class="zmdi zmdi-more-vert"></i></a>' +
                                          '<ul class="dropdown-menu dropdown-menu-right">' +
                                              '<li class="active">' +
                                                  '<a data-view="month" href="">Month View</a>' +
                                              '</li>' +
                                              '<li>' +
                                                  '<a data-view="basicWeek" href="">Week View</a>' +
                                              '</li>' +
                                              '<li>' +
                                                  '<a data-view="agendaWeek" href="">Agenda Week View</a>' +
                                              '</li>' +
                                              '<li>' +
                                                  '<a data-view="basicDay" href="">Day View</a>' +
                                              '</li>' +
                                              '<li>' +
                                                  '<a data-view="agendaDay" href="">Agenda Day View</a>' +
                                              '</li>' +
                                          '</ul>' +
                                      '</div>' +
                                  '</li>';
      
      
                  cId.find('.fc-toolbar').append(actionMenu);
      
                  //Event Tag Selector 事件标签选择器
                  (function(){
                      $('body').on('click', '.event-tag > span', function(){
                          $('.event-tag > span').removeClass('selected');
                          $(this).addClass('selected');
                      });
                  })();
      
                  //Add new Event 增加新事件 重要!
                  $('body').on('click', '#addEvent', function(){
                      var eventName = $('#eventName').val();
                      var tagColor = $('.event-tag > span.selected').attr('data-tag');
      
                      if (eventName != '') {
                          //Render Event 给予事件
                          $('#calendar').fullCalendar('renderEvent',{
                              title: eventName,
                              start: $('#getStart').val(),
                              end:  $('#getEnd').val(),
                              allDay: true,
                              className: tagColor
      
                          },true ); //Stick the event
      
                          $('#addNew-event form')[0].reset()
                          $('#addNew-event').modal('hide');
                      }
      
                      else {
                          $('#eventName').closest('.form-group').addClass('has-error');
                      }
                  });   
      
                  //Calendar views  日程表展示
                  $('body').on('click', '#fc-actions [data-view]', function(e){
                      e.preventDefault();
                      var dataView = $(this).attr('data-view');
      
                      $('#fc-actions li').removeClass('active');
                      $(this).parent().addClass('active');
                      cId.fullCalendar('changeView', dataView);  
                  });
              });                        
          </script>          
      

    评论

报告相同问题?

悬赏问题

  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗