Tutorial on how to use use jQuery Frontier Calendar with jsp servlets and AJAX

[Darrel Viegas]

Hello all,

It's been quite a long time that people were requesting for some demo or examples on how to use this plugin. I've created a demo using AJAX, jsp and servlets for the same.

Without wasting anytime let's begin with the demo now.

This demo is based on assuming that you are using some kind of IDE for example netbeans or eclipse, etc. 

Steps are as follows assuming you are using netbeans. Project creation steps may differ on eclipse:

1)  Open your IDE and go to File -> New Project. A dialog box opens.

2)  Choose the Java Web in the Categories section and in the projects section choose Web Application and click on Next button.

3)  Give you project a name and location. Click on the Next button.

4)  Choose your server. Click on the Next button.

5)  Choose the Struts x.x.x Framework in this screen by clicking on the checkbox next to it. (Here x.x.x will be some number). 

6)  After checkin the checkbox below some fields will become visible. Check the "Add Struts TLDs" checkbox and click on the Finish button.

Your sample/demo project is now ready......

Now let's jump into the main part:

The files that are now needed are listed below:

1)  A jsp which will display our frontier calendar.

2)  A servlet file to fetch the data from the database.

3)  A servlet file to store the data to the database whenever the user creates a new event.

4)  The necesaary css, js, and extra folder which is required for the calendar plugin. (You can just copy paste these folders in side your project where you are going to create the new jsp)

Let's begin......

Firstly let's create a table to store our events:

drop table calEvents;

create table calEvents(

evtID int,

evtCreatorID varchar(50),

evtStartDate datetime,

evtEndDate datetime,

evtDescription varchar(MAX),

evtBackgroundColor varchar(10),

evtForegroundColor varchar(10)

);

The details for the fields:

evtID will store the event id,

evtCreatorID will create the event creators name,

evtStartDate will store the start date time of the event,

evtEndDate will store the end date time of the event,

evtDescription will store the description of the event,

evtBackgroundColor will store the background color of the event label,

evtForegroundColor will store the foreground color of the event label

Let's insert some dummy values in the table:

INSERT INTO calEvents (evtID,evtCreatorID,evtStartDate,evtEndDate,evtDescription,evtBackgroundColor,evtForegroundColor)

VALUES ('1','Darrel_Viegas','2015-10-17 12:00:00','2015-10-17 16:00:00','Hi this is a test event created by Me','#000000','#ffffff');

INSERT INTO calEvents (evtID,evtCreatorID,evtStartDate,evtEndDate,evtDescription,evtBackgroundColor,evtForegroundColor)

VALUES ('2','Darrel_Viegas','2015-10-18 12:00:00','2015-10-18 16:00:00','Nothing fancy in this event. Only background and foreground colors have been changed.','#ffffff','#000000');

INSERT INTO calEvents (evtID,evtCreatorID,evtStartDate,evtEndDate,evtDescription,evtBackgroundColor,evtForegroundColor)

VALUES ('3','Darrel_Viegas','2015-10-19 12:00:00','2015-10-19 16:00:00','Go for the meeting!!!!!!!!','#000000','#ffffff');

We are done with our db work. 

Let's begin with the java code now:

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>Steps for creating the servlet file for fetching the data from the database (getCal_Data_Servlet.java):

1)  Right Click on your project in the IDE and Choose New -> Servlet. In case you can't see it, click on the "Other..." and search for servlet.

2)  Give a name to your servlet and package. In my case i gave the package name as com.jQueryCalTest. Your free to give any name. :)

3)  Click on the Next button and check the checkbox Saying "Add information to deployment descriptor (web.xml)".

4)   Change the URL patter if you want. In my case i changed it to "get_Cal_Data". You can change it but ensure to do thje same changes in the AJAX call in the jsp as well.

5)  Click on the Finish button.

6)  Next refer to my code or create your own code to fetch the values from the database.

Please note that this is a servlet file and for it's working there has to be an entry in the web.xml file.

