¿Cómo puedo ocultar los fines de semana cuando uso el control de calendario de ASP.NET?

Question

A veces, al mostrar un calendario, es necesario evitar que se muestren los días de fin de semana y los nombres de fin de semana en el encabezado del día, ¿hay alguna manera de hacerlo utilizando el ASP.NET Calendar control?

Answer 1

Como se proporciona el control, no hay forma de hacerlo sin anular el control. Una forma de hacerlo es sobrescribir los métodos OnDayRender y Render para eliminar la información de la salida antes de enviarla al cliente.

La siguiente es una captura de pantalla de lo que el control se ve como cuando se representa:

La siguiente es una intervención de control básico que demuestra la eliminación de las columnas de los días de fin de semana desde el control.

/*------------------------------------------------------------------------------ 
* Author - Rob (http://stackoverflow.com/users/1185/rob) 
* ----------------------------------------------------------------------------- 
* Notes 
* - This might not be the best way of doing things, so you should test it 
* before using it in production code. 
* - This control was inspired by Mike Ellison's article on The Code Project 
* found here: http://www.codeproject.com/aspnet/MellDataCalendar.asp 
* ---------------------------------------------------------------------------*/ 
using System; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Text; 
using System.IO; 
using System.Xml; 

namespace DataControls 
{ 
    /// <summary> 
    /// Example of a ASP.NET Calendar control that has been overriden to force 
    /// the weekend columns to be hidden on demand. 
    /// </summary> 
    public class DataCalendar : Calendar 
    { 
     private bool _hideWeekend; 
     private int _saturday; 
     private int _sunday; 

     /// <summary>Constructor</summary> 
     public DataCalendar() 
      : base() 
     { 
      // Default to showing the weekend 
      this._hideWeekend = false; 
      // Set the default values for Saturday and Sunday 
      this.Saturday = 6; 
      this.Sunday = 0; 
     } 

     /// <summary> 
     /// Indicate if the weekend days should be shown or not, set to true 
     /// if the weekend should be hidden, false otherwise. This field 
     /// defaults to false. 
     /// </summary> 
     public bool HideWeekend 
     { 
      get { return this._hideWeekend; } 
      set { this._hideWeekend = value; } 
     } 

     /// <summary> 
     /// Override the default index for Saturdays. 
     /// </summary> 
     /// <remarks>This option is provided for internationalization options.</remarks> 
     public int Saturday 
     { 
      get { return this._saturday; } 
      set { this._saturday = value; } 
     } 


     /// <summary> 
     /// Override the default index for Sundays. 
     /// </summary> 
     /// <remarks>This option is provided for internationalization options.</remarks> 
     public int Sunday 
     { 
      get { return this._sunday; } 
      set { this._sunday = value; } 
     } 

     /// <summary> 
     /// Render the day on the calendar with the information provided. 
     /// </summary> 
     /// <param name="cell">The cell in the table.</param> 
     /// <param name="day">The calendar day information</param> 
     protected override void OnDayRender(TableCell cell, CalendarDay day) 
     { 
      // If this is a weekend day and they should be hidden, remove 
      // them from the output 
      if (day.IsWeekend && this._hideWeekend) 
      { 
       day = null; 
       cell.Visible = false; 
       cell.Text = string.Empty; 
      } 
      // Call the base render method too 
      base.OnDayRender(cell, day); 
     } 

     /// <summary> 
     /// Render the calendar to the HTML stream provided. 
     /// </summary> 
     /// <param name="html">The output control stream to write to.</param> 
     protected override void Render(HtmlTextWriter html) 
     { 
      // Setup a new HtmlTextWriter that the base class will use to render 
      StringBuilder sb = new StringBuilder(); 
      StringWriter sw = new StringWriter(sb); 
      HtmlTextWriter calendar = new HtmlTextWriter(sw); 
      // Call the base Calendar's Render method allowing OnDayRender() 
      // to be executed. 
      base.Render(calendar); 
      // Check to see if we need to remove the weekends from the header, 
      // if we do, then remove the fields and use the new verison for 
      // the output. Otherwise, just use what was previously generated. 
      if (this._hideWeekend && this.ShowDayHeader) 
      { 
       // Load the XHTML to a XML document for processing 
       XmlDocument xml = new XmlDocument(); 
       xml.Load(new StringReader(sw.ToString())); 
       // The Calendar control renders as a table, so navigate to the 
       // second TR which has the day headers. 
       XmlElement root = xml.DocumentElement; 
       XmlNode oldNode = root.SelectNodes("/table/tr")[1]; 
       XmlNode sundayNode = oldNode.ChildNodes[this.Sunday]; 
       XmlNode saturdayNode = oldNode.ChildNodes[this.Saturday]; 
       XmlNode newNode = oldNode; 
       newNode.RemoveChild(sundayNode); 
       newNode.RemoveChild(saturdayNode); 
       root.ReplaceChild(oldNode, newNode); 
       // Replace the buffer 
       html.WriteLine(root.OuterXml); 
      } 
      else 
      { 
       html.WriteLine(sw.ToString()); 
      } 
     } 
    } 
} 

