jquery的fullCalendar日历插件

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

1个回答

下面这个是他原来的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>          
    

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问