.net mvc頁(yè)面UI之Jquery博客日歷控件實(shí)現(xiàn)代碼

一、效果圖

二、頁(yè)面文件

頁(yè)面上需要添加<div id="cal"></div>標(biāo)記。

三、JS代碼

代碼如下:
// JavaScript 日歷

$(document).ready(function () {

    //當(dāng)前時(shí)間

    $now = new Date();                      //當(dāng)前的時(shí)間

    $nowYear = $now.getFullYear();          //當(dāng)前的年

    $nowMonth = $now.getMonth();            //當(dāng)前的月

    $nowDate = $now.getDate();              //當(dāng)前的日

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

    //第一次設(shè)置當(dāng)前時(shí)間

    calOpt($now);

    //上個(gè)月鼠標(biāo)點(diǎn)擊事件

    $('#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;

    });

    //下個(gè)月鼠標(biāo)點(diǎn)擊事件

    $('#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;

    });

    //關(guān)閉日歷鼠標(biāo)點(diǎn)擊事件

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

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

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

        return false;

    });

});

//是否在數(shù)組中？返回下標(biāo)+1

function inArray(val, arr) {

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

        if (val == arr[index]) {

            return index + 1;

        }

    }

    return false;

}

//獲取月份對(duì)應(yīng)中文

function monthCn(month) {

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

    return m[month];

}

//獲取星期對(duì)應(yīng)中文

function dayCn(day) {

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

    return w[day];

}

//獲取選擇月對(duì)應(yīng)的實(shí)際天數(shù)（也是本月的最后一天）

function getDates(year, month) {

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

    return d;

}

//選擇月的上個(gè)月的記錄第幾天

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;

}

//選擇月的下個(gè)月的記錄第幾天

function nextDay(year, month, date) {

    var y = year;

    var m = month;

    var d = 1;

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

    return p;

}

//活動(dòng)數(shù)組數(shù)據(jù)解析--日期

function jsonDate(data) {

    var j = new Array();

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

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

    }

    return j;

}

//活動(dòng)數(shù)組數(shù)據(jù)解析--網(wǎng)址

function jsonUrl(data) {

    var j = new Array();

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

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

    }

    return j;

}

//設(shè)置日歷參數(shù)

function calOpt(date) {

    //獲取選擇系統(tǒng)時(shí)間

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

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

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

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

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

    //獲取選擇月的第一天對(duì)應(yīng)的星期數(shù)+1

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

    //獲取選擇月對(duì)應(yīng)的實(shí)際天數(shù)（也是本月的最后一天）

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

    //  alert('年：'+$year+'\n月：'+$monthCn+'\n日：'+$date+'\n選擇月的第一天對(duì)應(yīng)的星期數(shù)：'+$fDay+'\n選擇月的最后一天：'+$lDate);

    //獲取活動(dòng)數(shù)組數(shù)據(jù)并輸出日歷

    //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){     //如果無(wú)活動(dòng)數(shù)組數(shù)據(jù)，則聲明一個(gè)空數(shù)據(jù)

                result = new Array();

            }

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

        },

        error: function (XMLHttpRequest, textStatus, errorThrown) { //發(fā)送失敗事件

            alert(textStatus);

        }

    });

}

/*

輸出日歷

參數(shù)1：選擇月的第一天對(duì)應(yīng)的星期數(shù)+1;

參數(shù)2：選擇月的最后一天;

參數(shù)3：選擇的日;

參數(shù)4：選擇的月;

參數(shù)5：選擇的年;

參數(shù)6：活動(dòng)數(shù)組數(shù)據(jù);

*/

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

    var $dayN = 1;      //記錄第幾天

    var $dayTd = 1;     //記錄第幾天的TD

    var $rowMax = Math.ceil((lDate + fDay - 1) / 7);  //總行數(shù)

    var $prev_dayN = prevDay(year, monthCn, fDay);//選擇月的上個(gè)月的記錄第幾天

    var $next_dayN = nextDay(year, monthCn, fDay);//選擇月的上個(gè)月的記錄第幾天

    //顯示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>';

    //顯示星期標(biāo)題

    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];

                //如果有活動(dòng)則使用活動(dòng)樣式并加上活動(dòng)鏈接

                if (dayIndex) {

                    //如果日期為當(dāng)天則用紅色加粗顯示

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

                        html += '<td class="activity now_date" dayn="' + $dayN + '" title="點(diǎn)擊查看當(dāng)天活動(dòng)"><a href="' + urlIndex + '">' + $dayN + '</a></td>';

                    } else {

                        html += '<td class="activity" dayn="' + $dayN + '" title="點(diǎn)擊查看當(dāng)天活動(dòng)"><a href="' + urlIndex + '">' + $dayN + '</a></td>';

                    }

                } else {

                    //如果日期為當(dāng)天則用紅色加粗顯示

                    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>';

    }

    //結(jié)束輸出table

    html += '</table>';

    html += '<div id="cal_bottom"><a id="cal_close" href="">關(guān)閉</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%;

    }

/* 當(dāng)前日樣式 */

.now_date {

    background: #BBB;

}

/* 月前，月后樣式 */

.prev_dayN, .next_dayN {

    color: #CCC;

}

/* 活動(dòng)數(shù)據(jù)樣式 */

.activity {

}

    .activity a {

        color: #2F76AC;

        text-decoration: underline;

    }

五、后臺(tái)代碼

代碼如下:
//日歷控件獲取當(dāng)前月發(fā)布文章的天

        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(','); //得到一個(gè)str的數(shù)組{“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: '//www.gxlcms.com' },  { hDongD: 14, hDongUrl: 'http://play.jb51.net' });");

        }

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com