Untitled

Ok so what I'm trying to do is display data saved in mysql database to the each cell or date of the fullcalendar. I'm able to save data and retrieve and diplay in a separate jsp page to test out. What i'm supposed to do is display it out in a fullcalendar. My flow is index.jsp (shows my Full Calendar) > if "+" is pressed > it goes to AddEvent.jsp> Which the data need to be displayed on index.jsp (fullCalendar page)

Index.jsp: This is my main page that displays the calendar so in each cell of the calendar, the data saved in mysql should appear
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>

<%@page import="model.AddEvents,java.util.ArrayList,java.util.ListIterator" %>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">


<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();


    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

        selectable: true,
        editable: true,
        events: "/BackUp/AddEventsServlet",

        //to be edited
        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>' );
                        });
                    }
                },

                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>

</html>

DBAO.java: My java class page that saves the data
package database;

import model.AddEvents;
import java.sql.Connection;
import java.sql.Date;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;


public class DBAO {
    Connection con;
    //Database Conifguration
    public static String url ="jdbc:mysql://localhost/backup?autoReconnect=true&useSSL=false";
    public static String dbdriver="com.mysql.jdbc.Driver";
    public static String username= "root";
    public static String password= "mysql";


    public DBAO() throws Exception{
        try{
            //Class.forName("com.mysql.jdbc.Driver").newInstance();
            //Connection conn = DriverManager.getConnection(url,"username","password");
            Class.forName(dbdriver);
            con=DriverManager.getConnection(url,username,password);
            con.setAutoCommit(true);

        }catch(Exception ex){
            System.out.println("Exception in DBAO" + ex);
            throw new Exception("Couldn't open connection to database:" +

                    ex.getMessage());
        }
    }

    public ArrayList<AddEvents>getAddEvents() throws Exception
    {
        AddEvents myEvent=null;
        ArrayList<AddEvents> myEventList = new ArrayList<AddEvents>();;


        try
        {


            String selectStatement ="select * from backup.add_event";
            PreparedStatement prepStmt = con.prepareStatement(selectStatement);


//          prepStmt.setString(1,title);
//          prepStmt.setString(2,eventDesc);
//          prepStmt.setString(3,StartTime);
//          prepStmt.setString(4,EndTime);
//          prepStmt.setString(5,Budget);

            System.out.println(prepStmt);
            //prepStmt.setString(6,Transportation);
            //prepStmt.setString(7,Environment);

            ResultSet rs = prepStmt.executeQuery();

                while(rs.next())
                {

                    System.out.println("Record Found!");

                    myEvent= new AddEvents();

                    myEvent.setTitle(rs.getString("title"));
                    myEvent.setEventDesc(rs.getString("eventDesc"));
                    myEvent.setStartTime(rs.getString("StartTime"));
                    myEvent.setEndTime(rs.getString("EndTime"));
                    myEvent.setBudget(rs.getString("Budget"));
                    myEventList.add(myEvent);
                    //myEvent.setTransportation(rs.getString("Transportation"));
                    //myEvent.setEnvironment(rs.getString("Environment"));
                }
        }catch(Exception ex)
        {
            System.out.println("Error:" +ex.getMessage());
            throw new Exception("Error:" +ex.getMessage());
        }
        System.out.println("AddEventsList SIZE=" +myEventList.size());
        return myEventList;
    }


