Como crear una Agenda Web con ASP.NET

Que tal!, he aquí yo de nuevo… Risa

Como ya vieron el titulo, la entrada de hoy tratará de como hacer una agenda simple con ASP.NET y Visual Studio 2010. Lo haremos como se ve en la pagina anterior, y lo haremos sin acceder a bases de datos, será de manera estática, ya que no quiero entrar en detalle de dar altas y bajas a una base de datos y cosas como esas, será la pura agenda y listo.

image

Esto es lo que haremos, y la verdad es muy pero muy simple, empezemos…

Primero vamos a crear un proyecto o sitio web vacio en Visual Studio  y agregamos una pagina aspx llamada default o como ustedes quieran. Agregamos visualmente un web control Calendar, masomenos como se muestra acontinuacion

Ignoren el label

Este WebControll tiene muchas propiedades, lo que vamos a hacer es modificarlas pero en tiempo de ejecución, pero esto se puede hacer desde el panel de propiedades buscando la misma propiedad que vamos a modificar por código, lo pongo por código porque me es mas fácil ponerlo así en este post Lengua fuera

Evento PageLoad

image

Lo que estamos haciendo aquí puede ser lógico, pero igual explicaré las “menos” entendibles:

  1. NextPrevFormat.- Es el texto que se muestra en los extremos del calendario para cambiar de mes (en nuestro caso sera mostrando el nombre corto del mes jul, sep,etc)
  2. TitleFormat.- El formato del titulo central del calendario, nosotros mostraremos el mes junto con el año (agosto 2012)
  3. DayStyle (y sus propiedades).- Los %Align son para como posicionar el contenido de cada celda ( osea el numero del mes) y los otros son el tamaño (alto y ancho)
  4. OtherMonthDayStyle.- Le cambiamos el color a los días que no son del mes que se esta mostrando

Despues de esto, si corremos nuestra pagina ya tendremos algo así:

image

Waa, pues ya esta terminado no?, casi! solo falta agregar las actividades que ya tengamos programadas en nuestra agenda, como les dije esto será estático porque no me quiero meter con bases de datos y hacer un post de 3 partes… si ustedes saben ASP.NET y ADO o EntityFramework no será problema para ustedes Risa

Vamos a crear un nuevo metodo que se llame GetSchedule

image

image

Alguna ves han usado HashMap o algún tipo de colección de este tipo?, bueno Hashtable o HashMap en Java es una colección que simplemente guarda un valor referenciado con una clave, ósea en nuestro caso la clave es la fecha y el valor es la cadena… simple

En este método es donde ustedes obtendrían los datos guardados en una base de datos y los guardarían en este Hashtable

Bueno ahora declaramos una variable privada global que sea de tipo Hashtable también

image

Y en el evento pageLoad mandamos a llamar la funcion GetSchedule y lo guardamos en nusetra variable global

image

Bien, ya tenemos todos nuestros datos cargados, ahora como los enlazamos al calendario?, ya verán porque usamos Hashtable.

Vamos a crear un evento en nuestro calendario, este evento será el Day_Render, en este evento nuestro calendario se estará renderizando día por día, así que aquí es donde veremos si el día que se esta renderizando existe una actividad y si la existe pues que se agregé el texto al calendario.

image

En el parámetro e (tipo DayRenderEventArgs) viene toda la información que necesitamos para empezar a agregar elementos a este control

Primero que nada verificamos con un IF si en nuestro Hashtable existen datos, si no es nulo es porque agregamos una actividad

