Cambiar Idioma de CalendarExtender en ASP.NET

CalendarExtender es un control extensor de Ajax Toolkit asp.net. El cual puede conectarse a cualquier control de servidor web TEXTBOX agregándole una funcionalidad adicional en el lado del cliente mostrando una interfaz de calendario la cual puede permite personalizar el formato de fecha y el diseño mediante CSS.

CalendarExtender-en-ASPNET

Hasta acá todo muy bien, el problema está cuando queremos que el texto de las etiquetas mostradas aparezcan en un idioma diferente al inglés, en este caso el español; el control no nos brinda ningún atributo que nos permita personalizar el idioma, si no que toma el idioma por defecto el cual es inglés.

Podemos sin embargo cambiar el idioma de dicho control, modificando el idioma de nuestra aplicación ASP.NET, dándole también una ayuda a los motores de búsqueda indicando el idioma de nuestra aplicación.

Para efectuar lo anteriormente dicho, haremos dos pasos.

  1. Todo control CalendarExtender requiere de un control ToolkitScriptManager para funcionar y es aca donde podemos manipular los atributos de globalización para indicar que el idioma de nuestra aplicación será español o cualquier otro idioma que queramos.
<ajaxToolkit:ToolkitScriptManager 
    ID="ToolkitScriptManager1" 
    runat="server" 
    EnableScriptGlobalization="true" 
    EnableScriptLocalization="true">
</ajaxToolkit:ToolkitScriptManager>
 
<asp:TextBox ID="txtFecha" runat="server"></asp:TextBox>
 
<ajaxToolkit:CalendarExtender 
    ID="dtI" 
    runat="server" 
    CssClass="yui" 
    PopupButtonID="txtFecha" 
    Format="dd/MM/yyyy" 
    TargetControlID="txtFecha">
</ajaxToolkit:CalendarExtender>
 
<ajaxToolkit:MaskedEditExtender 
    id="mei" 
    runat="server" 
    enabled="True" 
    mask="99/99/9999" 
    masktype="Date" 
    targetcontrolid="txtFecha">
</ajaxToolkit:MaskedEditExtender>

Dejare abajo de toda la explicación un código CSS sencillo por si lo quieren aplicar.

Cabe mencionar que en este ejemplo el mismo control TEXTBOX al cual se aplica el CalendarExtender funciona de disparador para mostrar el formulario, pero si ustedes quieren mostrar con un botón o una imagen solo necesitan modificar la propiedad PopupButtonID e indicar el nombre del control de servidor button o imagebutton a utilizar.

  1. Modificar las propiedades de globalización en el archivo web config para establecer en idioma del sistema.

Abran el archivo web-config y busquen las etiquetas system.web ahí deberán buscar la etiqueta globalization (si esta no existe hay que agregarla), dicha etiqueta deberá quedar como sigue.

<system.web>
    <globalization fileEncoding="utf-8" requestEncoding="utf-8" responseEncoding="utf-8" culture="es-NI" uiCulture="es-NI"/>
</system.web>

El encondign UTF-8 es el que le indica a la aplicación web que el idioma por defecto es español mientras que el culture le dice ademas del idioma, los separadores decimales, de miles, ect.

Una vez configurado el web-config y la etiqueta ToolkitScriptManager nuestro control CalendarExtender deberá estar totalmente al español.

Es importante mencionar que con solo modificar el web-config el sistema debería reconocer el nuevo idioma y cultura establecido, pero en algunos casos será necesario también configurar el ToolkitScriptManager

CSS Utilizado en control CalendarExtender

.yui .ajax__calendar_container 
{
    background-color:#f2f2f2;
    border:solid 1px #808080;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    cursor:default;
    width:205px;
    font-size:11px;
    text-align:center;
    padding:0px;
}
 
.yui .ajax__calendar_body 
{
    height:139px;
    width:205px;
    position:relative;
    overflow:hidden;
}
 
.yui .ajax__calendar_days, .yui .ajax__calendar_months, .yui .ajax__calendar_years 
{
    top:0px; 
    left:0px;
    height:139px;
    width:195px;    
    padding:5px;
    position:absolute;
    text-align:center;
}
 
.yui .ajax__calendar_days table
{
    border-spacing:0;
    border-collapse:collapse;
    font:100% sans-serif;
    text-align:center;    
}
 
.yui .ajax__calendar_header 
{
    background:url(../img/yui/sprite.png) repeat-x 0 0; 
    height:22px;
    width:100%;
    font-size:10pt;
    font-weight:bold;
    text-align:center;
    padding-top:3px;
}
 
.yui .ajax__calendar_prev 
{
    margin-top:2px;
    margin-left:4px;
    height:15px;
    width:25px;
    cursor:pointer;
    float:left;
    background:url(../img/yui/sprite.png) 0px -450px no-repeat;
}
 
.yui .ajax__calendar_next 
{
    margin-top:2px;
    margin-right:4px;
    height:15px;
    width:25px;    
    cursor:pointer;
    float:right;
    background:url(../img/yui/sprite.png) 0px -500px no-repeat;
}
 
.yui .ajax__calendar_title 
{
    cursor:pointer;
    font-weight:bold;
    text-align:center;
}
 
.yui .ajax__calendar_footer, .yui .ajax__calendar_today 
{
    color: #0099CC;
}
 
.yui .ajax__calendar_dayname 
{
    padding-left:3px;
    padding-right:3px;
    margin-bottom:5px;
    margin-left:2px;
    margin-right:2px;
    text-align:center;
    font-weight:700;
    font-size:10pt;
    color:#000;
    border-bottom:solid 1px #a6a6a6;
}
 
.yui .ajax__calendar_day, .yui .ajax__calendar_month, .yui .ajax__calendar_year
{
    padding:0px;
    color:#000;
    text-align:center;  
    padding:0pt 2px;
}
 
.yui .ajax__calendar_hover .ajax__calendar_day, .yui .ajax__calendar_hover .ajax__calendar_month, .yui .ajax__calendar_hover .ajax__calendar_year, .yui .ajax__calendar_hover .ajax__calendar_title
{
    color:#0066cc;
}
 
.yui .ajax__calendar_other .ajax__calendar_day, .yui .ajax__calendar_other .ajax__calendar_year
{
    color:#a6a6a6;   
}
 
.yui .ajax__calendar_active .ajax__calendar_day
{
    color:#0066cc;   
}

Imagen utilizada:

sprite-calendarextender

Suscribir
Notificar a
guest
1 Comentario
Comentarios en línea
Ver todos los comentarios
trackback

[…] Hasta acá todo muy bien, el problema está cuando queremos que el texto de las etiquetas mostradas aparezcan en un idioma diferente al inglés, en este caso el español… Sigue Leyendo […]

0
Responder