Please note i've added a boolean variable called enableDatabase which is set to true by default. I've added this to enable fteching of the values from the database. 

If you set it as false you will have to hard code the response string. I've built the logic in processRequest() method which gets called by both doGet() and doPost() methods.

In the true block:

What I'm basically doing in the file is reading the parameter passed from the AJAX function, i.e, the username and getting the events that, that particular user has created.

I'm creating a response string by iterating through the result set and send the response back to calendar jsp. I'm creating parameters with the key and value separated by colon symbol (":") and another key value pair with a semicolon symbol (";") and so on. And finally separating one entire event from the other using the pipe symbol ("|").

Please note to handle this characters in your code at the user can add these symbols while creating the event which may lead to unexpected behaviour. 

You can avoid the same by restricting the user from entering these characters. ;)

The are some of the connection related string that you will have to modify based on your requirements and drivers. These four lines are common for the other servlet as well.

private final String DB_DRIVER = "oracle.jdbc.driver.OracleDriver"; //for your database driver

private final String DB_CONNECTION = "jdbc:oracle:thin:@localhost:1521:CALTEST"; //for your db connection details. host:port:databaseName

private final String DB_USER = "user"; //database username

private final String DB_PASSWORD = "password"; //database password

In the false block:

What i'm basically doing is creating sample events by hardcoding the same and sending them to as a response to the jsp. I've added this block for the people who don't have any access to a database at present, to view how the 

code will look like once the database logic has been developed. This block can be skipped and is not needed once the database logic has been built. The true block will on ly be required in the case. you are free to remove the boolean

variable and it's dependencies in the file. :)

This servlet will get called from the jsp whenever the user clicks on the "Load Events From DB" button. Also note that i've not added any logic to handle and see if the events are already added in the calendar. So clicking on this button everytime will just add the repeated events to the calendar. 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>Steps for creating the servlet file for storing the data from the database (storeCal_Data_Servlet.java):

follow the same steps as mentioned for the above servlet only ensure that the file name and mapping is different. :P

I've built the login in the same processRequest() method. What happens here is I read all the parameters that are passed from the jsp using the AJAX call and store them in the database.

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>Steps for creating the FrontierCalendarEx.jsp: 

I've modified the calendar.html that is bundled in the download.

Changes that I've done:

1)  I've done is removed the introduction and the documentation tabs. I've only left the Example tab. Right Click on your project choose New -> JSP. Give the name and other details

2)  I've added the following code next to the delete button in the jsp:

<button id="BtnLoadFromDB">Load Events From DB</button>

3)  On click of this button I've associated an AJAX call to the getCal_Data_Servlet.java file.

4)  For the time being i'm just passing the username as a parameter to the ajax request.  The call for the AJAX can be found at line no: 315.

5)  Please note to write the exact name in the url section of the AJAX call that you've mentioned in the web.xml against the <url-pattern> tag inside <servlet-mapping> tag in the web.xml file.

6)  On success, I'm iterating through the response by splitting the different events first by the pipe operator ("|") and then getting the event field details by splitting using the semicolon (";") and finally getting the key value pair by splitting using the colon (":") symbol and add the events one by one to the calendar.

7)  I've modified the $("#add-event-form").dialog function as well. The details can be found at the line no: 614.

8)  Please note that the url again has to be correctly mapped with web.xml.

9)  Pass the necessary parameters to store in the database.

10) Get the maximum event id + 1 and store in the database.



I've attached the netbeans project that i had created. ensure to take care of that boolean variable in the servlet that gets the event details.
I've also attached the source codes separately, in case you are not using netbeans IDE

Please note that this is just a demo, To help you guys out there.
I'll try to post a demo using ASP.NET and AJAX also in the coming weeks, so stay tuned......
Please feel free to ask any doubts regarding the same. I will answer your mails once i get time from my schedule..

God Bless!!!!!!! Take care!!!!!

Thanks & Regards,
Darrel Viegas.