Cómo: Personalizar días aislados en un control Calendar de servidor Web

Artículo
10/22/2014

Actualización: noviembre 2007

De forma predeterminada, los días de un control Calendar se muestran como números. Si la selección de día está habilitada, los números aparecerán como vínculos. Para obtener información detallada, vea Cómo: Controlar la selección de fecha del usuario en un control Calendar de servidor Web.

Puede personalizarse el aspecto y el contenido de días individuales, lo que permite:

Resaltar ciertos días mediante programación, por ejemplo, los días festivos con un color diferente.
Especificar mediante programación si es posible seleccionar un solo día.
Agregar información a la presentación del día, por ejemplo, información relativa a citas o acontecimientos.
Personalice el texto del vínculo en el que los usuarios pueden hacer clic para seleccionar un día.

Cuando el control Calendar está creando el resultado que va a enviar al explorador, desencadena un evento DayRender. Al preparar los días que se van a mostrar, el control desencadena un evento para cada día, de modo que puede examinar mediante programación el día que se está representando y personalizarlo de la manera adecuada.

El método del evento DayRender admite dos argumentos: una referencia al control que desencadena el evento (el control Calendar) y un objeto de tipo DayRenderEventArgs. El objeto DayRenderEventArgs proporciona acceso a dos objetos adicionales:

Cell, un objeto TableCell, que puede utilizarse para definir la apariencia de un día individual.
Day, que puede utilizarse para consultar información acerca del día que se está representando, para controlar si es posible seleccionar el día y para agregar contenido a un día. El objeto Day admite varias propiedades que se pueden utilizar para saber más acerca del día (por ejemplo, IsSelected, IsToday, etc.). También admite una colección Controls que se puede manipular para agregar contenido al día.

Para personalizar la apariencia de un día individual

Cree un método que controle el evento DayRender del control Calendar.

En el método, establezca las propiedades del objeto Cell, al que puede tener acceso con el argumento DayRenderEventArgs.

En el ejemplo siguiente se muestra cómo se cambia el aspecto de determinados días. El método hace que los días de vacaciones del calendario se representen en amarillo, mientras que los días del fin de semana se representan en verde. En el ejemplo, los días de vacaciones son el período comprendido entre el 23 de noviembre y el 30 de noviembre de 2005.

Protected Sub Calendar1_DayRender(ByVal sender As Object, _
        ByVal e As DayRenderEventArgs) Handles Calendar1.DayRender
    ' Display vacation dates in yellow boxes with purple borders.
    Dim vacationStyle As New Style()
    With vacationStyle
        .BackColor = System.Drawing.Color.Yellow
        .BorderColor = System.Drawing.Color.Purple
        .BorderWidth = New Unit(3)
    End With

    ' Display weekend dates in green boxes.
    Dim weekendStyle As New Style()
    weekendStyle.BackColor = System.Drawing.Color.Green

    ' Vacation is from Nov 23, 2005 to Nov 30, 2005.
    If ((e.Day.Date >= New Date(2005, 11, 23)) _
            And (e.Day.Date <= New Date(2005, 11, 30))) Then
        e.Cell.ApplyStyle(vacationStyle)
    ElseIf (e.Day.IsWeekend) Then
        e.Cell.ApplyStyle(weekendStyle)
    End If
End Sub

