Question

enter image description here
那么让我解释一下我的功能流程。

转到index.jsp（日历页面）
点击您要添加活动的日期的“+”按钮
转到AddEvent.jsp
填写表格＆gt;在表单中输入的数据必须能够显示在您单击以添加事件的特定单元格中。例如，如果您单击2017年3月12日的单元格，则您在AddEvent.jsp中输入的数据应该能够显示在该特定单元格中。我在AddEvent.jsp中有一个日期选择器，所以问题是，如何根据我在jsp页面中使用日期选择器选择的日期来设置我的fullcalendar来显示数据。

的index.jsp：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@page import="model.AddEvents,java.util.ArrayList,java.util.ListIterator" %>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script type="text/javascript" src= "https://code.jquery.com/jquery-3.2.1.min.js">
$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();



    var events_array = [
        {
        title: 'Test1',
        start: new Date(2012, 8, 20),
        tip: 'Personal tip 1'},
    {
        title: 'Test2',
        start: new Date(2012, 8, 21),
        tip: 'Personal tip 2'}
    ];

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        events: events_array,
        eventRender: function(event, element) {
            element.attr('title', event.tip);
        },




});

</script>
    <title>Calendar</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css" type="text/css" rel="stylesheet" />

</head>

<body>

    <a class= "add_event_label" href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea"></a>

    <div class="container">


        <div class="row">

            <div class="col-xs-12">

                <h1>Calendar</h1>

                <br />

                <div id="bootstrapModalFullCalendar"></div>




            </div>

        </div>

    </div>

  <!-- this is the pop up window when you press the button -->

   <div id="fullCalModal" class="modal fade">

        <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> <span class="sr-only">close</span></button>

                    <h4 id="modalTitle" class="modal-title"></h4>

                </div>

                <div id="modalBody" class="modal-body">


                 </div>


                <!-- <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                    <a class="btn btn-primary" id="eventUrl" target="_blank">Event Page</a>

                </div>-->

            </div>

        </div>

    </div>


    <script src="https://code.jquery.com/jquery.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



    <script>


        $(document).ready(function() {

            $('#bootstrapModalFullCalendar').fullCalendar({

                header: {

                    left: '',

                    center: 'prev title next',

                    right: ''


                },
                //action after calendar loaded
                eventAfterAllRender: function(view){
                    if(view.name == 'month')
                    {                       
                        //loop all .fc-day elements
                        $('.fc-day').each(function(){
                        //jQuery styling
                            $(this).css({ 'font-weight': 'bold', 'font-size': '100%'});
                            $(this).css('position','relative');
                            //add elements to each .fc-day, you can modify the content in append() with your own html button code
                            $(this).append('<a class="add_event_label" href ="AddEvent.jsp" style="position:absolute;bottom:0;left:0;right:0;display:block;font-size:12px;color:blue;cursor:pointer;">(+)</a>' );
                            <%!ArrayList<AddEvents> myEventList; //have to declear in a declaration tag for access in the page %>
                            <% myEventList = (ArrayList<AddEvents>) request.getAttribute("EventList");
                            if(myEventList.size() == 0)
                            {
                                %>
                                <h2>No events</h2>
                                <%
                            }
                            else
                            {
                                %>


                            <%
                            ListIterator<AddEvents> li = myEventList.listIterator();

                            while(li.hasNext())
                            {
                                AddEvents myEvent = new AddEvents();
                                myEvent= (AddEvents)li.next();
                                %>

                            $(this).append('<p>Title:</p><p><%= myEvent.getTitle() %></p></p>');
                            <%}


                                %>

                                <%
                                }
                                %>



                        });      
                    }                   
                },

                eventClick:  function(event, jsEvent, view) {
                    //$(".fc-day-number").prepend("(+) ");

                    $('#modalTitle').html(event.title);

                    $('#modalBody').html(event.description);

                    $('#eventUrl').attr('href',event.url);

                    $('#fullCalModal').modal();

                    return false;

                }


            })
            })

    </script>
    </body>
<input id='eventID' type="hidden" name="hiddEvent" value="">
</html>

RetrieveServlet：我运行的控制器和主页面显示index.jsp

package servlet;

import java.io.IOException;


import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import database.DBAO;
import model.AddEvents;

/**
 * Servlet implementation class RetrieveServlet
 */
@WebServlet("/RetrieveServlet")
public class RetrieveServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public RetrieveServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //response.getWriter().append("Served at: ").append(request.getContextPath());


        doPost(request,response); //dispatcher sents deget request, since ur code is in dopost, u will need to all it.
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        try
        {
            DBAO myDatabase = new DBAO();
            ArrayList <AddEvents> myEventList = myDatabase.getAddEvents();
            System.out.println(myEventList.size());
            request.setAttribute("EventList",myEventList);
            request.getRequestDispatcher("index.jsp").forward(request, response);


    }catch(Exception ex)
        {
            System.out.println("Error Accessing Database:" +ex.getMessage());
        }

    }
}

它现在所做的是在所有单元格中显示mysql数据库中的所有数据。如果你们帮助我，我将不胜感激。我尝试在线搜索，但没有任何关于这一点，我修改了fullcalendar的实际工作方式。如果我没错，fullcalendar通过拖放事件来工作，但我正在处理一个更复杂的事情。为了更好地理解，我在流程上添加了一张图片。你们也可以参考这个 - https://fullcalendar.io/docs/来更好地理解完整日历。希望你们理解它，并提前感谢:)

如何使用datepicker将数据显示到fullcalendar中

0 个答案: