I have a Java application that reads appointment data from a database and then shows them in a Java Swing UI. Now I want to publish this application online.
After a bit of research, I've found this convenient jQuery calendar and decided to use it. The main question is then how to use my existing Java code that reads appointments and expose them to this calendar. So, what I've done:
1. created a Java servlet that reads the database
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public class AgendaServlet extends HttpServlet { | |
| protected void doGet( | |
| HttpServletRequest request, HttpServletResponse response) | |
| throws ServletException, IOException { | |
| int monthInt, yearInt; | |
| String month = request.getParameter("month"); | |
| String year = request.getParameter("year"); | |
| List<Event> events = new ArrayList<Event>(); | |
| // skipped code .... | |
| JdbcDao dao = new JdbcDao(); | |
| ArrayList<Appointment> apps = dao.getAppointments2(monthInt, yearInt, patients); | |
| // convert "apps" to "events" | |
| String json = new Gson().toJson(events); | |
| // Write JSON string. | |
| response.setContentType("application/json"); | |
| response.setCharacterEncoding("UTF-8"); | |
| response.getWriter().write(json); | |
| } | |
| } |
2. created the jQuery fullcalendar that invokes this servlet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html> | |
| <head> | |
| <link rel='stylesheet' type='text/css' href='fullcalendar.css' /> | |
| <link rel='stylesheet' type='text/css' href='fullcalendar.print.css' media='print' /> | |
| <script type='text/javascript' src='jquery.js'></script> | |
| <script type='text/javascript' src='jquery-ui-1.8.23.custom.min.js'></script> | |
| <script type='text/javascript' src='fullcalendar.min.js'></script> | |
| <script type='text/javascript'> | |
| $(document).ready(function() { | |
| $.ajax({ | |
| url: 'agenda', | |
| dataType: "json", | |
| success: function(response) { | |
| $('#calendar').fullCalendar({ | |
| header: { | |
| left: 'prev,next today', | |
| center: 'title', | |
| right: 'month,agendaWeek,agendaDay' | |
| }, | |
| editable: true, | |
| axisFormat: 'H:mmtt', | |
| slotMinutes: 10, | |
| firstHour: 8, | |
| minTime: 8, | |
| maxTime: 22, | |
| // use "[response]" if only one event | |
| events: response | |
| }); | |
| } | |
| }); | |
| </script> | |
| <style type='text/css'> | |
| body { | |
| margin-top: 40px; | |
| text-align: center; | |
| font-size: 14px; | |
| font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; | |
| } | |
| #calendar { | |
| width: 900px; | |
| height: 200px; | |
| margin: 0 auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Agenda</h1> | |
| <div id='calendar'></div> | |
| </body> | |
| </html> |
Note here the "url: agenda", which basically means I'm calling the servlet deployed at
3. then I realized that I wanted to be able to react to month/week/day changes: whenever I click the previous and next buttons, I should pass the new time period to the servlet, retrieve the new appointments from the DB and show them in the same calendar; this is how I've achieved this:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('#calendar').fullCalendar({ | |
| header: { | |
| left: 'prev,next today', | |
| center: 'title', | |
| right: 'month,agendaWeek,agendaDay' | |
| }, | |
| editable: true, | |
| axisFormat: 'H:mmtt', | |
| slotMinutes: 10, | |
| firstHour: 8, | |
| minTime: 8, | |
| maxTime: 22, | |
| events: function(start, end, callback) { | |
| $.ajax({ | |
| cache: true, | |
| url: 'agenda', | |
| dataType: "json", | |
| data: { month: start.getMonth(), year: start.getYear() + 1900 }, | |
| success: function(response) { | |
| var myevents = []; | |
| $.each(response, function(i, task) { | |
| myevents.push({ | |
| start: task.start, | |
| end: task.end, | |
| allDay: false, | |
| title: task.title//, | |
| //color: task.event.color | |
| }); | |
| }); | |
| callback(myevents); | |
| }, | |
| error: function() { | |
| alert('There was an error while fetching events!'); | |
| } | |
| }); | |
| } | |
| }); |
