Simple Calendar

1. For this example we will use the following database table to create a Calendar application.

They must contain these fields.

CREATE TABLE `events` (
`title` varchar (64) DEFAULT NULL,
` description` varchar (128) DEFAULT NULL,
`start_date` date DEFAULT NULL,
` start_time` time DEFAULT NULL ,
`end_date` date DEFAULT NULL,
` end_time` time DEFAULT NULL,
`recurrent` varchar (1) DEFAULT NULL,
` period` varchar (1) DEFAULT NULL,
`users` varchar (10) DEFAULT NULL,
PRIMARY KEY (` id `)

2. Select the fields from the table to be used in the application in the “Calendar fields” option

The fields with ‘*’ are mandatory. The other fields are used only for calendar information.


  • Id: Used to identify the record, it is the primary key field in this table. (Int (11))
  • Title: It is used to store the subject of each activity that will be displayed in the application. ((Varchar (50))
  • Start date: The start date of the activity that will be registered. * (Date or datetime)
  • Start Time: It will register the start time of the activity .. * (Date or datetime)
  • End date: It will register the end date of the activity. * (Date or datetime)
  • End Time: The end time of the activity will be registered. * (Date or datetime)
  • Recurrence: It is used to indicate if the event will be repeated in a month, week or day (Int) (1)
  • Period: Used to indicate the period of the recurrence: monthly, weekly or daily. (varchar) (1)

Note: If you have a datetime field in the database, you can use that same datetime field to fill the both fields: date field and time field. The application will concatenate the fields before saving them in the database.

3. After building your new calendar app, you will see four types of displays: Month, Week, Day, and Schedule:

  • Month
  • Week



4. To add a new record, just click on the area corresponding to the date and time of the event you want. A simple form will be opened through a modal window.

To see more examples created with Scriptcase, go to: Examples: Complete systems and applications with Scriptcase

Tutorials in the same category

Tutorial: Grid fixed columns

In this sample we’ll see the option fixed column on the grid. This way we’ll be able to do a hor...

Tutorial: New Refined Search

In this sample we’ll develop one grid using the option refined search, that will allow us to searc...

Tutorial: Grid Mobile

In this sample, we’ll see the configuration of one grid application for mobile. Creating a ...

Fixed Columns in the Summary

In this example, we will see the option to fix columns in the Summary module of the Grid applicatio...

Comment this post