欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-02-28 09:03:22
一、效果图 二、页面文件 页面上需要添加
标记。 三、js代码 复制代码 代码如下:// java...

一、效果图

.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: '//www.jb51.net' },  { hdongd: 14, hdongurl: 'http://play.jb51.net' });");

        }