效果图:
公司做网站用到的日历,自己编写的,用于呈现不同日期显示不同的价格的,这里做了点修改,做成了一个日历,跟大家分享一下,感觉还可以有点技术性,暂且先不看做的样式好不好,主要看看编写的思路,主要是逻辑,个人感觉做开发,逻辑思路清晰很重要,只要能想到,逻辑合理,就能实现想要的效果,我是刚出道的小小小菜鸟,希望变强,像高手看齐,分享这些不是为了炫耀,而是一方面:通过在发表博客把好的东西在整理一遍(不能发个半成品上来给大家看),巩固一下,第二方面:希望一下像我一样的菜鸟,但有梦想,希望变厉害的朋友们能一起进步,首先感谢来我博客留下脚印的朋友,这是我的第一篇博客,肯定有不到的地方,希望大家能给指点,以后遇到好的知识好的的东西,我会陆陆续续的发表上来和大家一起学习一起探讨,O(∩_∩)O谢谢大家......
首先这个是在vs2008里面编写的,用到技术是jQuery和Ajax.
1.TimeList.aspx页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TimeList.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>自制日历</title>
<!--引用jQuery-->
<script src="Js/jquery-1.6.4.js" type="text/javascript"></script>
<!--引用样式-->
<link href="Css/TimeListCss.css" rel="stylesheet" type="text/css" />
<!--引入Js(用jQuery写的)-->
<script src="Js/TimeListJs.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="ShowDiv" runat="server" style="margin-left:500px">
</div>
</form>
</body>
</html>
2.TimeList.aspx.cs后台代码
/// <summary>
/// 页面加载事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//当前年月日
int year = DateTime.Now.Year;
int month = DateTime.Now.Month;
int day = DateTime.Now.Day;
//填充页面的DIV
this.ShowDiv.InnerHtml = GetHtml(year,month,day);
}
}
/// <summary>
/// 根据年月日绘制当期日期的日历
/// </summary>
/// <param name="year"></param>
/// <param name="month"></param>
/// <param name="day"></param>
/// <returns></returns>
private string GetHtml(int year, int month, int day)
{
//计算当前月的1号是星期几
string dayOfWeek = DateTime.Parse(year + "-" + month + "-01").DayOfWeek.ToString();
//当前月的天数
int daysOfMonth = DateTime.DaysInMonth(year, month);
//定义StringBuilder
StringBuilder html = new StringBuilder();
//创建一个div
html.Append("<div class='TimeList'>");
//创建一个table(一行三列的table)
html.Append("<table width='490px' border='0' align='center' cellpadding='0' cellspacing='0' class='Time_Go'>");
//给向左的图片添加一个click事件
html.Append("<tr><td width='60px' height='38px'><a href='#'><img id='left' src='Images/SJ_Left.gif' οnclick='getleft();' style='border:none;' /></a>");
//显示前一个月的月份
html.Append("<span id='LeftSpan'>" + (Int32.Parse(DateTime.Now.Month.ToString()) - 1 == 0 ? 12 : Int32.Parse(DateTime.Now.Month.ToString()) - 1) + "月</span></td>");
//显示当前年和月份
html.Append("<td width='370px' align='center'><font id='NowYearFont'>" + DateTime.Now.Year.ToString() + "</font>年<font id='NowMonthFont'>" + DateTime.Now.Month.ToString() + "</font>月<b>[日历]</b></td>");
//显示下一个月的月份
html.Append("<td width='60px' height='38px'><span id='RightSpan'>" + (Int32.Parse(DateTime.Now.Month.ToString()) + 1 == 13 ? 1 : Int32.Parse(DateTime.Now.Month.ToString()) + 1) + "月</span>");
//给向右的图片添加一个click事件
html.Append("<a href='#'><img id='right' src='Images/SJ_Right.gif' οnclick='getright()' style='border:none;'/></a></td></tr></table>");
//结束table
html.Append("</table>");
//在创建一个table
html.Append("<table width='490px' border='0' cellpadding='1' cellspacing='1' class='Time_List'>");
//创建thead
html.Append("<thead><tr><th>星期日</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th></tr></thead>");
//遍历当前月份1号星期几
switch (dayOfWeek)
{
case "Monday":
html.Append("<tr>");
for (int j = 0; j < 1; j++)
{
//星期一之前无日期
html.Append("<td> </td>");
}
//循环添加本月日期
for (int i = 0; i < daysOfMonth; i++)
{
if ((i + 1) % 7 == 0)
{
//换行
html.Append("</tr><tr>");
}
//当天日历高亮显示
if (i == day - 1)
{
html.Append("<td class='hlight'>" + (i + 1) + "</td>");
}
//星期六和星期天高亮
else if ((i + 2) % 7 == 0 || (i + 1) % 7 == 0)
{
html.Append("<td class='light'>" + (i + 1) + "</td>");
}
else
{
html.Append("<td>" + (i + 1) + "</td>");
}
}
html.Append("</tr></table></div>");
break;
case "Tuesday":
html.Append("<tr>");
for (int j = 0; j < 2; j++)
{
//星期二之前无日期
html.Append("<td> </td>");
}
//循环添加本月日期
for (int i = 0; i < daysOfMonth; i++)
{
if ((i + 2) % 7 == 0)
{
//换行
html.Append("</tr><tr>");
}
//当天日历高亮显示
if (i == day - 1)
{
html.Append("<td class='hlight'>" + (i + 1) + "</td>");
}
//星期六和星期天高亮
else if ((i + 3) % 7 == 0 || (i + 2) % 7 == 0)
{
html.Append("<td class='light'>" + (i + 1) + "</td>");
}
else
{
html.Append("<td>" + (i + 1) + "</td>");
}
}
html.Append("</tr></table></div>");
break;
case "Wednesday":
html.Append("<tr>");
for (int j = 0; j < 3; j++)
{
//星期三之前无日期
html.Append("<td> </td>");
}
//循环添加本月日期
for (int i = 0; i < daysOfMonth; i++)
{
if ((i + 3) % 7 == 0)
{
//换行
html.Append("</tr><tr>");
}
//当天日历高亮显示
if (i == day - 1)
{
html.Append("<td class='hlight'>" + (i + 1) + "</td>");
}
//星期六和星期天高亮
else if ((i + 4) % 7 == 0 || (i + 3) % 7 == 0)
{
html.Append("<td class='light'>" + (i + 1) + "</td>");
}
else
{
html.Append("<td>" + (i + 1) + "</td>");
}
}
html.Append("</tr></table></div>");
break;
case "Thursday":
html.Append("<tr>");
for (int j = 0; j < 4; j++)
{
//星期四之前无日期
html.Append("<td> </td>");
}
//循环添加本月日期
for (int i = 0; i < daysOfMonth; i++)
{
if ((i + 4) % 7 == 0)
{
//换行
html.Append("</tr><tr>");
}
//当天日历高亮显示
if (i == day - 1)
{
html.Append("<td class='hlight'>" + (i + 1) + "</td>");
}
//星期六和星期天高亮显示
else if ((i + 5) % 7 == 0 || (i + 4) % 7 == 0)
{
html.Append("<td class='light'>" + (i + 1) + "</td>");
}
else
{
html.Append("<td>" + (i + 1) + "</td>");
}
}
html.Append("</tr></table></div>");
break;
case "Friday":
html.Append("<tr>");
for (int j = 0; j < 5; j++)
{
//星期五之前无日期
html.Append("<td> </td>");
}
//循环添加本月日期
for (int i = 0; i < daysOfMonth; i++)
{
if ((i + 5) % 7 == 0)
{
//换行
html.Append("</tr><tr>");
}
//当天日历高亮显示
if (i == day - 1)
{
html.Append("<td class='hlight'>" + (i + 1) + "</td>");
}
//星期六和星期天高亮
else if ((i + 6) % 7 == 0 || (i + 5) % 7 == 0)
{
html.Append("<td class='light'>" + (i + 1) + "</td>");
}
else
{
html.Append("<td>" + (i + 1) + "</td>");
}
}
html.Append("</tr></table></div>");
break;
case "Saturday":
html.Append("<tr>");
for (int j = 0; j < 6; j++)
{
//星期六之前无日期
html.Append("<td> </td>");
}
//循环添加本月日期
for (int i = 0; i < daysOfMonth; i++)
{
if ((i + 6) % 7 == 0)
{
//换行
html.Append("</tr><tr>");
}
//当天日历高亮显示
if (i == day - 1)
{
html.Append("<td class='hlight'>" + (i + 1) + "</td>");
}
//星期六和星期天高亮
else if (i % 7 == 0 || (i + 6) % 7 == 0)
{
html.Append("<td class='light'>" + (i + 1) + "</td>");
}
else
{
html.Append("<td>" + (i + 1) + "</td>");
}
}
html.Append("</tr></table></div>");
break;
case "Sunday":
//循环添加本月日期
for (int i = 0; i < daysOfMonth; i++)
{
if (i == 0)
{
html.Append("<tr>");
}
if (i % 7 == 0 && i > 0)
{
//换行
html.Append("</tr><tr>");
}
//当天日历高亮显示
if (i == day - 1)
{
html.Append("<td class='hlight'>" + (i + 1) + "</td>");
}
//星期六和星期天高亮
else if ((i + 1) % 7 == 0 || i % 7 == 0)
{
html.Append("<td class='light'>" + (i + 1) + "</td>");
}
else
{
html.Append("<td>" + (i + 1) + "</td>");
}
}
html.Append("</tr></table></div>");
break;
}
return html.ToString();
}
3.TimeListCss.css样式
body
{
color: #333;
font-size: 12px;
font-family: "宋体" , "Arial, Helvetica, sans-serif";
}
/*日期*/
.TimeList
{
float: left;
width: 498px;
height: 250px;
}
.Time_Go td
{
font-weight: bold;
color: #000;
}
.Time_Go img
{
float: left;
width: 10px;
height: 11px;
margin: 0 12px 0 0px;
}
.Time_Go span
{
float: left;
margin-right: 12px;
font-weight: normal;
}
.Time_Go b
{
color: #ff6500;
}
.Time_List
{
background-color: #ccc;
}
.Time_List td
{
background-color: #fcfafb;
height: 35px;
text-align: right;
padding-right: 4px;
color: #777;
width: 66px;
}
.Time_List th
{
text-align: center;
height: 30px;
line-height: 30px;
background-color: #fcfafb;
font-weight: normal;
color: #333;
}
.Time_List p
{
color: #349900;
text-decoration: underline;
}
.Time_List .light
{
color:Red;
}
.Time_List .hlight
{
background-color:Yellow;
}
4.TimeListJs.js(jQuery写的js文件)
//向前一个月
function getleft() {
//取当前年当前月span标签中内容
var datetime = $("#NowYearFont").text() + "-" + $("#NowMonthFont").text();
//Ajax请求
$.ajax({
type: "Post",
url: "TimeListAjax.ashx?Datetime=" + datetime + "&Type=2",
contentType: "application/json; charset=utf-8",
success: function(datas) {
//取当前月的下一个月的值
var s = $("#LeftSpan").text().substring(0, parseInt($("#LeftSpan").text().length));
//返回信息填充div
$("#ShowDiv").html(datas);
//改变显示的年份和月份信息
$("#RightSpan").html(parseInt(s) + 1 + "月");
$("#LeftSpan").html(parseInt(s) - 1 + "月");
$("#NowMonthFont").html(parseInt(s));
$("#NowYearFont").html(datetime.substring(0, 4));
//当前月份的前一个月是1月份时
if (parseInt(s) == 1) {
$("#LeftSpan").html(12 + "月");
}
//当前月的前一个月是11月份时
if (parseInt(s) == 11) {
$("#RightSpan").html(parseInt(12) + "月");
}
//当前月的前一个月是12月份时
if (parseInt(s) == 12) {
$("#NowMonthFont").html(parseInt(s));
$("#NowYearFont").html(parseInt($("#NowYearFont").text()) - 1);
$("#RightSpan").html(1 + "月");
}
}
})
}
//向后一个月
function getright() {
//取当前年当前月span标签中内容
var datetime = $("#NowYearFont").text() + "-" + $("#NowMonthFont").text();
//Ajax请求
$.ajax({
type: "Post",
url: "TimeListAjax.ashx?datetime=" + datetime + "&" + "Type=1",
contentType: "application/json; charset=utf-8",
success: function(datas) {
//取当前月的下一个月的值
var s = $("#RightSpan").text().substring(0, parseInt($("#RightSpan").text().length));
//返回信息填充div
$("#ShowDiv").html(datas);
//改变显示的年份和月份信息
$("#RightSpan").html(parseInt(s) + 1 + "月");
$("#LeftSpan").html(parseInt(s) - 1 + "月");
$("#NowMonthFont").html(parseInt(s));
$("#NowYearFont").html(datetime.substring(0, 4));
//当前月份的下面一个月是1月份时
if (parseInt(s) == 1) {
$("#NowMonthFont").html(parseInt(s));
$("#NowYearFont").html(parseInt($("#NowYearFont").text()) + 1);
$("#LeftSpan").html(parseInt(12) + "月");
}
//当前月的下面一个月是12月份时
if (parseInt(s) == 12) {
$("#RightSpan").html(1 + "月");
}
}
})
}
5.TimeListAjax.ashx(Ajax调用的一般处理程序)
<%@ WebHandler Language="C#" Class="TimeListAjax" %>
using System;
using System.Web;
using System.Text;
public class TimeListAjax : IHttpHandler {
//Ajax请求部分
public void ProcessRequest (HttpContext context) {
//当前日历显示的年
int year = Int32.Parse(context.Request.QueryString["Datetime"].ToString().Substring(0, 4));
//当前日历显示的月
int month = Int32.Parse(context.Request.QueryString["Datetime"].ToString().Substring(5, context.Request.QueryString["Datetime"].ToString().Length - 5));
//向后下一个月
if (context.Request.QueryString["Type"] == "1")
{
//月份12月份的时候
if (month + 1 == 13)
{
month = 0;
year++;
}
//传入要绘制的日期的年
ReturnHtml(year,month+1, context);
}
//向左上一个月
if (context.Request.QueryString["Type"] == "2")
{
//月份1月份的时候
if (month - 1 == 0)
{
month = 13;
year--;
}
//传入要绘制的日期的年月
ReturnHtml(year, month - 1, context);
}
}
/// <summary>
/// 返回绘制好的日历
/// </summary>
/// <param name="year">要绘制的年份</param>
/// <param name="month">要绘制的月份</param>
/// <param name="context"></param>
public void ReturnHtml(int year,int month, HttpContext context)
{
context.Response.Write(GetHtml(year,month));
}
/// <summary>
/// 绘制指定日期的日历
/// </summary>
/// <param name="year">要绘制的年份</param>
/// <param name="month">要绘制的月份</param>
/// <returns></returns>
private string GetHtml(int year,int month)
{
//当前日期
DateTime date = DateTime.Parse(DateTime.Now.ToString());
//计算要绘制的年月的1号星期几
string dayOfWeek = DateTime.Parse(year + "-" + month + "-01").DayOfWeek.ToString();
//计算要绘制的年月的天数
int daysOfMonth = DateTime.DaysInMonth(year, month);
//定义StringBuilder
StringBuilder html = new StringBuilder();
//创建一个div
html.Append("<div class='TimeList'>");
//创建一个table(一行三列的table)
html.Append("<table width='490px' border='0' align='center' cellpadding='0' cellspacing='0' class='Time_Go'>");
//给向左的图片添加一个click事件
html.Append("<tr><td width='60px' height='38px'><a href='#'><img id='left' src='Images/SJ_Left.gif' οnclick='getleft();' style='border:none;' /></a>");
//显示前一个月的月份
html.Append("<span id='LeftSpan'>" + (Int32.Parse(DateTime.Now.Month.ToString()) - 1 == 0 ? 12 : Int32.Parse(DateTime.Now.Month.ToString()) - 1) + "月</span></td>");
//显示当前年和月份
html.Append("<td width='370px' align='center'><font id='NowYearFont'>" + DateTime.Now.Year.ToString() + "</font>年<font id='NowMonthFont'>" + DateTime.Now.Month.ToString() + "</font>月<b>[日历]</b></td>");
//显示下一个月的月份
html.Append("<td width='60px' height='38px'><span id='RightSpan'>" + (Int32.Parse(DateTime.Now.Month.ToString()) + 1 == 13 ? 1 : Int32.Parse(DateTime.Now.Month.ToString()) + 1) + "月</span>");
//给向右的图片添加一个click事件
html.Append("<a href='#'><img id='right' src='Images/SJ_Right.gif' οnclick='getright()' style='border:none;'/></a></td></tr></table>");
//结束table
html.Append("</table>");
//在创建一个table
html.Append("<table width='490px' border='0' cellpadding='1' cellspacing='1' class='Time_List'>");
//创建thead
html.Append("<thead><tr><th>星期日</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th></tr></thead>");
//遍历要绘制的月份1号星期几
switch (dayOfWeek)
{
case "Monday":
html.Append("<tr>");
for (int j = 0; j < 1; j++)
{
//星期一之前无日期
html.Append("<td> </td>");
}
//循环添加本月日期
for (int i = 0; i < daysOfMonth; i++)
{
if ((i + 1) % 7 == 0)
{
//换行
html.Append("</tr><tr>");
}
//当天日历高亮显示
if (year == date.Year && month == date.Month && i == date.Day - 1)
{
html.Append("<td class='hlight'>" + (i + 1) + "</td>");
}
//星期六和星期天高亮
else if ((i + 2) % 7 == 0 || (i + 1) % 7 == 0)
{
html.Append("<td class='light'>" + (i + 1) + "</td>");
}
else
{
html.Append("<td>" + (i + 1) + "</td>");
}
}
html.Append("</tr></table></div>");
break;
case "Tuesday":
html.Append("<tr>");
for (int j = 0; j < 2; j++)
{
//星期二之前无日期
html.Append("<td> </td>");
}
//循环添加本月日期
for (int i = 0; i < daysOfMonth; i++)
{
if ((i + 2) % 7 == 0)
{
//换行
html.Append("</tr><tr>");
}
//当天日历高亮显示
if (year == date.Year && month == date.Month && i == date.Day - 1)
{
html.Append("<td class='hlight'>" + (i + 1) + "</td>");
}
//星期六和星期天高亮
else if ((i + 3) % 7 == 0 || (i + 2) % 7 == 0)
{
html.Append("<td class='light'>" + (i + 1) + "</td>");
}
else
{
html.Append("<td>" + (i + 1) + "</td>");
}
}
html.Append("</tr></table></div>");
break;
case "Wednesday":
html.Append("<tr>");
for (int j = 0; j < 3; j++)
{
//星期三之前无日期
html.Append("<td> </td>");
}
//循环添加本月日期
for (int i = 0; i < daysOfMonth; i++)
{
if ((i + 3) % 7 == 0)
{
//换行
html.Append("</tr><tr>");
}
//当天日历高亮显示
if (year == date.Year && month == date.Month && i == date.Day - 1)
{
html.Append("<td class='hlight'>" + (i + 1) + "</td>");
}
//星期六和星期天高亮
else if ((i + 4) % 7 == 0 || (i + 3) % 7 == 0)
{
html.Append("<td class='light'>" + (i + 1) + "</td>");
}
else
{
html.Append("<td>" + (i + 1) + "</td>");
}
}
html.Append("</tr></table></div>");
break;
case "Thursday":
html.Append("<tr>");
for (int j = 0; j < 4; j++)
{
//星期四之前无日期
html.Append("<td> </td>");
}
//循环添加本月日期
for (int i = 0; i < daysOfMonth; i++)
{
if ((i + 4) % 7 == 0)
{
//换行
html.Append("</tr><tr>");
}
//当天日历高亮显示
if (year == date.Year && month == date.Month && i == date.Day - 1)
{
html.Append("<td class='hlight'>" + (i + 1) + "</td>");
}
//星期六和星期天高亮显示
else if ((i + 5) % 7 == 0 || (i + 4) % 7 == 0)
{
html.Append("<td class='light'>" + (i + 1) + "</td>");
}
else
{
html.Append("<td>" + (i + 1) + "</td>");
}
}
html.Append("</tr></table></div>");
break;
case "Friday":
html.Append("<tr>");
for (int j = 0; j < 5; j++)
{
//星期五之前无日期
html.Append("<td> </td>");
}
//循环添加本月日期
for (int i = 0; i < daysOfMonth; i++)
{
if ((i + 5) % 7 == 0)
{
//换行
html.Append("</tr><tr>");
}
//当天日历高亮显示
if (year == date.Year && month == date.Month && i == date.Day - 1)
{
html.Append("<td class='hlight'>" + (i + 1) + "</td>");
}
//星期六和星期天高亮
else if ((i + 6) % 7 == 0 || (i + 5) % 7 == 0)
{
html.Append("<td class='light'>" + (i + 1) + "</td>");
}
else
{
html.Append("<td>" + (i + 1) + "</td>");
}
}
html.Append("</tr></table></div>");
break;
case "Saturday":
html.Append("<tr>");
for (int j = 0; j < 6; j++)
{
//星期六之前无日期
html.Append("<td> </td>");
}
//循环添加本月日期
for (int i = 0; i < daysOfMonth; i++)
{
if ((i + 6) % 7 == 0)
{
//换行
html.Append("</tr><tr>");
}
//当天日历高亮显示
if (year == date.Year && month == date.Month && i == date.Day - 1)
{
html.Append("<td class='hlight'>" + (i + 1) + "</td>");
}
//星期六和星期天高亮
else if (i % 7 == 0 || (i + 6) % 7 == 0)
{
html.Append("<td class='light'>" + (i + 1) + "</td>");
}
else
{
html.Append("<td>" + (i + 1) + "</td>");
}
}
html.Append("</tr></table></div>");
break;
case "Sunday":
//循环添加本月日期
for (int i = 0; i < daysOfMonth; i++)
{
if (i == 0)
{
html.Append("<tr>");
}
if (i % 7 == 0 && i > 0)
{
//换行
html.Append("</tr><tr>");
}
//当天日历高亮显示
if (year == date.Year && month == date.Month && i == date.Day - 1)
{
html.Append("<td class='hlight'>" + (i + 1) + "</td>");
}
//星期六和星期天高亮
else if ((i + 1) % 7 == 0 || i % 7 == 0)
{
html.Append("<td class='light'>" + (i + 1) + "</td>");
}
else
{
html.Append("<td>" + (i + 1) + "</td>");
}
}
html.Append("</tr></table></div>");
break;
}
return html.ToString();
}
public bool IsReusable {
get {
return false;
}
}
}
以上是我写的代码,贴出来跟大家分享,注释都写好了,希望能帮助到大家,初次发表博客,希望能帮到大家,我会把我的Demo上传到资源里面,供大家下载参考,不要资源分,O(∩_∩)O~呵呵,如果有高手来访,希望能给点指点,O(∩_∩)O谢谢O(∩_∩)O谢谢万分感谢,我只是个啥都不是很懂的新手菜鸟,希望能得到大家的指点帮助,慢慢的提高,菜鸟变老鸟(⊙o⊙)(⊙o⊙)(⊙o⊙)(⊙o⊙).........