Answer 2

Hasta donde yo sé, no puede, pero puede experimentar con WeekendDayStyle, por ejemplo, configurando el estilo con la pantalla: ninguno. Alternativamente, puede crear un control personalizado heredado de Calendar y anular el Render de ether, OnDayRender u otra cosa.

Answer 3

Creo que puede manejar el evento Day Render y ocultar la celda o asignar propiedades de CSS para que sea invisible o atenuada. A continuación se muestra un ejemplo simple, espero que esto ayude.

protected void Calendar_DayRender(object sender, DayRenderEventArgs e) 
{ 

    e.Cell.Visible = False; 
    // or 
    // e.Cell.Attributes.Add("class", "Invisible"); 
    // or 
    // e.Cell.Attributes.Add("style", "display: none"); 
} 

Answer 4

Si estás bien utilizando una solución de jQuery, se tarda sólo unas pocas líneas de código:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('._title').parent().attr('colspan', '5'); // title row initially has a colspan of seven 
     $('._dayheader:first, ._dayheader:last', $('#<%= Calendar1.ClientID %>')).hide(); // remove first and last cells from day header row 
     $('._weekendday').hide(); // remove all the cells marked weekends 
    }); 
</script> 

<asp:Calendar runat="server" ID="Calendar1"> 
    <TitleStyle CssClass="_title" /> 
    <DayHeaderStyle CssClass="_dayheader" /> 
    <WeekendDayStyle CssClass="_weekendday" /> 
</asp:Calendar> 

He aquí algunas consideraciones con este enfoque:

• Si Javascript está desactivado , el cliente verá los fines de semana.
• En navegadores más antiguos y lentos, el tipo de calendario salta a medida que jQuery se ejecuta con la carga.
• Esta solución probablemente podría implementarse en CSS directo con :first-child.
• Si agrega otro calendario a la página, deberá duplicar la línea media de JavaScript. Esto es necesario porque estamos usando: primero y: último.
• Si sólo tiene el control de un calendario en la página, se puede simplificar la línea media de JavaScript quitando el segundo argumento del selector de jQuery: $('#<%= Calendar1.ClientID %>')

Answer 5

Como zacharydl han sugerido logré ocultar los fines de semana usando jQuery. He hecho un pequeño cambio en el código original.

<script type="text/javascript"> 
    HideWeekEnd(); 


    function HideWeekEnd() 
    { 
     $('._title').parent().attr('colspan', '7'); 
     $('._dayheader:nth-last-child(1) , ._dayheader:nth-last-child(2) ', $('#<%= Calendar1.ClientID %>')).hide(); // remove last two cells from day header row 
     $('._weekendday').hide(); // remove all the cells marked weekends 
    } 

Sys.Application.add_init(appl_init); 

     function appl_init() { 
      var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance(); 
      pgRegMgr.add_endRequest(HideWeekEnd); 
     } 

</script> 

Deberá registrar HideWeekEnd() en la página endRequest para asegurar que se invoque durante la publicación de la página.

Answer 6

aquí es otra manera el uso de CSS sólo para lograr que:

<style> 
    .hidden, 
    #Calendrier tr > th[abbr=Saturday], 
    #Calendrier tr > th[abbr=Sunday] { display:none; } 
    #Calendrier tr > th { text-align: center; } 
</style> 

<asp:Calendar ID="Calendar1" DayNameFormat="Full" runat="server" 
       WeekendDayStyle-CssClass="hidden" ClientIDMode="Static" > 
</asp:Calendar>