我有一个带有日历的c#网络应用程序 - 没什么特别的。我遇到的问题是只能点击数字而不是整个单元格。我添加了一个onmouseover类型的处理程序,当它被鼠标悬停时,它会使单元格改变颜色,但这会产生误导,因为你无法点击边缘。
在asp.net c#中有什么方法可以让这个日历允许整个单元格可以点击而不仅仅是日期的超文本号码?我希望我已经解释得很好。
由于
<asp:Calendar ID="Calendar1" runat="server"
DayStyle-ForeColor="DarkBlue"
DayHeaderStyle-BackColor="#FEF6CB"
DayStyle-Height="25"
SelectedDayStyle-BackColor="#003F7D"
SelectedDayStyle-ForeColor="White"
DayNameFormat="FirstLetter"
ShowGridLines="true"
BorderColor="Black"
TitleStyle-BackColor="#003F7D"
TitleStyle-ForeColor="White"
TitleStyle-CssClass="CalHeader"
NextPrevStyle-CssClass="CalNextPrev"
NextPrevStyle-ForeColor="White"
OnVisibleMonthChanged="cal_ReserveDate_VisibleMonthChanged"
OnDayRender="cal_ReserveDate_DayRender"
OnSelectionChanged="cal_ReserveDate_SelectionChanged"
DayStyle-BorderColor="Black"
SelectedDayStyle-CssClass="CalendarSelectedDay"
Width="97%" />
更新
这是ascx页面的基本框架:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="BuyTourProductDialogGalaxy2.ascx.cs" Inherits="ConLib_Custom_BuyTourProductDialog2" %>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function fixCalendar() {
var a = $('#<%=cal_ReserveDate.ClientID%> a ');
a.contents().wrap("<div/>");
}
</script>
<asp:UpdatePanel ID="upnl_Cal" runat="server" ChildrenAsTriggers="true" UpdateMode="Always">
<ContentTemplate>
<div class="BuyTourProductDialog">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" width="75%">
<asp:Label ID="lblInstructions" runat="server" Text="" EnableViewState="False" CssClass="ReservationInstructions" />
</td>
<td width="25%">
<span style="float: right;">
<asp:Button ID="btn_Reset" runat="server" Text="Reset" OnClick="btn_Reset_Click" Visible="false" CssClass="ResetButton" />
<asp:Button ID="btn_Reserve" runat="server" Text="Reserve" OnClick="btn_Reserve_Click" Visible="true" />
<asp:Button ID="btn_AddToCart" runat="server" Text="Add To Cart" Visible="false" OnClick="btn_AddToCart_Click" />
<asp:Button ID="btn_Continue" runat="server" Text="Continue" Visible="false" OnClick="btn_Continue_Click" />
</span>
</td>
</tr>
</table>
<%-- Calendar Panel --%>
<asp:Panel ID="pnl_GatewayCalendar" runat="server" Visible="false">
<table width="100%">
<%-- Header --%>
<tr>
<td align="center" colspan="2">
<asp:Label ID="lbl_SelectedDate" runat="server" Font-Bold="true" CssClass="SelectedDate" /><br />
</td>
</tr>
<tr>
<%-- Calendar side --%>
<td width="50%" valign="top">
<asp:Calendar ID="cal_ReserveDate" runat="server"
DayStyle-ForeColor="DarkBlue" DayHeaderStyle-BackColor="#FEF6CB" DayStyle-Height="25"
SelectedDayStyle-BackColor="#003F7D" SelectedDayStyle-ForeColor="White"
DayNameFormat="FirstLetter" ShowGridLines="true" BorderColor="Black"
TitleStyle-BackColor="#003F7D" TitleStyle-ForeColor="White" TitleStyle-CssClass="CalHeader"
NextPrevStyle-CssClass="CalNextPrev" NextPrevStyle-ForeColor="White"
OnVisibleMonthChanged="cal_ReserveDate_VisibleMonthChanged"
OnDayRender="cal_ReserveDate_DayRender" OnSelectionChanged="cal_ReserveDate_SelectionChanged"
DayStyle-BorderColor="Black" SelectedDayStyle-CssClass="CalendarSelectedDay" Width="97%" />
</td>
<%-- Event Times side --%>
<td valign="top">
<%-- Another section here for tour times. --%>
</td>
</tr>
</table>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
答案 0 :(得分:2)
我觉得以下链接可能会对您有所帮助:
http://forums.asp.net/t/1278710.aspx/1
.net calendar - making the whole cell perform postback (clickable)
http://weblogs.sqlteam.com/jhermiz/archive/2007/12/10/Cool-Tricks-With-The-ASP.net-Calendar.aspx
答案 1 :(得分:2)
Calendar控件不允许您使整个单元格可单击,但如果您不介意使用它,可以使用一些jQuery强制它。
以下是:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(function () {
var a = $('#<%=Calendar1.ClientID%> a');
//wrap the anchor text in a div to force the link to expand
a.contents().wrap("<div/>");
});
</script>
您需要做的就是引用jQuery
更新:UpdatePanel的版本
将以下内容放在页面顶部:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function fixCalendar() {
var a = $('#<%=cal_ReserveDate.ClientID%> a ');
a.contents().wrap("<div/>");
}
</script>
<asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="updatePanel" runat="server">
<ContentTemplate>
<asp:Calendar ID="cal_ReserveDate" runat="server"
... //etc
Width="97%" />
</ContentTemplate>
</asp:UpdatePanel>
现在,在Page_Load上,您需要始终调用上述脚本:
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "key", "fixCalendar();", true);
}
答案 2 :(得分:-1)
将其放在默认页面
的正文中<body>
<form id="form1" runat="server">
<table title="mxit:table:full" style="width: 100%;" align="center">
<tr style="background-color: red; text-align: center;">
<td style="width: 25%;">
<a href="Default.aspx?id=prev">< Prev</a>
</td>
<td style="width: 50%;">
<asp:Label ID="lblMonth" runat="server"></asp:Label>
<asp:Label ID="lblYear" runat="server"></asp:Label>
<br />
</td>
<td style="width: 25%">
<a href="Default.aspx?id=next">Next ></a>
</td>
</tr>
</table>
<asp:Label ID="lbltest" runat="server" Text=""></asp:Label>
</form>
</body>
将它放在默认.aspx.cs
的代码中 using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
try
{
if (Request.QueryString["id"] == "next")
{
if ((int)Session["currentMonth"] >= 12)
{
Session["currentMonth"] = 1;
Session["currentYear"] = (int)Session["currentYear"] + 1;
}
else
{
Session["currentMonth"] = (int)Session["currentMonth"] + 1;
}
DateTime dt = new DateTime((int)Session["currentYear"], (int)(Session["currentMonth"]), 1);
string obj = dt.DayOfWeek.ToString();
GetCalender(obj);
}
else if (Request.QueryString["id"] == "prev")
{
if ((int)Session["currentMonth"] <= 1)
{
Session["currentMonth"] = 12;
Session["currentYear"] = (int)Session["currentYear"] - 1;
}
else
{
Session["currentMonth"] = (int)Session["currentMonth"] - 1;
}
DateTime dt = new DateTime((int)Session["currentYear"], (int)(Session["currentMonth"]), 1);
string obj = dt.DayOfWeek.ToString();
GetCalender(obj);
}
else //this will run when we start the project
{
int currentYear = DateTime.Now.Year;
int currentMonth = DateTime.Now.Month;
Session["currentMonth"] = currentMonth;
Session["currentYear"] = currentYear;
DateTime dt = new DateTime((int)Session["currentYear"], (int)(Session["currentMonth"]), 1);
string obj = dt.DayOfWeek.ToString();
GetCalender(obj);
}
}
catch
{
Response.Redirect("Default.aspx");
}
}
}
private void GetCalender(string obj)
{
try
{
string[] months = new string[] {"January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November", "December"};
DayOfWeek objDayofweek = DateTime.Today.Date.DayOfWeek;
lbltest.Text = "<table style='width:100%' align='center'><colgroup span='7' style='width:15%'></colgroup><tr><td>Mon</td>";
lbltest.Text = lbltest.Text + "<td>Tue</td>";
lbltest.Text = lbltest.Text + "<td>Wed</td>";
lbltest.Text = lbltest.Text + "<td>Thu</td>";
lbltest.Text = lbltest.Text + "<td>Fri</td>";
lbltest.Text = lbltest.Text + "<td>Sat</td>";
lbltest.Text = lbltest.Text + "<td>Sun</td></tr><tr>";
int y = 1;
switch (obj.ToString())
{
case "Monday":
y = 1;
break;
case "Tuesday":
lbltest.Text = lbltest.Text + "<td> </td>";
y = 2;
break;
case "Wednesday":
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
y = 3;
break;
case "Thursday":
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
y = 4;
break;
case "Friday":
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
y = 5;
break;
case "Saturday":
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
y = 6;
break;
case "Sunday":
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
lbltest.Text = lbltest.Text + "<td> </td>";
y = 7;
break;
}
for (int dayday = Convert.ToInt32(objDayofweek); dayday <= DateTime.DaysInMonth((int)Session["currentYear"], (int)(Session["currentMonth"])); dayday++)
{
if (y < 7)
{
lbltest.Text = lbltest.Text + "<td><a href='#Date=" + dayday.ToString() + "/" + Session["currentMonth"] + "/" + Session["currentYear"] + "'>" + dayday.ToString() + "</a></td>";
y++;
}
else
{
lbltest.Text = lbltest.Text + "<td><a href='#Date=" + dayday.ToString() + "/" + Session["currentMonth"] + "/" + Session["currentYear"] + "'>" + dayday.ToString() + "</a></td>";
y = 1;
lbltest.Text = lbltest.Text + "</tr><tr>";
}
}
lbltest.Text = lbltest.Text + "</tr></table>";
lblMonth.Text = months[(int)Session["currentMonth"] - 1].ToString();
lblYear.Text = Session["currentYear"].ToString();
}
catch
{
Response.Redirect("Default.aspx");
}
}
}