lunes, 21 de julio de 2008

Como usar JSCalendar con .NET

Para poder usar correcta y efectivamente el JSCalendar con .NET lo mejor es crear una función que inserte el código al cargar la página. A continuación mi ejemplo:

protected void cargarJS()
{
String jsCalconfig;

ClientScript.RegisterClientScriptInclude("js1", "../js/jscalendar/calendar.js");
ClientScript.RegisterClientScriptInclude("js2", "../js/jscalendar/lang/calendar-es.js");
ClientScript.RegisterClientScriptInclude("js3", "../js/jscalendar/calendar-setup.js");

jsCalconfig = "Calendar.setup \n";
jsCalconfig += "( \n";
jsCalconfig += " { \n";
jsCalconfig += " inputField: '" + txtCumple.ClientID + "', \n";
jsCalconfig += " ifFormat: '%Y%m%d', \n";
jsCalconfig += " firstDay: 1, \n";
jsCalconfig += " weekNumbers: false, \n";
jsCalconfig += " showOthers: false \n";
jsCalconfig += " } \n";
jsCalconfig += "); \n\n";

ClientScript.RegisterStartupScript(this.GetType(), "CalendarioJS2", jsCalconfig, true);
}
Nótese que utilizo ClientScript.RegisterStartupScript y no ClientScript.RegisterClientScriptBlock porque el primero inserta el script al final del form y el segundo al comienzo (antes del input).

Para definir el control con el que se relacionará el calendario usamos la propiedad .ClientID, de este modo nos aseguramos de que mantenda el nombre en todo momento; ya que cuando se utilizan Master Pages los IDs de los controles se cambian al compilar el formulario.

Como el JSCalendar utiliza una hoja de estilos aparte debemos agregarla al header de nuestra página web, pero que pasa si utilizamos Master Pages ? Bien, acá esta la solución:

HtmlLink link1 = new HtmlLink();
link1.Href = "js/jscalendar/calendar-blue.css";
link1.Attributes["rel"] = "stylesheet";
link1.Attributes["text"] = "text/css";
this.Header.Controls.Add (link1);

Ejecutando esto en el Page_Load lo que hacemos es agregar el enlace a la hoja de estilos en nuestro encabezado. Dinámicamente, y sólo en las páginas que así lo requieran.

No hay comentarios.: