Java 如何使用datepicker在fullcalendar中显示数据
Java 如何使用datepicker在fullcalendar中显示数据,java,mysql,jsp,servlets,fullcalendar,Java,Mysql,Jsp,Servlets,Fullcalendar,让我解释一下我函数的流程 转到index.jsp（日历页） 在要添加事件的日期单击“+”按钮 转到AddEvent.jsp 填写表单>表单中输入的数据必须能够显示在单击以添加事件的特定单元格中。例如，如果单击2017年3月12日的单元格，则在AddEvent.jsp中输入的数据应该能够显示在该特定单元格中。我在AddEvent.jsp中有一个日期选择器，所以现在的问题是，如何使用日期选择器设置fullcalendar以根据我在jsp页面中选择的日期显示数据 index.jsp： <%@ p
让我解释一下我函数的流程
<%@ 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>
在此处插入标题
$（文档）.ready（函数（）{
变量日期=新日期（）；
var d=date.getDate（）；
var m=date.getMonth（）；
var y=date.getFullYear（）；
变量事件\u数组=[
{
标题：“Test1”，
开始日期：新日期（2012年8月20日），
提示：'个人提示1'}，
{
标题：“Test2”，
开始日期：新日期（2012年8月21日），
提示：'个人提示2'}
];
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
是的，
事件：事件数组，
eventRender:函数（事件，元素）{
element.attr（'title'，event.tip）；
},
});
历法
历法
×闭合
$（'.fc day'）。每个（函数（）{
-在这个循环中，您将遍历日历上的所有日期，并将所有事件附加到每天。我不明白您为什么要这样做？为什么不按照文档中所示绑定您的事件？或者根据您的具体情况进行绑定situation@ADyson我不知道它是如何工作的，我的项目要求我只使用jsp、servlet和jQuery/ajax和java。除此之外，您无法将这两种方法与刚才列出的技术一起使用。没问题。您可以通过阅读这些文章从fullCalendar方面了解它的工作原理。在最基本的方法（JSON形式的事件）中，您为fullCalendar提供了一个URL作为“事件”属性。当加载日历时，无论何时更改日期或视图，它都会使用ajax调用该URL，传入当前的开始/结束日期，并从响应中下载最新的事件数据。它希望来自该URL的响应中的事件数据采用fullCalendar理解的JSON格式，并且仅包含指定的日期。。..您可以轻松编写一些Java代码来创建一个端点，该端点将接受这些参数，查询您的数据库，并以JSON的形式返回数据-看起来您已经有了数据库代码，您可以轻松地用谷歌搜索如何将其转换为JSON，您只需将该功能作为一个独立的URL从主页的URL。我不懂JSP，所以无法帮助您了解细节，但这是您需要遵循的一般设计。您目前的做法很奇怪，永远不会正常工作。@ADyson我刚刚在AddEvents.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());
}
}
}