Pointers needed to create a JSP for week/hour calendar type component

Question

Hi,
I am looking to get some pointers on how to create week/hour calendar type component in JSP.
My application is JSP/struts2 based web application. I need to create a web page where users will see a week hour calendar and for any time slot will enter some information. Each time slot can have different information. For example: Sunday 9:30am to 10:00am - Click on this cell and pop up a dialog for info and save it without refreshing the page. At the end combine all this info for each slot and submit to the server.
If there is already a component like this is available to use, please point me to that.
Any ideas are welcome.
Thanks,
Developer in need.

Answer 1

I dont know of an already existing application that can do this. However, here are some ideas on creating your own:
Create an html table in JSP who's number of rows and columns match what you would find in an ordinary wall calendar for the given month and year. Use the Calander.java class to obtain the number of days in the current month and build the JSP page accordingly (Calendar.java should automatically take care of leap year). You will probably need to add 'next' and 'previous' buttons to the form to retrieve the previous and next month(s) in case the user wants to access previous or future months. Each cell in the table displays that day (example ' 28 '). Notice my convention the first column is usually 'Sunday'.
Next, determine what to put in each cell. One suggestion is to embed a table in each cell with 48 rows (24 hours in a day, 1/2 hour resolution= =48), and two columns (first column is for time: example: "10:30am to 11:00am", the second column is for the user's appointment message).
Above that embedded table is the day (example: '28'). If a user has no information in the embedded table, the outer cell will appear to have nothing but the '28' in it.
Next, how to populate the cell. When the user clicks on the cell, have an onclick event call a javascript function. The function will pop up a new window (a child window) by calling 'window.open( )' (google 'window.open'). In the pop up, show a table with 48 rows, 2 columns that the user can type in a message within column 2. When the user clicks 'submit' button on the pop up, call a javascript onclick function that reads all the message cells. Any cell not empty will populate the corresponding cell (day, rowID, columnID) back on the parent window by calling something like this: window.opener.document.myFormName.myTextField.value = someValue
(google 'window.opener'). Once this is done, close the child window from that javascript function. By calling 'window.opener', you dont have to refresh the parent window.
Next, if the user clicks on the parent window cell that is already populated, you will have to pass all theexisting information for that day through the window.open( ) to the child window so the pop up child window will show that preexisting information (that way he can add to the cell or alter it as he pleases).
Next, after he alters many days on the calender, you have to provide an 'update' button on the parent form so the user saves his changes (write the data to a database record, with his name attached to that record). Note: if he clicks the previous/next button, he will lose any changes unless you also save the information before going to the previous/next page.
Next, you might want to provide a vertical scroll bar on the table cell if
the end user has many messages that cant be viewed in the parent cell all at once. Note each cell should be a fixed number of pixels width/height so it shows correctly. Have Fun!