在 asp 日历控件中以不同颜色显示日期
Display date in different color in asp Calendar control
我正在使用日历控件。我们从数据库中获取四种不同类型的日期,相同的日期将显示在日历上,其他日期已禁用。四种类型的日期是
a) Today
b) First Schedule
c) Second Schedule
d) Third Schedule
今天将用绿色圆圈突出显示第一个时间表为黄色,第二个时间表为绿色,第三个时间表为红色。。
我试过的代码如下
<asp:Calendar ID="CalScheduleDays" runat="server" Height="100%" Width="100%"
BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" OnDayRender="CalScheduleDays_DayRender" TodayDayStyle-ForeColor="#FF0000" > </asp:Calendar>
protected void CalScheduleDays_DayRender(object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
{
e.Day.IsSelectable = false;
CalScheduleDays.SelectedDates.Add(_dates.FirstScheduleDate);
CalScheduleDays.SelectedDates.Add(_dates.SecondScheduleDate);
CalScheduleDays.SelectedDates.Add(_dates.ThirdScheduleDate);
if (e.Day.IsSelected)
{
e.Cell.BackColor = System.Drawing.Color.LightGray;
e.Cell.ForeColor = System.Drawing.Color.Green;
e.Day.IsSelectable = true;
}
if (e.Day.IsWeekend)
{
e.Cell.BackColor = System.Drawing.Color.LightGray;
e.Cell.ForeColor = System.Drawing.Color.DarkGray;
e.Day.IsSelectable = false;
}
}
感谢您的帮助和支持。
如果你只想用圆圈高亮,那么你可以在后面的代码中添加css,如下所示
if (e.Day.Date == dtFirstSchedule)
{
e.Cell.CssClass = "dotYellow";
e.Day.IsSelectable = true;
}
else if(e.Day.Date==dtSecondSchedule)
{
e.Cell.CssClass = "dotGreen";
e.Day.IsSelectable = true;
}
else if(e.Day.Date==dtThirdSchedule)
{
e.Cell.CssClass = "dotRed";
e.Day.IsSelectable = true;
}
else if(e.Day.Date==DateTime.Now.Date)
{
e.Cell.CssClass = "dotGreen";
e.Day.IsSelectable = true;
}
else
{
//do nothing
}
并在 css class 下方添加 css
<style>
.dotRed {
height: 25px;
width: 25px;
background-color:red;
border-radius: 50%;
}
.dotGreen {
height: 25px;
width: 50px;
background-color:green;
border-radius: 100%;
z-index:-1;
}
.dotYellow {
height: 25px;
width: 25px;
background-color:yellow;
border-radius: 50%;
}
</style>
这将显示如下
我正在使用日历控件。我们从数据库中获取四种不同类型的日期,相同的日期将显示在日历上,其他日期已禁用。四种类型的日期是
a) Today
b) First Schedule
c) Second Schedule
d) Third Schedule
今天将用绿色圆圈突出显示第一个时间表为黄色,第二个时间表为绿色,第三个时间表为红色。
我试过的代码如下
<asp:Calendar ID="CalScheduleDays" runat="server" Height="100%" Width="100%"
BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" OnDayRender="CalScheduleDays_DayRender" TodayDayStyle-ForeColor="#FF0000" > </asp:Calendar>
protected void CalScheduleDays_DayRender(object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
{
e.Day.IsSelectable = false;
CalScheduleDays.SelectedDates.Add(_dates.FirstScheduleDate);
CalScheduleDays.SelectedDates.Add(_dates.SecondScheduleDate);
CalScheduleDays.SelectedDates.Add(_dates.ThirdScheduleDate);
if (e.Day.IsSelected)
{
e.Cell.BackColor = System.Drawing.Color.LightGray;
e.Cell.ForeColor = System.Drawing.Color.Green;
e.Day.IsSelectable = true;
}
if (e.Day.IsWeekend)
{
e.Cell.BackColor = System.Drawing.Color.LightGray;
e.Cell.ForeColor = System.Drawing.Color.DarkGray;
e.Day.IsSelectable = false;
}
}
感谢您的帮助和支持。
如果你只想用圆圈高亮,那么你可以在后面的代码中添加css,如下所示
if (e.Day.Date == dtFirstSchedule)
{
e.Cell.CssClass = "dotYellow";
e.Day.IsSelectable = true;
}
else if(e.Day.Date==dtSecondSchedule)
{
e.Cell.CssClass = "dotGreen";
e.Day.IsSelectable = true;
}
else if(e.Day.Date==dtThirdSchedule)
{
e.Cell.CssClass = "dotRed";
e.Day.IsSelectable = true;
}
else if(e.Day.Date==DateTime.Now.Date)
{
e.Cell.CssClass = "dotGreen";
e.Day.IsSelectable = true;
}
else
{
//do nothing
}
并在 css class 下方添加 css
<style>
.dotRed {
height: 25px;
width: 25px;
background-color:red;
border-radius: 50%;
}
.dotGreen {
height: 25px;
width: 50px;
background-color:green;
border-radius: 100%;
z-index:-1;
}
.dotYellow {
height: 25px;
width: 25px;
background-color:yellow;
border-radius: 50%;
}
</style>
这将显示如下