Tutorial 37: How to build a Calendar (Part I)

This tutorial is the first part of the series “How to build a Calendar” tutorials describing how to build a simple calendar which displays activities existing in a database table. It covers following topics;

  • how to add a calendar component into a panel
  • how to display activities on the calendar
  • how to use calendar’s attributes

Note that manipulation of calendar activities such as editing – rescheduling an existing activity or creating a new activity on the calendar are not the subject of this tutorial. These topics are covered in the second part of the series.

Formspider Calendar

Formspider calendar is a multifunctional activity scheduler component which allows the user to display and schedule any activity. Activities are presented as small boxes on the calendar. The attributes of a calendar activity are listed below:

Attribute Description
id unique identifier of the activity
startDate start date of the activity
endDate end date of the activity
title label displayed on the activity box
editable defines whether the activity can be rescheduled by moving – resizing the activity box
fontColor font color of the label displayed on the activity box
backgroundColor background color of the activity box

The calendar can only display activities provided by a Formspider datasource. Therefore a calendar must always be bound to a datasource in order to display activities. As a result, when an activity is rescheduled by moving or resizing activity boxes or when a new activity is added through calendar APIs, you should reflect these changes to the calendar‘s datasource to make them permanent.

The calendar can display activities in three different views (Day, Week and Month) which makes it able to schedule activities for days, weeks and months. You can use calendar’s defaultView attribute to set which view mode will be used when the calendar is displayed for the first time. To set the view mode at run time, the user can select one of three available modes located on the right side of the calendar.

Backward/Forward arrows on the left side of the calendar allow the user to move within calendar dates. Each time these arrows are pressed, for the ease of performance, Formspider queries the calendar‘s datasource and fetches only data belonging to the activities which will be displayed on the calendar. Today button enables you to turn to the current date. When the selected view mode is Day or Week hours scale is located on the left side of the calendar.

Formspider calendar provides an advanced drag-and-drop functionality which allows users to change date and time of an activity by easily moving or resizing activity boxes.

Formspider calendar component

Open Formspider IDE and click “New Application” under the “File” menu, the “New Application” dialog shows up. Enter “calendar” as the name of the application and “HR” as datasource schema name.  If you are using Formspider Online, you do not need to enter database schema name since your account is already configured to use your online database. Leave other fields empty and click “OK”. This creates the “calendar” application with a default mainframe (called “mainFrame”) and a default panel (called “mainPanel”).

Creating Model

Use the following scripts to create a database table holding activity data and insert sample data for the current month;

create table activities
   (activityid                     number not null,
    startdate                      date,
    enddate                        date,
    title                          varchar2(4000),
    editable                       varchar2(1),
    bgcolor                        varchar2(255),
    fontcolor                      varchar2(255))

alter table activities
add constraint activities_pk primary key (activityid)
insert into activities (
        select 1 as activityid, (trunc(sysdate, 'MM') + 5/96) as startdate, (trunc(sysdate, 'MM') + 10/96) as enddate, 'Title of activity 1' as title, 'N' as editable, 'Green' as bgColor, 'White' as fontColor from dual
        union all
        select 2, (trunc(sysdate, 'MM') + 3), (trunc(sysdate, 'MM') + 4), 'Title of activity 2', 'Y' , 'Blue', 'Yellow' from dual
        union all
        select 3, (trunc(sysdate, 'MM') +  139/24), ((trunc(sysdate, 'MM') +  139/24) + 298/96), 'Title of activity 3', 'Y', 'Red', 'Pink' from dual
        union all
        select 4, ((trunc(sysdate, 'MM') + 7) + 3/24), ((trunc(sysdate, 'MM') + 7) + 5/24), 'Title of activity 4', 'Y' , 'Yellow', 'Blue' from dual
        union all
        select 5, ((trunc(sysdate, 'MM') + 14) + 3/96), ((trunc(sysdate, 'MM') + 15) + 10/96), 'Title of activity 5', 'N' , null, null from dual
        union all
        select 6, ((trunc(sysdate, 'MM') + 22) + 50/96), ((trunc(sysdate, 'MM') + 22) + 60/96), 'Title of activity 6', 'Y' , 'Pink', 'Red' from dual
        union all
        select 7, ((trunc(sysdate, 'MM') + 50) + 8/96), ((trunc(sysdate, 'MM') + 50) + 57/96), 'Title of activity 7', 'Y' , null, null from dual

Create a new datasource definition holding activity data. To achieve this, expand the “Datasource Definitions” accordion, select the “Datasource Definitions” node and click the “+” button. Alternatively, you may right click the “Datasource Definitions” node and select “New” from the pop up menu. The “New Datasource Definition” dialog shows up. Select the “Query” radio button from the “Based On” section and enter “ACTIVITIES” as “Name” of the datasource definition.

Creating “ACTIVITIES” datasource definition

Select “Query” node in the navigation tree on the left. Enter the following SQL Statement:


Entering Query for “ACTIVITIES” datasource definition

Click “OK” to save and close the “New Datasource Definition” dialog. This creates the “ACTIVITIES” datasource definition and the “ACTIVITIES1″ datasource.

Creating UI

Expand the “Panels” node from the “Containers” tree and double click the “mainPanel” to open it in the editor. Add a calendar bound to the “ACTIVITIES1” datasource. Note that idColumn, startDateColumn, endDateColumn, titleColumn, editableColumn, fontColorColumn and backgroundColorColumn attributes are used to adjust the properties of the calendar activities. The firstDayOfWeek attribute specifies the day of the week to display in the first day column of the calendar. The “mainPanel” XML should look like the following;

      <cell hAlign="Full" vAlign="Full">
        <calendar name="calendar" firstDayOfWeek="Monday" defaultView="Month" dataSource="ACTIVITIES1" idColumn="ACTIVITYID" startDateColumn="STARTDATE" endDateColumn="ENDDATE" titleColumn="TITLE" editableColumn="EDITABLE" fontColorColumn="FONTCOLOR" backgroundColorColumn="BGCOLOR"/>

Expand the “Windows” node and then the “Mainframe” node from the “Containers”tree. Double click to the “mainFrame” node to open it on the editor and set the value of the maximizeOnStartUp attribute to “Y”:

<mainframe title="calendar" width="500" height="500" maximizeOnStartUp="Y">
    <cell docking="Center">
      <include panelName="mainPanel"/>

Press “Run on Web” button to run your application. Note that the calendar is displayed in month view and “Monday” is the first day of the week. Also, note that the activities are displayed on the calendar as expected.

The activities are displayed on the calendar