Ajax ToolKit Calendar - Control calendario para páginas ASP.NET.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Este control permite añadir e insertar calendarios en páginas y aplicaciones web en ASP.NET. El control forma parte de una librería de controles llamada Ajax Toolkit y completamente gratuita ( Software open source).

El calendario es muy sencillo y fácil de implementar. A continuación puedes ver más información.

Mas información sobre el programa.

Indice - Contenido.

  1. Cómo funciona el calendario y otras características.
  2. Propiedades para manipular el control.
  3. Cambiar la apariencia del calendario editando los estilos CSS.
  4. Instalar librería dentro de Visual studio.

 

1 - Cómo funciona el calendario y otras características.

Este calendario se puede conectar a cualquier control TextBox de ASP.NET. El usuario, puede hacer clic sobre el control TextBox para desplegar el calendario y seleccionar una fecha. También la posibilidad de establecer formato a la fecha.

El usuario puede interactuar con el calendario haciendo clic en el día para fijar y seleccionar la fecha, o en la opción "Hoy" para establecer la fecha actual.

Además, las flechas izquierda y derecha se pueden utilizar para avanzar o retroceder entre los diferentes meses. Al hacer clic en el título del calendario se puede cambiar la vista de días en el mes actual. Haciendo otro clic permite cambiar los años en la década actual. Esta acción permite navegar fácilmente entre las fechas del pasado o el futuro.

Vista previa del control TextBox y del calendario en la página web.

También es posible cambiar el look para el estilo visual. Aquí puedes ver una imagen con el mismo calendario pero en otros colores: Color de fondo, el de las flechas, botones etc ..

O también, si se quiere, es posible desplegar el calendario, con un botón asociado a un control textBox, en vez de desplegarlo cuando el usuario haga control en la caja de texto.

2 - Propiedades para manipular el control.

Las propiedades que contiene son las siguientes:

  • TargetControlID - Esta propiedad de tipo String, es un ID del control textBox que se utilizará junto al calendario para mostrar la fecha.
  • CssClass - Nombre de la clase CSS utilizada para el estilo visual o look del calendario.
  • Format - Propiedad de tipo string utilizada para dar formato a la fecha.
  • PopupButtonID - Es el ID o identificación de un control para mostrar el calendario popup cuando se hace clic sobre el mismo. Este valor no está establecido, y por defecto el calendario se mostrará cuando el control TextBox reciba el foco.
  • PopupPosition - Esta propiedad determina la posición en pantalla donde se desplegará. Las propiedad a utilizar son: BottomRight, TopLeft, TopRight, Left o Right del TextBox.
  • SelectedDate - Esta propiedad es la fecha inicial o por defecto.

3 - Cambiar la apariencia del calendario editando los estilos CSS.

Es muy simple modificar la apariencia del control calendario utilizando la propiedad CssClass.

El Calendario tiene un conjunto predefinido de clases CSS que se pueden reemplazar. Tiene un estilo por defecto. El archivo CSS que contiene los estilos se encuentra en la ruta AjaxControlToolkit \ Calendario \ Calendar.css" archivo.

Algunas de las clases CSS para cambiar la apariencia son las siguientes.

  • .ajax__calendar_container : Para el borde del rectángulo contenedor del calendario.
  • .ajax__calendar_header : Para las flechas anterior y siguiente.
  • .ajax__calendar_title : Para el título del calendario. Es el texto del día, mes y año.
  • .ajax__calendar_body : A container element that holds the days, months, and years panes.
  • .ajax__calendar_days : Un elemento contenedor que contiene el estilo de los días en un mes.
  • .ajax__calendar_dayname : Para el nombre corto del día de la semana
  • .ajax__calendar_day : El día el mes.
  • .ajax__calendar_months : Meses del año.
  • .ajax__calendar_today : La fecha actual.

4 - Instalación de Ajax ToolKit control.

Ajax Control Toolkit contiene un amplio conjunto de controles web ( incluido el calendario) que puedes utilizar para construir páginas web interactivas en el entorno de ASP.NET.

Para instalar la librería de controles en Visual Studio, puedes seguir los siguientes pasos:

Después de descargar el Ajax Control Toolkit, es necesario desbloquear y extraer los archivos.

El próximo paso es añadir la librería de controles a la barra de herramientas de Visual Studio.

  1. Iniciar el Visual Studio y crear una nueva página ASP.NET. Abrir la página por defecto Default.ASPX.
  2. Crear una nueva pestaña en la barra de herramientas. ( Clic derecho sobre la barra de herramientas y seleccionar la opción Add Tab). En el nombre de la nueva pestaña colocar Ajax ToolKit Control.
  3. Clic derecho en la nueva pestaña, seleccionar la opción Choose items, click en Browse, ubicar la carpeta donde extraimos los archivos, y buscar para seleccionar el fichero AjaxControlToolkit.dll.

 


Requerimientos de instalación y uso.

Ver detalles en la web del autor.


Videos tutoriales.

Indice de videos.

En este enlace puedes ver un video en la web del autor que te explica paso por paso como configurar e instalar el control en tu página web.

En el video podrás ver.

  • Cómo editar la página ASPX desde Visual studio para insertar y configurar el calendario.
  • Insertar un control de texto y asignarle un ID.
  • Insertar el calendario desde la lista de controles.
  • Realizar una vista previa de la página ASPX para ver el calendario en funcionamiento.
  • Crear un calendario con formato de fechas personalizadas.
  • Otros temas.

Duración del tutorial: 8 Minutos, 56 segundos.

( Ver el video )

Nota: Aquí también puedes ver un tutorial para crear un simple calendario popup en tu páginas asp.net.

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
http://www.asp.net
Licencia:
Gratis
Versión:
4.0
Idioma:
Inglés
Programa actualizado:


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: