How can I hide weekends when using the ASP.NET Calendar control? - asp.net

Question

Sometimes when displaying a calendar it is necessary to prevent the weekend days and the weekend names in the day header from showing, is there a way to do this using the ASP.NET Calendar control?

Answer 1

As the control is provided, there is no way to do this without overriding the control. One way of doing this is to is to override the OnDayRender and Render methods to remove the information from the output prior to sending it back to the client.
The following is a screen shot of what the control looks like when rendered:
The following is a basic control override that demonstrates removing the weekend day columns from the 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

As far I know you can't, but you can experiment with WeekendDayStyle, for example by setting style with display:none. Alternatively, you can create custom control inherited from Calendar and override ether Render, OnDayRender or something else.

Answer 3

I believe you can handle the Day Render event and hide the cell or assign CSS properties to make it invisible or grayed out. Below is a simple example, I hope this helps.
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

If you are OK using a jQuery solution, it takes just a few lines of code:
<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>
Here are some considerations with this approach:
If JavaScript is disabled, the client will see weekends.
In older, slower browsers, the calendar kind of jumps as the jQuery executes on load.
This solution could probably be implemented in straight CSS with :first-child.
If you add another calendar to the page, you will need to duplicate the middle line of JavaScript. This is necessary because we are using :first and :last.
If you only have one calendar control on the page, you can simplify the middle line of JavaScript by removing the second argument of the jQuery selector: $('#<%= Calendar1.ClientID %>')

Answer 5

As zacharydl have suggested I managed to hide the weekends using jQuery. I have made a small change to the original code.
<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>
You will have to register the HideWeekEnd() in page endRequest to ensure its called during page post back.

Answer 6

here is another way using CSS only to achieve that:
<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>