Làm cách nào để ẩn cuối tuần khi sử dụng điều khiển Lịch ASP.NET?

Question

Đôi khi khi hiển thị lịch cần thiết để ngăn ngày cuối tuần và tên cuối tuần trong tiêu đề ngày hiển thị, có cách nào để thực hiện việc này bằng cách sử dụng ASP.NET Calendar control không?

Answer 1

Khi kiểm soát được cung cấp, không có cách nào để thực hiện việc này mà không ghi đè điều khiển. Một cách để thực hiện điều này là ghi đè các phương thức OnDayRender và Render để xóa thông tin khỏi đầu ra trước khi gửi lại cho khách hàng.

Sau đây là một ảnh chụp màn hình của những gì điều khiển trông giống như khi hiển thị:

Sau đây là ghi đè kiểm soát cơ bản thể hiện loại bỏ các cột ngày cuối tuần từ sự kiểm soát.

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

Theo tôi biết bạn không thể, nhưng bạn có thể thử nghiệm với WeekendDayStyle, ví dụ bằng cách đặt kiểu với màn hình: không. Ngoài ra, bạn có thể tạo điều khiển tùy chỉnh được kế thừa từ Lịch và ghi đè ether Render, OnDayRender hoặc một thứ khác.

Answer 3

Tôi tin rằng bạn có thể xử lý sự kiện Hiển thị ngày và ẩn ô hoặc gán thuộc tính CSS để biến nó thành ẩn hoặc chuyển sang màu xám. Dưới đây là một ví dụ đơn giản, tôi hy vọng điều này sẽ giúp ích.

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

Nếu bạn là OK sử dụng một giải pháp jQuery, nó chỉ mất một vài dòng mã:

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

Dưới đây là một số lưu ý với cách tiếp cận này:

• Nếu Javascript bị vô hiệu hóa , khách hàng sẽ thấy ngày cuối tuần.
• Trong các trình duyệt cũ hơn, chậm hơn, loại lịch nhảy khi jQuery thực thi khi tải.
• Giải pháp này có thể được triển khai bằng CSS thẳng với :first-child.
• Nếu bạn thêm lịch khác vào trang, bạn cần phải sao chép dòng giữa của JavaScript. Điều này là cần thiết bởi vì chúng tôi đang sử dụng: đầu tiên và: cuối cùng.
• Nếu bạn chỉ có quyền kiểm soát một lịch trên trang web, bạn có thể đơn giản hóa dòng giữa JavaScript bằng cách loại bỏ các đối số thứ hai của bộ chọn jQuery: $('#<%= Calendar1.ClientID %>')

Answer 5

Như zacharydl đã đề nghị tôi cố gắng che giấu những ngày cuối tuần sử dụng jQuery. Tôi đã thực hiện một thay đổi nhỏ đối với mã ban đầu.

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

Bạn sẽ phải đăng ký HideWeekEnd() ở cuối trangYêu cầu đảm bảo được gọi trong khi đăng lại trang.

Answer 6

đây là một cách khác để sử dụng CSS chỉ để đạt được điều đó:

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