e.Day.Date.ToshortDateString() nos devuelve una cadena de tipo dd/mm/yyyy , y si recuerdan con ese formato guardamos valores en nuestro hashTable, entonces asi es como obtenemos si hay actividades que agregar en el dia que se esta renderizando cada elemento, si ese es el caso, se crea un objeto “Literal” que sirve para agregar en este caso para crear codigo HTML y este será un simple salto de linea. Despues creamos un Label  y obtenemos la cadena del dia correspondiente del Hashtable, le damos formato y al final lo agregamos a la celda que se renderiza en ese momento (con e.Cell.Controls.Add( controlQueSeQuiereAgregar)

Y si corremos ya tendrémos una agenda Web hecha con ASP.NET

 

Saludos Risa

Anuncios

36 comentarios sobre “Como crear una Agenda Web con ASP.NET

  1. hola.entonces las actividades tienes k crearlas mediante codigo? o d k forma las puedes ingresar, digamos k es un sistema hecho para una persona sin estudios d programacion

    1. Que tal,

      las actividades las ingreso por código de una manera estática solo con fines didácticos, lo que tu tendrías que hacer es un sistema donde el usuario puede elegir una fecha y dar de alta una nueva actividad, tal vez a una base de datos, y tu en vez de que sea estático cargar las actividades exactamente como yo le hago, pero dinamicamente de una base de datos, si te interesa podría trabajar en un tutorial sobre eso.
      Saludos

  2. Cómo le hago para cargar las actividades dinamicamente?, ya tengo las actividades registradas en la base, pero ahora ya no sé que hacer. Espero tu ayuda amigo :), muchas gracias.

    1. Es muy sencillo, solo donde yo lo tengo estaticamente tu lo cargarías las actividades de la base de datos, esto lo harías en el método GetSchedule, el evento DayRender se encargaría de el resto.

      Saludos

      1. necesito agregar dos o mas actividades el mismo día, pero no puedo utilizar una sola cadena pues necesito que cada evento tenga un color diferente según su nivel de importancia… tendrás alguna idea

  3. compa tengo la solucion!!!! schedule[“03-06-2013”] = “Estudiar ASP.NET y Jugar fronton”;
    schedule[“10-06-2013”] = “Conseguir Assassin’s Creed Revelation”;
    schedule[“17-06-2013”] = “Examen de cerftificacion ASP.NET 3.5”; asi tienen q ir las activivdades si no la comparacion no resultara!!! saludos

  4. A mi me ha gustado mucho este ejemplo, y lo convertí directamente a VB, pero lo que yo quiero es que en lugar de un label sea un HyperLink. El texto está claro, pero necesitaría que se añadiera un ID como segundo campo dentro de la misma fecha, ¿hay alguna forma?

    1. Es muy sencillo, en el Hashtable, en lugar de guardar una cadena, guarda un objeto. Es decir, un objeto que tenga la propiedad ID (como entero tal vez) y otra propiedad que sea una cadena, para guardar el texto del evento. Los hashtables guardan un Object, así que puedes crear instancias de esa clase y guardarlas en el hashtable.

      Saludos!

      1. Yo finalmente solucione el tema de lo que se muestra con un string, pero puedes intentar, como dice Isaac Ojeda,, con un objeto.

        Aqui tienes el codigo completo en VB.NET

        Partial Class Events_Default
        Inherits System.Web.UI.Page

        ‘variable publica para toda la pagina
        Private _schuleData As Hashtable

        Function getSchedule() As Hashtable
            Dim schedule As New Hashtable
        
            'buscar en la base de datos todos los eventos e ir creando la matriz con las fechas
            'el texto debe de tener el formato:
            '[nombre del evento]#[ID evento]
        
            Dim strSQL As String = "Consulta de la base de datos"
        
            'buscar todos los eventos de la base de datos
            Using con As New SqlConnection(BaseDatos.CadenaConexion)
                Dim cmd As New SqlCommand(strSQL, con)
                Dim ds As SqlClient.SqlDataReader
        
                con.Open()
                ds = cmd.ExecuteReader()
                While ds.Read
                    Try
              schedule(FormatDateTime(ds.GetDateTime(1), DateFormat.ShortDate)) = ds.GetString(2) & "#" & ds.GetInt32(4)
                    Catch ex As Exception
                        ControlError(ex)
                    End Try
                End While
        
                ds = Nothing
                cmd = Nothing
                con.Close()
            End Using
        
            Return schedule
        End Function
        
        Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        
            calendario.SelectedDate = Today
        
            _schuleData = getSchedule()
         End Sub
        
        Protected Sub calendario_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles calendario.DayRender
        
            If (_schuleData(e.Day.Date.ToShortDateString)) <> Nothing Then
                e.Cell.CssClass = "calendar-active calendar-event"          'css con el formato para identificar que en esa celda hay algo
            End If
        End Sub
        

        End Class

  5. Buenas tardes, Me gustaría saber si puedo usar este ejemplo y código para ampliarlo y luego publicarlo en mi blog con sus derechos de autor y referencia a esta pagina de donde lo he tomado y me ha servido de mucho.
    Muchas Gracias.

  6. hola buenos dias, muy bueno tu tutorial y funciona a la perfección pero si quisiera agregar varias actividades en un mismo día como podría hacerlo ademas cada una de las actividades debe ser un link distinto.

  7. amigo ya intente lo que dijiste de la collection para que sean varios eventos en un solo dia pero no me funciona jajaja me hecharias la mano?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s