Calendar Application

1. The table that will be used for the implementation of the calendar is “events”.

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 that will be used in the application.

Items with “*” are required to create the application. The other fields are only used for calendar information.


  • Id: Used to identify the record, select the primary key field in this table. (Int (11))
  • Title: It is used to store the theme of each activity that is displayed in the application. ((Varchar (50))
  • Start date: The start date of the activity will be recorded. * (Date or datetime)
  • Start Time: Record the start time of the activity .. * (Date or datetime)
  • End date: Record the end time of the activity. * (Date or datetime)
  • End Time: The end time of the activity will be recorded. * (Date or datetime)
  • Recurrence: Used to indicate if the event is repeated in a month, week or day . (Int) (1)
  • Period: Used to indicate the type of repetition reptição: month, week or day. (Int) (1)

Note: If you have a datetime field in the database, you can list the options of date and time using the same datetime field in the database.The application will take both values ​​and concatenate them before saving them in the database

3. After compiling your new calendar application, you will see four types of visualization: month, week, day and agenda

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

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