Home Jsp Calendar In JSP Using JavaScript

Related Tutorials


 
 

Share on Google+Share on Google+

Calendar In JSP Using JavaScript

Advertisement
In this section, we develop a Calendar application 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

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: July 29, 2008

Related Tutorials

Discuss: Calendar In JSP Using JavaScript   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:2
Tarun Allawadhi
August 25, 2011
build calender in jsp

script is very good but plz tell what is datepicker.js how we make this class as u use datepicker.css that is clear in my mind we make classes in it like .a{border:2px;} then save as datepicker.css and import in style tag rel="stylesheet...... like this but how we make datepicker.js and what is it fuctnality
rose
September 21, 2011
jsp

where is the datepicker.js?
DMCA.com