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