如何在使用ASP.NET日曆控件時隱藏週末？

Question

有時，在顯示日曆時，必須防止顯示日頭中的週末和週末名稱，有沒有辦法使用ASP.NET Calendar control來做到這一點？

Answer 1

由於提供了控件，因此在不覆蓋控件的情況下無法做到這一點。這樣做的一種方法是重寫OnDayRender和Render方法，以便在將輸出信息發送回客戶端之前從輸出中刪除信息。

以下是控制的外觀呈現像時的屏幕截圖：

以下是演示從控制除去雙休日全天列的基本控制覆蓋。

/*------------------------------------------------------------------------------ 
* 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

據我所知，你不能，但你可以嘗試WeekendDayStyle，例如通過使用display：none設置樣式。或者，您可以創建自日曆繼承的自定義控件，並重寫ether Render，OnDayRender或其他。

Answer 3

我相信你可以處理Day Render事件並隱藏單元格或分配CSS屬性以使其不可見或變灰。下面是一個簡單的例子，我希望這有助於。

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

如果你是OK使用jQuery的解決方案，它需要的代碼，只需幾行：

<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> 

這裏有一些考慮這種方法：

• 如果JavaScript被禁用，客戶會看到週末。
• 在較老的較慢的瀏覽器中，jQuery在加載時執行的日曆類型的跳轉。
• 這個解決方案可能可以用直接的CSS實現，其中:first-child。
• 如果您在頁面中添加其他日曆，則需要複製JavaScript的中間行。這是必要的，因爲我們使用：first和last。
• 如果你只在頁面上一個日曆控件，您可以通過刪除jQuery選擇的第二個參數簡化的JavaScript中線：$('#<%= Calendar1.ClientID %>')

Answer 5

由於zacharydl建議我設法使用隱藏週末jQuery的。我對原始代碼做了一些小修改。

<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> 

您必須在頁面endRequest中註冊HideWeekEnd（）以確保在頁面回發期間調用HideWeekEnd（）。

Answer 6

這裏是使用CSS只是實現另外一種方式：

<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>