    public model.AddEvents AddEvents(AddEvents event, String title, String eventDesc, String StartTime, String EndTime,String Budget) throws Exception {
        // TODO Auto-generated method stub
        try{
            String insertStatement ="Insert into backup.add_event (title,eventDesc,StartTime, EndTime,Budget)";
            insertStatement=insertStatement+ "values(?,?,?,?,?)";
            PreparedStatement prepStmt1 = con.prepareStatement(insertStatement);
            //System.out.println(insertStatement);


            prepStmt1.setString(1,event.getTitle());
            prepStmt1.setString(2,event.getEventDesc());
            prepStmt1.setString(3,event.getStartTime());
            prepStmt1.setString(4,event.getEndTime());
            prepStmt1.setString(5,event.getBudget());
            //prepStmt1.setString(6,event.getTransportation());
            //prepStmt1.setString(7,event.getEnvironment());


            int status=prepStmt1.executeUpdate();

            if(status!=0){
            System.out.println("Record Added");
        }

    }catch(Exception ex)
    {
        throw new Exception("Error:" +ex.getMessage());
    }
        return event;
}
}


AddEvent.jsp: Each + clicked will go to this page
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" %>
<%@ page import ="model.AddEvents,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>
<h1 align="center">Add Event</h1>
<script>
function myFunction() {
    document.getElementById("myTime").value = "22:53:05";
}

function mySubmitFunction() {
    alert("You added an Event");
}


</script>

</head>
<body>
    <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>
    </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>
<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>

    <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>

Retrieve.jsp: From AddEvent.jsp, if you click "Add", it will do to this page
<%@ 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>
</head>
<body>
<%
ArrayList<AddEvents> myEventList =(ArrayList<AddEvents>) request.getAttribute("EventList");
if(myEventList.size()==0)
{
    %>
    <h2>No events retrieved</h2>
    <%
}
else
{
    %>

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

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

<tr><td>Title:</td><td><%= myEvent.getTitle() %></td></tr>
<tr><td>Details:</td><td><%= myEvent.getEventDesc() %></td></tr>
<tr><td>StartTime:</td><td><%=myEvent.getStartTime() %></td></tr>
<tr><td>EndTime:</td><td><%= myEvent.getEndTime() %></td></tr>
<tr><td>Budget:</td><td>$<%=myEvent.getBudget() %></td></tr>
<%}

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

AddEventsServlet:
package servlet;

import java.io.IOException;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.ListIterator;

import javax.servlet.RequestDispatcher;
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 AddEventsServlet
 */
@WebServlet("/AddEventsServlet")
public class AddEventsServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public AddEventsServlet() {
        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());
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //doGet(request, response);

        AddEvents myEvent = new AddEvents();
        //create an object based on the Java class customers


        //Assignment of data
        myEvent.setTitle(request.getParameter("Title"));
        myEvent.setEventDesc(request.getParameter("EventDesc"));
        myEvent.setStartTime(request.getParameter("StartTime"));
        myEvent.setEndTime(request.getParameter("EndTime"));
        myEvent.setBudget(request.getParameter("Budget"));


        String title = request.getParameter("Title");
        String eventDesc= request.getParameter("EventDesc");
        //This will convert string to date format

        String StartTime=request.getParameter("StartTime");
        String EndTime =request.getParameter("EndTime");

        String Budget=request.getParameter("Budget");


        System.out.println(myEvent.getTitle());
        System.out.println(myEvent.getEventDesc());
        System.out.println(myEvent.getStartTime());
        System.out.println(myEvent.getEndTime());
        System.out.println(myEvent.getBudget());
        request.setAttribute("Title",title);
        request.setAttribute("Details",eventDesc);
        request.setAttribute("Start Time",StartTime);
        request.setAttribute("End Time",EndTime);
        request.setAttribute("Budget",Budget);

        try
        {
            DBAO myDatabase = new DBAO();
            ArrayList <AddEvents> myEventList = myDatabase.getAddEvents();
            //AddEvents myEventDetails =myDatabase.isEvent(myEvent,title, eventDesc, StartTime, EndTime, Budget);

            HttpSession myRequest = request.getSession(true);
            request.setAttribute("EventList",myEventList);
            System.out.println(myEventList.size());
            //myDatabase.AddEvents(myEvent,title,eventDesc,StartTime,EndTime,Budget);
            request.getRequestDispatcher("Retrieve.jsp").forward(request, response);


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

    }

}