0
Ich möchte klicken Sie auf die Schaltfläche "+" in allen Daten in der Vollkalender Zelle, die auf eine JSP-Seite zu Ereignisse hinzufügen, wo ich ein Datepicker haben werde gehen. Jedes Datum, das ich auf der JSP-Seite eingestellt habe, muss die Daten in dieser Zelle anzeigen. In diesem Fall Titel. Also, wenn ich den 4. Februar 2017 im Datepicker auswähle und andere Eingaben in Form wie Titel, Beschreibung usw. bearbeite. Es sollte in dieser spezifischen Zelle des Datums abgerufen und angezeigt werden.Load Ereignisse auf FullCalendar auf Datepicker Auswahl funktioniert nicht
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>
Hallo Ich habe es versucht, aber es funktioniert nicht. –