FullCalendar jQuery plugin example

This is an example using FullCalendar jQuery plugin. You can use this application omponent as schedule manegement system.

Access and work the example

In order to access this example, please access the url below or "jQuery Calendar UI" link from the top page.

http://localhost:8080/samples/calendar/

Then the page below will appear.

FullCalendar default page

This example application has enough functions to use as personal schedule management system.

Show weekly schedule

You can change the period of the calendar view into a week, by selecting "week" at the right-top of the calendar widget.

weekly calendar

In this view, you can see the time of the day.

top of this page

Show daily time schedule

You can change the period of the calendar view into a day, by selecting "day" at the right-top of the calendar widget.

Daily time schedule

In this view, you can also see the time of the day. By clicking "today" button in the left-top of this widget, you can check today's schedule.

top of this page

Add all day event

In the month view, you can add the allday event. in order to add it, click the first day to add the event. Then the dialog to add event appears like picture below.

In this dialog, input information about the event, and click the "New event" button. Then new event is added like below.

Allday event added

In this view, by clicking the event, you can see the detail of the event, and edit or cancel the event with almost same dialog of making new event.

top of this page

Add time event

In the month or day view, you can see the time of the day, and you can add time event, which is not allday event, here. Click the time to start the event, the dialog like picture below appears.

Add time event into the calendar

After adding information about the event, click the "New event" button. Then a new time event added like picture below.

Time event added into calendar

By clicking the event, you can see the detail, edit, or cancel the event, like allday event.

top of this page

Support drag and drop

This FullCalendar supports drag and drop.

  • By dragging event, changing the start time
  • By dragging the end edge of the event, changing period of the event

Implementation

 This example has enough function for personal use. But the source code is compact.The source code is in the "ALINOUS_HOME/samples/calendar/" folder.

Source folder of fullCalender application

Included jQuery files

This example uses css and JavaScript files of jQuery, listed below.

The style sheet for jQuery is "/jquery/themes/cupertino/jquery-ui.css" if you want tochenge the theme, replace this into "/jquery/themes/[theme]/jquery-ui.css".

top of this page

Set up html

At first, write html code for the FullCalendar and hidden form to send server side command.

When the form is submitted with "cmd" parameter, the "index.alns" process server side operation corresponding to the command.

top of this page

Load FullCalendar plugin

At the headse section of the "index.html", the javascript to load the FullCalendar is there.

In this code, it get value from hidden form inpur about below and set them into the FullCalendar's properties.

  • Year, Month, and Date of the view
  • default view, which is Monthly, Weekly Agenda, or Dayly Agenda
  • Ajax url to get Json which describes the event

In addition to the properties, it declares the event handler functions about below.

  • loading - when loading the FullCalendar, it is called
  • dayClick - Add new event
  • eventClick - Edit the event, and show the detail of the event
  • eventDrop - The event is dragged, change the start time or date
  • eventResize - The end edge of the event is dragged, change the period

top of this page

Handle click event on the calendar

When the day or time of the calendar is clicked, the dialog to add event apears. This is implemented at "dayClick" event and the source code is below.

The "allDay" parameter of callback function(event handler) is 1 when you click in the Month View, or click "All day" event area of Week, Day View.

Finally, this function call "$.ajax()" function and load the dialog's html, and show the dialog.

top of this page

Show new event dialog

This is the html part of the "add event dialog".

by clicking the button whose id is "dlgcommit", the event handler of the button's click event.

This event handler get parameter values from the form of this dialog and check. After checking copy the values to the prent html's hidden form and set cmd as "newEvent" and submit the form.

In addition to that, this event handler get the status of the calendar view in parent html, and set the value.

top of this page

Make new event in server side

After the event handler posted the form in "index.html", the "index.alns" executes the operation. The source code is below.

The value of "$IN.cmd" is "newEvent", so it executes "newEvent()" function. In this function, just insert the data into the database.

top of this page

Get event information

After it insert the event record, the "/samples/calendar/getevents.alns" returns JSon string including events information. The source code is below.

This url is called via Ajax. This is set at the first JavaScript loadding the FullCalendar.

top of this page

Change start date or time by dragging

When you drag the event, the "eventDrop" event handler is fired. The source code is below.

This function calls "$.ajax()" and access the url, which is "/samples/calendar/syncdata.alns", to synchronize the record and calendar view with the cmd parameter value is "eventDrop". The source code is below.

This function lock the secord by using SELECT FOR UPDATE and update the event.

top of this page

Change period of the event by dragging

When you drag the end edge of the event, the "eventResize" event handler is fired. The source code is below.

This function also calls "$.ajax()" and access the url, which is "/samples/calendar/syncdata.alns", with the cmd parameter value is "eventResize". The source code is below.

top of this page

Install Script

This example uses database table, so you have to setup it, if you manually do. The install script is at "/install/calendar.alns".

install script of fullcalendar application

The source code is below.

Testing automation

This example is testable code, there is more example to do testing automation. Please take a look at Testing Fullcalendar example.



Go to Top