Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to implement the Jquery blog Calendar Control in the .net mvc page UI". In the daily operation, I believe that many people have doubts about how to realize the Jquery blog Calendar Control in the .net mvc page UI. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to realize the Jquery blog Calendar Control in the .net mvc page UI". Next, please follow the editor to study!

First, the effect picture

II. Page file

Tags need to be added to the page.

3. JS code

The copy code is as follows:

/ / JavaScript calendar

$(document) .ready (function () {

/ / current time

$now = new Date (); / / current time

$nowYear = $now.getFullYear (); / / current year

$nowMonth = $now.getMonth (); / / current month

$nowDate = $now.getDate (); / / current date

$nowMonthCn = monthCn ($nowMonth); / / formatted month

/ / set the current time for the first time

CalOpt ($now)

/ / Last month mouse click event

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

});

/ / mouse click event next month

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

});

/ / turn off calendar mouse click events

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

$('# cal'). Html (')

('# cal'). Hide ()

Return false

});

});

/ / is it in the array? Return subscript + 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 =''

Html + =''

Html + ='>'

Html + =''

/ / Show week title

Html + =''

For (var I = 0; I < 7; iTunes +) {

Html + =''+ dayCn (I) +''

}

Html + =''

/ / display day

For (var row = 1; row lDate) {

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

For (var I = 0; I < $next_dayNum; $next_dayNum--) {

Html + =''+ $next_dayN +''

$next_dayN++

}

Break

}

}

Html + =''

}

/ / end output table

Html + =''

Html + = 'off'

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

}

IV. CSS file

The copy code is as follows:

@ CHARSET "UTF-8"

* {

List-style: none

Margin: 0px

Padding: 0px

}

Img {

Border: 0

}

A {

Text-decoration: none

Color: # 666

}

A:hover {

Text-decoration: none

}

/ *

/ * Calendar Div global style * /

# cal {

Width: 245px

}

# cal_bottom {

Padding: 2px

Border-top: 0

Text-align: right

}

/ * Calendar Table style * /

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%

}

/ * current daily style * /

.now _ date {

Background: # BBB

}

/ * style before and after month * /

.prev _ dayN, .next _ dayN {

Color: # CCC

}

/ * active data style * /

.activity {

}

.activity a {

Color: # 2F76AC

Text-decoration: underline

}

5. Background code

The copy code is as follows:

/ / Calendar control gets the day of the article published in the current month

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 ("select id,createtime from article where mid='" + userId + "'and to_char (createtime,'YYYYMM') ='" + curMonth + "") .ToList ()

Int iTunes 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 (','); / / get an array of 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 + "'}")

}

}

ITunes +

}

Output.Append (");"

Return Json (output.ToString ())

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

}

At this point, the study on "how to implement the Jquery blog Calendar Control in the .net mvc page UI" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.