カレンダーを表示するときに、週末の日と曜日ヘッダーの週末の名前が表示されないようにする必要がある場合があります。ASP.NET Calendar コントロールを使用してこれを行う方法はありますか?
6 に答える
コントロールが提供されているため、コントロールをオーバーライドせずにこれを行う方法はありません。これを行う 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());
}
}
}
}
私が知っている限りではできませんが、たとえば、display:none でスタイルを設定することにより、WeekendDayStyle を試すことができます。または、Calendar から継承したカスタム コントロールを作成し、ether Render、OnDayRender などをオーバーライドすることもできます。
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");
}
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 が実行されると、カレンダーの種類がジャンプします。
- このソリューションは、おそらく:first-childを使用したストレート CSS で実装できます。
- ページに別のカレンダーを追加する場合は、JavaScript の中間行を複製する必要があります。:first と :last を使用しているため、これが必要です。
- ページにカレンダー コントロールが 1 つしかない場合は、jQuery セレクターの 2 番目の引数を削除することで、JavaScript の中間行を簡素化できます。
$('#<%= Calendar1.ClientID %>')
これを実現するためだけに 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>