.net mvc页面UI之Jquery博客日历控件实现代码

一、效果图

二、页面文件

页面上需要添加<div id="cal"></div>标记。

三、JS代码

代码如下:

// JavaScript 日历

$(document).ready(function () {

//当前时间

$now = new Date();                      //当前的时间

$nowYear = $now.getFullYear();          //当前的年

$nowMonth = $now.getMonth();            //当前的月

$nowDate = $now.getDate();              //当前的日

$nowMonthCn = monthCn($nowMonth);       //格式化后的月

//第一次设置当前时间

calOpt($now);

//上个月鼠标点击事件

$('#prevMonth').live('click', function () {

var year_text = $('.thisYear').text();

var month_text = $('.thisMonth').text() - 2;

var date_text = $('.thisDate').text();

$('#cal').html('');

var d = new Date(year_text, month_text, date_text);

calOpt(d);

return false;

});

//下个月鼠标点击事件

$('#nextMonth').live('click', function () {

var year_text = $('.thisYear').text();

var month_text = $('.thisMonth').text();

var date_text = $('.thisDate').text();

$('#cal').html('');

var d = new Date(year_text, month_text, date_text);

calOpt(d);

return false;

});

//关闭日历鼠标点击事件

$('#cal_close').live('click', function () {

$('#cal').html('');

$('#cal').hide();

return false;

});

});

//是否在数组中？返回下标+1

function inArray(val, arr) {

for (var index = 0; index < arr.length; index++) {

if (val == arr[index]) {

return index + 1;

}

}

return false;

}

//获取月份对应中文

function monthCn(month) {

var m = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);

return m[month];

}

//获取星期对应中文

function dayCn(day) {

var w = new Array('日', '一', '二', '三', '四', '五', '六');

return w[day];

}

//获取选择月对应的实际天数（也是本月的最后一天）

function getDates(year, month) {

var d = new Date(year, month, 0).getDate();

return d;

}

//选择月的上个月的记录第几天

function prevDay(year, month, date) {

var y = year;

var m = month - 1;

var d = -(date - 2);

var p = new Date(y, m, d).getDate();

return p;

}

//选择月的下个月的记录第几天

function nextDay(year, month, date) {

var y = year;

var m = month;

var d = 1;

var p = new Date(y, m, d).getDate();

return p;

}

//活动数组数据解析--日期

function jsonDate(data) {

var j = new Array();

for (var i = 0; i < data.length; i++) {

j.push(data[i].hDongD);

}

return j;

}

//活动数组数据解析--网址

function jsonUrl(data) {

var j = new Array();

for (var i = 0; i < data.length; i++) {

j.push(data[i].hDongUrl);

}

return j;

}

//设置日历参数

function calOpt(date) {

//获取选择系统时间

var $year = date.getFullYear();         //年

var $month = date.getMonth();           //月

var $date = date.getDate();             //日

var $day = date.getDay();               //星期

var $monthCn = monthCn($month);         //格式化后的月

//获取选择月的第一天对应的星期数+1

var $fDay = new Date($year, $month, 1).getDay() + 1;

//获取选择月对应的实际天数（也是本月的最后一天）

var $lDate = getDates($year, $monthCn);

//  alert('年：'+$year+'\n月：'+$monthCn+'\n日：'+$date+'\n选择月的第一天对应的星期数：'+$fDay+'\n选择月的最后一天：'+$lDate);

//获取活动数组数据并输出日历

//var test = new Array(

//    { hDongD: 4, hDongUrl: 'http://www.ipiao.com' },

//    { hDongD: 14, hDongUrl: 'http://www.1.com' }

//);

$.ajax({

type:'post',

url: "/PubConfig/getCalandDay",

data:{'year':$year,'month':$monthCn},

dataType:'json',

success: function (result) {

if(result == null){     //如果无活动数组数据，则声明一个空数据

result = new Array();

}

calShow($fDay, $lDate, $date, $monthCn, $year, eval(result));

},

error: function (XMLHttpRequest, textStatus, errorThrown) { //发送失败事件

alert(textStatus);

}

});

}

/*

输出日历

参数1：选择月的第一天对应的星期数+1;

参数2：选择月的最后一天;

参数3：选择的日;

参数4：选择的月;

参数5：选择的年;

参数6：活动数组数据;

*/

