Calendario Responsivo

En este tutorial crearemos una aplicación de calendario responsivo

Calendario en Navegador


Calendario en Móvil

Creamos la tabla que usaremos para el calendario

1. La tabla que se utilizará para la implementación del calendario es “events“.

CREATE TABLE `events` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`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`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;

2. Creamos la aplicación con la tabla recientemente creada.

3. Configuramos los campos del Calendario como muestra la imágen.

Los elementos con “*” son obligatorios para crear la aplicación. Los otros campos solo se utilizan para información de la agenda.

  • Id.: Para identificar el registro, seleccione el campo de clave principal en esta tabla. (Int (11))
  • Título: se utiliza para almacenar el tema de cada actividad que se muestra en la aplicación. ((Varchar (50))
  • Fecha de inicio: se registrará la fecha de inicio de la actividad. * (Fecha o fecha y hora)  
  • Hora de inicio: registrará la hora de inicio de la actividad. * (Fecha o fecha y hora)
  • Fecha de finalización: se registrará la fecha de finalización de la actividad. * (Fecha o fecha y hora)
  • Hora de finalización: registrará la hora de finalización de la actividad. * (Fecha o fecha y hora)
  • Recurrencia: se utiliza para indicar si el evento se repite en un mes, semana o día. (Int) (1)  
  • Período: se utiliza para indicar el tipo de repetición: mes, semana o día. (Int) (1)

4. Guardamos los cambios y ejecutamos la aplicación.

Para ver más ejemplos creados con Scriptcase, vaya a: Ejemplos: Sistemas completos y aplicaciones con Scriptcase.

Tutorials in the same category

Fixed Columns in the Summary

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

Tutorial: Cloud File Management

Some of the data storage services are ready to securely read and store files and images from your S...

Tutorial: Guardar Vista de la Consulta

En este ejemplo, veremos las opciones disponibles para que el usuario final almacene, en sesión o ...

Shortcut Keys

In this tutorial, we will see how you can use or create shortcut keys in a Grid application. 1 -...

Comment this post