protected void Calendar1_DayRender(object sender, 
    DayRenderEventArgs e)
{
    // Display vacation dates in yellow boxes with purple borders.
    Style vacationStyle = new Style();
    vacationStyle.BackColor = System.Drawing.Color.Yellow;
    vacationStyle.BorderColor = System.Drawing.Color.Purple;
    vacationStyle.BorderWidth = 3;

    // Display weekend dates in green boxes.
    Style weekendStyle = new Style();
    weekendStyle.BackColor = System.Drawing.Color.Green;

    if ((e.Day.Date >= new DateTime(2000,11,23)) &&
        (e.Day.Date <= new DateTime(2000,11,30)))
    {
        // Apply the vacation style to the vacation dates.
        e.Cell.ApplyStyle(vacationStyle);
    }
    else if (e.Day.IsWeekend)
    {
        // Apply the weekend style to the weekend dates.
        e.Cell.ApplyStyle(weekendStyle);
    }

Para especificar que es posible seleccionar un día individual

En un método del evento DayRender del control Calendar, determine qué día se está representando; para ello, obtenga la información de la propiedad Date del objeto Day.

Establezca la propiedad IsSelectable de ese día en true.

En el ejemplo siguiente se muestra cómo se especifica que la fecha 1 de octubre de 2005 se pude seleccionar; las fechas restantes se definen para que no se puedan seleccionar.

Protected Sub Calendar1_DayRender(ByVal sender As Object, _
        ByVal e As DayRenderEventArgs) Handles Calendar1.DayRender
    Dim myAppointment As Date = New Date(2005, 10, 1)
    If (e.Day.Date = myAppointment) Then
        e.Day.IsSelectable = True
    Else
        e.Day.IsSelectable = False
    End If
End Sub

protected void Calendar1_DayRender(object sender, 
    DayRenderEventArgs e)
{
    DateTime myAppointment = new DateTime(2005, 10, 1);
    if (e.Day.Date == myAppointment)
    {
        e.Day.IsSelectable = true;
    }
    else
    {
        e.Day.IsSelectable = false; 
    }
}

Para agregar contenido a un día individual

En un controlador del evento DayRender del control Calendar, agregue cualquier control Web HTML o ASP.NET a la colección Controls del objeto Day desde el argumento DayRenderEventArgs.

El ejemplo siguiente muestra días festivos: la lista de días festivos se crea como una matriz bidimensional durante la carga de la página. Las descripciones de los días festivos se cargan en los elementos correspondientes a su fecha. En el método del evento DayRender, se compara cada día con la matriz de días festivos. Si el elemento correspondiente de la matriz de días festivos contiene un valor, se crea un control Label con el texto del día festivo y se agrega a la colección Controls de ese día.

Dim holidays(13, 32) As String

Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
    holidays(1, 1) = "Birthday"
    holidays(2, 14) = "Anniversary"
End Sub

Protected Sub Calendar1_DayRender(ByVal sender As Object, _
        ByVal e As DayRenderEventArgs) Handles Calendar1.DayRender
    If e.Day.IsOtherMonth Then
        e.Cell.Controls.Clear()
    Else
        Dim aDate As Date = e.Day.Date
        Dim aHoliday As String = holidays(aDate.Month, aDate.Day)
        If (Not aHoliday Is Nothing) Then
            Dim aLabel As Label = New Label()
            aLabel.Text = "<br>" & aHoliday
            e.Cell.Controls.Add(aLabel)
        End If
    End If
End Sub

string[,] holidays = new String[13, 32];

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
    string aHoliday;
    DateTime theDate = e.Day.Date;
    aHoliday = holidays[theDate.Month, theDate.Day];
    if (aHoliday != null)
    {
        Label aLabel = new Label();
        aLabel.Text = " <br>" + aHoliday;
        e.Cell.Controls.Add(aLabel);
    }

}

protected void Page_Load(object sender, EventArgs e)
{
    holidays[1, 1] = "Birthday";
    holidays[2, 14] = "Anniversary";
}

Para personalizar el texto del vínculo de un día individual

En un método del evento DayRender del control Calendar, obtenga la propiedad SelectUrl del argumento DayRenderEventArgs. La propiedad SelectUrl devuelve el código JavaScript que normalmente se representa durante ese día para producir una devolución de datos que indica la selección de la fecha.
Utilizando la concatenación, cree un hipervínculo HTML que utilice el valor de la propiedad SelectUrl como atributo href.

Agregue el hipervínculo como propiedad Text del objeto Cell.

El ejemplo siguiente muestra días festivos: la lista de días festivos se crea como una matriz bidimensional durante la carga de la página. Las descripciones de los días festivos se cargan en los elementos correspondientes a su fecha. En el método del evento DayRender, se compara cada día con la matriz de días festivos. Si el elemento correspondiente de la matriz de días festivos contiene un valor, el código crea el texto del vínculo que muestra el nombre del día festivo en lugar del número del día.

Dim holidays(13, 32) As String

Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
    holidays(1, 1) = "Birthday"
    holidays(2, 14) = "Anniversary"
End Sub

Protected Sub Calendar1_DayRender(ByVal sender As Object, _
        ByVal e As DayRenderEventArgs) Handles Calendar1.DayRender
    If e.Day.IsOtherMonth Then
        e.Cell.Controls.Clear()
    Else
        Dim aDate As Date = e.Day.Date
        Dim aHoliday As String = holidays(aDate.Month, aDate.Day)
        If (Not aHoliday Is Nothing) Then
            e.Cell.Text = _
                "<a href=" & e.SelectUrl & ">" & aHoliday & "</a>"
        End If
    End If
End Sub

string[,] holidays = new String[13, 32];

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
    string aHoliday;
    DateTime theDate = e.Day.Date;
    aHoliday = holidays[theDate.Month, theDate.Day];
    if (aHoliday != null)
    {
        e.Cell.Text = "<a href=" + e.SelectUrl + ">" + 
           aHoliday + "</a>";
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    holidays[1, 1] = "Birthday";
    holidays[2, 14] = "Anniversary";
}

Vea también

Tareas

Cómo: Mostrar las fechas seleccionadas de una base de datos en el control Calendar

Conceptos

Información general sobre Calendar (Control de servidor Web)

Compartir a través de