function calShow(fDay, lDate, date, monthCn, year, data) {

var $dayN = 1;      //记录第几天

var $dayTd = 1;     //记录第几天的TD

var $rowMax = Math.ceil((lDate + fDay - 1) / 7);  //总行数

var $prev_dayN = prevDay(year, monthCn, fDay);//选择月的上个月的记录第几天

var $next_dayN = nextDay(year, monthCn, fDay);//选择月的上个月的记录第几天

//显示table>tr>th

html = '<table>';

html += '<tr><th colspan=7>';

html += '<a id="prevMonth" href=""> << </a>        ';

html += '<span class="thisYear">' + year + '</span>年' + '<span class="thisMonth">' + monthCn + '</span>月<span class="thisDate">' + date + '</span>';

html += '        <a id="nextMonth" href=""> >> </a></th></tr>';

html += '</th></tr>';

//显示星期标题

html += '<tr>';

for (var i = 0; i < 7; i++) {

html += '<td>' + dayCn(i) + '</td>';

}

html += '</tr>';

//显示日

for (var row = 1; row <= $rowMax; row++) {

html += '<tr>';

for (var col = 1; col <= 7; col++) {

if ($dayTd < fDay) {

html += '<td class="prev_dayN" dayn="' + $prev_dayN + '">' + $prev_dayN + '</td>';

$dayTd++;

$prev_dayN++;

} else {

var dayIndex = inArray($dayN, jsonDate(data));

var urlIndex = jsonUrl(data)[dayIndex - 1];

//如果有活动则使用活动样式并加上活动链接

if (dayIndex) {

//如果日期为当天则用红色加粗显示

if ($dayN == date && $nowMonth + 1 == monthCn && $nowYear == year) {

html += '<td class="activity now_date" dayn="' + $dayN + '" title="点击查看当天活动"><a href="' + urlIndex + '">' + $dayN + '</a></td>';

} else {

html += '<td class="activity" dayn="' + $dayN + '" title="点击查看当天活动"><a href="' + urlIndex + '">' + $dayN + '</a></td>';

}

} else {

//如果日期为当天则用红色加粗显示

if ($dayN == date && $nowMonth + 1 == monthCn && $nowYear == year) {

html += '<td class="now_date" dayn="' + $dayN + '">' + $dayN + '</td>';

} else {

html += '<td dayn="' + $dayN + '">' + $dayN + '</td>';

}

}

$dayN++;

}

if ($dayN > lDate) {

var $next_dayNum = (row * 7 - ($dayN - 1)) - ($dayTd - 1);

for (var i = 0; i < $next_dayNum; $next_dayNum--) {

html += '<td class="next_dayN" dayn="' + $next_dayN + '">' + $next_dayN + '</td>';

$next_dayN++;

}

break;

}

}

html += '</tr>';

}

//结束输出table

html += '</table>';

html += '<div id="cal_bottom"><a id="cal_close" href="">关闭</a></div>';

$('#cal').append(html);

}

四、CSS文件

代码如下:

@CHARSET "UTF-8";

* {

list-style: none;

margin: 0px;

padding: 0px;

}

img {

border: 0;

}

a {

text-decoration: none;

color: #666;

}

a:hover {

text-decoration: none;

}

/* ================================================================================ */

/* 日历Div全局样式 */

#cal {

width: 245px;

}

#cal_bottom {

padding: 2px;

border-top: 0;

text-align: right;

}

/* 日历Table样式 */

table {

border: 0;

border-collapse: collapse;

border-spacing: 0;

}

tr {

height: 30px;

line-height: 30px;

}

th {

font-weight: normal;

}

.thisDate {

display: none;

}

#prevMonth {

}

.nextMonth {

}

th a {

display: inline-block;

vertical-align: 1px;

}

td {

width: 35px;

text-align: center;

}

td a {

display: inline-block;

width: 100%;

height: 100%;

}

/* 当前日样式 */

.now_date {

background: #BBB;

}

/* 月前，月后样式 */

.prev_dayN, .next_dayN {

color: #CCC;

}

/* 活动数据样式 */

.activity {

}

.activity a {

color: #2F76AC;

text-decoration: underline;

}

五、后台代码

代码如下:

//日历控件获取当前月发布文章的天

public ActionResult getCalandDay(string year, string month)

{

string userId = getBlogUserId();

StringBuilder output = new StringBuilder("");

DateTime dt = System.DateTime.Now;

string curMonth = year.ToString() + (month.Length == 1 ? ("0" + month) : month);

var res = db.Database.SqlQuery<CurMonthArticleViewModel>("select id,createtime from article where mid='" + userId + "' and to_char(createtime,'YYYYMM')='" + curMonth + "'").ToList();

int i=0;

output.Append("new Array(");

foreach (var cc in res)

{

if (i == 0)

output.Append("{ hDongD:"+cc.CREATETIME.Day+", hDongUrl: '"+cc.ID+"' }");

else

{

string curDay = cc.CREATETIME.Day.ToString();

string resultDay = output.ToString();

string[] str = resultDay.Split(','); //得到一个str的数组{“1”，”2“，“3”，”4“，“5”，”6“}

Boolean c = true;

foreach (string s in str)

{

if (s == curDay) c = false;

}

if (c)

{

output.Append(",{ hDongD:" + cc.CREATETIME.Day + ", hDongUrl: '/" + cc.ID + "--" + cc.CREATETIME + "' }");

}

}

i++;

}

output.Append(");");

return Json(output.ToString());

//return Json("new Array({ hDongD: 4, hDongUrl: 'http://www.jb51.net' },  { hDongD: 14, hDongUrl: 'http://play.jb51.net' });");

}