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
- Included jQuery files
- Set up html
- Load FullCalendar plugin
- Handle click event on the calendar
- Show new event dialog
- Make new event in server side
- Get event information
- Change start date or time by dragging
- Change period of the event by dragging
- Install script
- Testing automation
In order to access this example, please access the url below or "jQuery Calendar UI" link from the top page.
Then the page below will appear.
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.
In this view, you can see the time of the day.
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.
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.
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.
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.
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.
After adding information about the event, click the "New event" button. Then a new time event added like picture below.
By clicking the event, you can see the detail, edit, or cancel the event, like allday event.
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
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.
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".
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.
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
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.
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.
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.
After it insert the event record, the "/samples/calendar/getevents.alns" returns JSon string including events information. The source code is below.
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.
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.
This example uses database table, so you have to setup it, if you manually do. The install script is at "/install/calendar.alns".
The source code is below.
This example is testable code, there is more example to do testing automation. Please take a look at Testing Fullcalendar example.