Calendar In JSP Using JavaScript

In this section, we develop a Calendar application in JSP using JavaScript.

Calendar In JSP Using JavaScript

Calendar In JSP Using JavaScript

     

In this section, we develop a Calendar application in JSP using JavaScript. We created the following files for the application:

1. emp_event.jsp
2. viewevent.jsp
3. eventdisp.jsp
and
4. emp_event.java

Brief description of the flow of the application:

  • User opens emp_event.jsp in the browser and clicks on "Save" button.
  • Import datepicker.js to include a date picker in emp_event.jsp.
  • Servlet emp_event.java inserts the data into the database and redirects to viewevent.jsp.
  • Add the Event Description on the particular date and having a link "Click here To Show Event"..
  • Open a viewevent.jsp in the browser  and select Employee Id, date and click on "Show" button.
  • New Pop window eventdisp.jsp opens which displays the description of event on corresponding date.

Step 1: Create a web page(emp_event.jsp) to save the event description.

<%@ page import="java.sql.*" %> 
<html>
<head>
<style>
A:hover {text-decoration: none;
   
    border: 0px;
   font-size:14pt;
    color: #2d2b2b; }
</style>

<link rel="stylesheet" type="text/css" href="datepicker.css"/>
<script type="text/javascript" src="datepicker.js"></script>
<script>
function validate()
{
	 var  sdate = document.frm.date.value;
	 var sdateAr=sdate.split("-");
	if(document.frm.date.value=="")
	{
		
		alert("Please enter the date.");
		document.frm.date.focus();
		return false;
	}
	if(sdateAr.length!=3)
	{
		alert("Please enter valid Date in 
                mm-dd-yyyy format.");
		document.frm.date.value="";
		document.frm.date.focus();
		return false;
	}
	if(document.frm.event_description.value=="")
	{
		alert("Please enter the event description.");
		document.frm.event_description.focus();
		return false;
	}
	return true;
	
}
</script>
</head>
<body>

<br><br><br>

<form method="post" name="frm" action="empevent" onsubmit=
"return validate();"><table border="0" width="400px" align="center" bgcolor="#CDFFFF">
<tr><td colspan=2 style="font-size:10pt;color:#ff0000;" 
align="center"></td></tr><tr><td colspan=2 style="font-size:12pt;color:#00000;" align="center">
<h3>Employee Event</h3></td></tr>
<tr><td>&nbsp;</td></tr>

<tr><td ><b>Date:</b></td><td><input  type="text" name="date" 
id="cdate"><input type=button value="Select Date" onclick=
"displayDatePicker('date', this);"></td></tr>
<tr><td><b>Description:</b></td><td>
<textarea name="event_description" rows="5" cols="25">
</textarea></td></tr><tr><td>&nbsp;</td></tr>
<tr><td colspan=2 align="center"><input  
type="submit" name="submit" value="Save"></td></tr>
</table>
</form>
    
<table border="0" width="100%" align="center">


<br>
<br>
 <tr>
    <td width="100%" align="center">
<a href="viewevent.jsp" style="font-size:14pt;color:blue;" 
>Click here to Show Event</a></td>
	
 </tr>

</table>
</body>
</html>

Step:2Create a Servlet "emp_event.java" and insert data into database.

import java.io.*;
      import javax.servlet.*;
      import javax.servlet.http.*;
      import javax.sql.*;
      import java.sql.*;
     public class emp_event extends HttpServlet{ 
   public void doPost(HttpServletRequest request, HttpServletResponse response)
                                   throws ServletException,IOException{
			response.setContentType("text/html");
			PrintWriter out = response.getWriter();
			System.out.println("MySQL Connect Example.");
			Connection conn = null;
			String url = "jdbc:mysql://localhost:3306/";
			String dbName = "user_register";
			String driver = "com.mysql.jdbc.Driver";
			String userName = "root"; 
			String password = "root";
			Statement st;
			try {
				Class.forName(driver).newInstance();
				conn = DriverManager.getConnection(url+dbName,userName,password);
				System.out.println("Connected to the database");
				String  date  = request.getParameter("date");
				String  event_description  = request.getParameter("event_description");
				String strar[] = date.split("-");
				String cdate = strar[2]+"-" + strar[0]+"-"+ strar[1];
				String query = "insert into emp_event set date_of_event='"+cdate+"',event_description='"+event_description+"'";
				System.out.println("query " + query);
				out.println("query " + query);
				st = conn.createStatement();
				int  i = st.executeUpdate(query);
				if(i>0)
				{
					response.sendRedirect("viewevent.jsp");
				}
				else
				{
					response.sendRedirect("emp_event.jsp");
				}
				out.println(query);
				conn.close();
				System.out.println("Disconnected from database");
			} catch (Exception e) {
			e.printStackTrace();
			}
  }
      }
     
  

Step 3:Create a web page (viewevent.jsp) to  select the date and employee id. 

<%@ page import="java.sql.*" %> 
    <html>
    <head>
    <style>
    A:hover {text-decoration: none;
    border: 0px;
   font-size:14pt;
    color: #2d2b2b; }
    </style>
    <link rel="stylesheet" type="text/css" href="datepicker.css"/>
    <script type="text/javascript" src="datepicker.js"></script>
    <script>
    function validate()
    {
	if(document.getElementById("emp_id").value==-1)
	{
		alert("Please select employee id");
		return false;
	}
	if(document.getElementById("date").value=="")
	{
		alert("Please enter date");
		return false;
	}
 return true
    }
    function mywin()
    {
	if(validate()) {
	var date = document.getElementById("date").value;
	var emp_id = document.getElementById("emp_id").value;
	var  page = "eventdisp.jsp?date="+date + "&emp_id="+emp_id;
	window.open(page,'mywindow','width=500,height=350,toolbar=no,resizable=yes,menubar=yes');
	}
    }
    </script>
    </head>
    <body>
    <br><br><br>
    <form method="post" name="frm" action="empevent">
    <table border="0" width="400px" align="center" bgcolor="#CDFFFF">
    <tr><td colspan=2 style="font-size:12pt;color:#00000;" align="center"><h3>Select Event</h3></td></tr>
    <tr><td colspan=2>&nbsp;</td></tr>
    <tr><td ><b>Employee Id</b></td><td>
    <select name="emp_id" id="emp_id">
    <option value=-1>Select</option>
    <%
    Connection conn = null;
    String url = "jdbc:mysql://localhost:3306/";
    String dbName = "user_register";
    String driver = "com.mysql.jdbc.Driver";
    String userName = "root"; 
    String password = "root";
    int sumcount=0; 
	Statement st;
    try {
      Class.forName(driver).newInstance();
      conn = DriverManager.getConnection(url+dbName,userName,password);
	    String query = "select * from emp_event order by emp_id";
	 out.println("query "+query);
       st = conn.createStatement();
	   ResultSet  rs = st.executeQuery(query);
	   out.println("dkfhdsf");
	  while(rs.next()){
		  %>
		<option value=<%=rs.getInt(1)%>><%=rs.getInt(1)%></option>
		  <%
		}
	}
	catch (Exception e) {
      e.printStackTrace();
    }
    %>
    </select>
    </td></tr>
    <tr><td ><b>Date:</b></td><td><input  type="text" name="date" id="date">
    <input type=button value="Select Date" onclick="displayDatePicker('date', this);">
    </td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td colspan=2 align="center"><input  type="button" name="show" value="Show" onclick="mywin();"></td></tr>
    </table>
    </form>
    </body>
    </html>

Step 4:Create a web page eventdisp.jsp  to show the Event Description.

<%@ page import="java.sql.*" %> 
      <br><br>
      <span style='padding-left:150px;'><b>Event Description</b></span>
      <%
      int emp_id = Integer.parseInt(request.getParameter("emp_id").toString());
      String date = request.getParameter("date").toString();
	String strar[] = date.split("-");
				String edate = strar[2]+"-" + strar[0]+"-"+ strar[1];
      Connection conn = null;
    String url = "jdbc:mysql://localhost:3306/";
    String dbName = "user_register";
    String driver = "com.mysql.jdbc.Driver";
    String userName = "root"; 
    String password = "root";
    int sumcount=0; 
	Statement st;
    try {
      Class.forName(driver).newInstance();
      conn = DriverManager.getConnection(url+dbName,userName,password);
	    String query = "select * from emp_event where emp_id="+emp_id+" and date_of_event='"+edate+"'";
       st = conn.createStatement();
	   ResultSet  rs = st.executeQuery(query);
	  if(rs.next()){
		  %>
      <p style="color:#000000;border:1px solid #000000;background-color:#CDFFFF;"><%=rs.getString(3)%></p>
		  <%
		}
      else{
	%>
             <p style="color:#000000;border:1px solid #000000;background-color:#CDFFFF;text-align:center">No Description</p>
      <%
		 }
	}
	catch (Exception e) {
      e.printStackTrace();
    }
      %>
 <span style='padding-left:150px;'><a href="javascript:window.close()">Window Close</a> </span>
   

Successful Output of the program:

Click on Save To add Event Description:



Click on Show To Select Event Description:


Display the Event Description: 



Download the full web application from here.

Download the application