我想点击fullcalendar单元格中任何日期的'+'按钮，该按钮将转到jsp页面添加事件，我将有一个日期选择器。无论我在jsp页面中设置什么日期，都必须在该单元格中显示数据。在这种情况下标题。因此，如果我在日期选择器中选择2017年2月4日并填写表格中的其他输入，例如标题，描述等。它应该检索并显示在该日期的特定单元格中。
的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">
var checkin = jQuery('#startDate').fdatepicker({
format: "dd.mm.yyyy",
}).data('datepicker');
var checkout = jQuery('#endDate').fdatepicker({
format: "dd.mm.yyyy",
}).on('changeDate', function(ev) {
var startDate = new Date(ev.date);
$('#calendar').fullCalendar('gotoDate', startDate);//modify the date of full calendar
}).data('datepicker');
$(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);
},
});
$(".fc-header-left").hide();
$(".fc-header-right").hide();
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('.fc-border-separate thead').addClass("sticky");
}
else{
$('.fc-border-separate thead').removeClass("sticky");
}
});
</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：
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());
}
}
}
AddEvent.jsp：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" %>
<%@ page import ="model.AddEvents,model.User,java.util.ArrayList,java.util.ListIterator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script>
function myFunction() {
document.getElementById("myTime").value = "22:53:05";
}
function mySubmitFunction() {
alert("You added an Event");
}
</script>
</head>
<body>
<h1 align="center">Add Event</h1>
<form action="AddEventsServlet" method="post" onsubmit="mySubmitFunction()">
<table align="center" border= "10px" cellpadding="10">
<tr>
<td>
<label>Title :</label><input type="text" name="Title" required>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<label>Details:</label><textarea rows="4" cols="15" name="EventDesc"></textarea>
<div style="border:solid 2px red;">
<div id='calendar'></div>
</div>
<div class="tag hide" id="cal-info">
</div>
</td>
</tr>
<tr>
<td>
Start date:<input type="text" id="startDate" name="datepicker" class="input_text" value="">
</td>
</tr>
<tr>
<td>
End date:<input type="text" id="endDate" name="datepicker" class="input_text" value="">
</td>
</tr>
<tr>
<td>
Start time:<input type="time" id="myTime" name="StartTime">
</td>
</tr>
<tr>
<td>
End time:<input type="time" id="myTime" name="EndTime">
</td>
</tr>
<tr>
<td>
Approximate Budget:<input type="text" id="budget" name="Budget">
</td>
</tr>
<!-- <tr>
<td>
Transportation:<select name="transportation" name="Transportation">
<option value="Bus">Bus</option>
<option value="MRT">MRT</option>
<option value="Cab">Cab</option>
<option value="Walk">Walk</option>
</select>
</td>
</tr>-->
<!-- -<tr>
<td>
Environment: <input type="radio" name="Indoor" value="Indoor" name="Environment"> Indoor
<input type="radio" name="Outdoor" value="Outdoor">Outdoor<br>
</td>
</tr>
<tr>-->
<tr>
<!-- you went to the retrieve servlet instead of AddEventsServlet, thus i won create any event -->
<td><input class = 'btnSel' type="submit" name="btnAddView" value="Add" onclick="form.action='AddEventsServlet';"> <button type="reset" value="Reset">Reset</button></td></tr>
</table>
<input id ='eventID' type="hidden" name ="hiddEvent" value="">
<a href="index.jsp">
<img border="0" alt="W3Schools" src="cal.jpg" width="50" height="50">
</a>
</form>
</body>
</html>
答案 0 :(得分：0)
我认为你应该做的是创建一个功能
function changeDate() {
var startDate = $('#id-of-your-element-of-the-date-picker').val();
$('#calendar').fullCalendar('gotoDate', startDate);
}
为$('#id-of-your-element-of-the-date-picker').onChange(changeDate);
如果您在该日期范围内有一些事件，这也应该重新呈现您的事件。 希望这会有所帮助。