jquery calendar
来源：互联网 发布：网络慈善活动策划方案 编辑：程序博客网 时间：2024/04/28 03:00
1、以下是日历源码：
(function ($) { function calendarWidget(el, params) { var now = new Date(); var thismonth = now.getMonth(); var thisyear = now.getYear() + 1900; var opts = { month: thismonth, year: thisyear, prev_month_display:'<<', next_month_display:'>>' }; $.extend(opts, params); var monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']; var dayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; month = i = parseInt(opts.month); year = parseInt(opts.year); var m = 0; var table = ''; //original begin //// next month //if (month == 11) { //var next_month = '<a href="?month=' + 1 + '&year=' + (year + 1) + '" title="' + monthNames[0] + ' ' + (year + 1) + '">' + monthNames[0] + ' ' + (year + 1) + '</a>'; //} else { //var next_month = '<a href="?month=' + (month + 2) + '&year=' + (year) + '" title="' + monthNames[month + 1] + ' ' + (year) + '">' + monthNames[month + 1] + ' ' + (year) + '</a>'; //} // //// previous month //if (month == 0) { //var prev_month = '<a href="?month=' + 12 + '&year=' + (year - 1) + '" title="' + monthNames[11] + ' ' + (year - 1) + '">' + monthNames[11] + ' ' + (year - 1) + '</a>'; //} else { //var prev_month = '<a href="?month=' + (month) + '&year=' + (year) + '" title="' + monthNames[month - 1] + ' ' + (year) + '">' + monthNames[month - 1] + ' ' + (year) + '</a>'; //} //original end //new code begin var prevmonth = null; var prevyear = null; var nextmonth = null; var nextyear = null; //next_month if (month == 11) { nextmonth = 0; nextyear = (year + 1); var next_month = '<a id="next_month" href="#" val="{month:0,year:' + (year + 1) + '}" title="' + monthNames[0] + ' ' + (year + 1) + '">' + opts.next_month_display + '</a>'; } else { nextmonth = (month + 1); nextyear = (year); var next_month = '<a id="next_month" href="#" val="{month:' + (month + 1) + ',year:' + (year) + '}" title="' + monthNames[month + 1] + ' ' + (year) + '">' + opts.next_month_display + '</a>'; } // previous month if (month == 0) { prevmonth = 11; prevyear = (year - 1); var prev_month = '<a id="prev_month" href="#" val="{month:11,year:' + (year - 1) + '}" title="' + monthNames[11] + ' ' + (year - 1) + '">'+opts.prev_month_display+'</a>'; } else { prevmonth = (month - 1); prevyear = (year); var prev_month = '<a id="prev_month" href="#" val="{month:' + (month - 1) + ',year:' + (year) + '}" title="' + monthNames[month - 1] + ' ' + (year) + '">'+opts.prev_month_display+'</a>'; } //new code end //table += ('<h3 id="current-month">' + monthNames[month] + ' ' + year + '</h3>'); // uncomment the following lines if you'd like to display calendar month based on 'month' and 'view' paramaters from the URL //table += "<div id='nav_container'>"; //table += ('<div class="nav-prev" id="nav_prev_month">' + prev_month + '</div>'); //table += ('<div id="nav_current_month">' + year + '年' + monthNames[month] + '</div>'); // table += ('<div class="nav-next" id="nav_next_month">' + next_month + '</div>'); //table += "</div>"; //add for jiang //table += "<div><a href=''>上个月</a><a href='#' style='margin-left:60%'>下个月</a></div>" //add end table += ('<table style="clear:both;" class="calendar-month " ' + 'id="calendar-month' + i + ' " cellspacing="0">'); table += '<tr> \ <th style="background-color:#C0C0C0;"><div class="nav-prev" id="nav_prev_month">' + prev_month + '</div></th> \ <th style="background-color:#C0C0C0;" colspan="5"><div id="nav_current_month">' + year + '年' + monthNames[month] + '</div></th> \ <th style="background-color:#C0C0C0;"><div class="nav-next" id="nav_next_month">' + next_month + '</div></th> \ </tr>'; table += '<tr>'; for (d = 0; d < 7; d++) { table += '<th class="weekday">' + dayNames[d] + '</th>'; } table += '</tr>'; var days = getDaysInMonth(month, year); var firstDayDate = new Date(year, month, 1); var firstDay = firstDayDate.getDay(); var prev_days = getDaysInMonth(month, year); var firstDayDate = new Date(year, month, 1); var firstDay = firstDayDate.getDay(); var prev_m = month == 0 ? 11 : month - 1; var prev_y = prev_m == 11 ? year - 1 : year; var prev_days = getDaysInMonth(prev_m, prev_y); firstDay = (firstDay == 0 && firstDayDate) ? 7 : firstDay; var i = 0; var title = ""; var cell = {}; for (j = 0; j < 42; j++) { if ((j < firstDay)) {//before this month day title = prevyear + '-' + leftpad(String(prevmonth), '0', 2) + '-' + leftpad(String((prev_days - firstDay + j + 1)), '0', 2); cell.title = title; cell.content = '<span class="day">' + (prev_days - firstDay + j + 1) + '</span>'; cell.style = ''; if (typeof opts.onCellInit === "function") { opts.onCellInit(cell); } table += ('<td style="' + cell.style + '" title="' + cell.title + '" class="other-month">' + cell.content + '</td>'); } else if ((j >= firstDay + getDaysInMonth(month, year))) {//after this month day i = i + 1; title = nextyear + '-' + leftpad(String(nextmonth), '0', 2) + '-' + leftpad(String(i), '0', 2); cell.title = title; cell.content = '<span class="day">' + i + '</span>'; cell.style = ''; if (typeof opts.onCellInit === "function") { opts.onCellInit(cell); } table += ('<td style="' + cell.style + '" title="' + cell.title + '" class="other-month">' + cell.content + '</td>'); } else {//this month day title = thisyear + '-' + leftpad(String(thismonth), '0', 2) + '-' + leftpad(String((j - firstDay + 1)), '0', 2); cell.title = title; cell.content = '<span class="day">' + (j - firstDay + 1) + '</span>'; cell.style = ''; if (typeof opts.onCellInit === "function") { opts.onCellInit(cell); } if ((j - firstDay + 1) == now.getDate() && opts.year == thisyear && opts.month == thismonth) table += ('<td style="' + cell.style + '" title="' + cell.title + '" class="current-month current-day">' + cell.content + '</td>'); else table += ('<td style="' + cell.style + '" title="' + cell.title + '" class="current-month day">' + cell.content + '</td>'); } if (j % 7 == 6) table += ('</tr>'); } table += ('</table>'); el.html(table); } function getDaysInMonth(month, year) { var daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; if ((month == 1) && (year % 4 == 0) && ((year % 100 != 0) || (year % 400 == 0))) { return 29; } else { return daysInMonth[month]; } } //mount event function mountEvent(el, params) { el.delegate("#prev_month", "click", function () { eval("var param=" + $(this).attr("val")); if (typeof params === "object") { $.extend(params,param); } calendarWidget(el, params); }); el.delegate("#next_month", "click", function () { eval("var param=" + $(this).attr("val")); if (typeof params === "object") { $.extend(params, param); } calendarWidget(el, params); }); } //mount css function mountCss(el, params) { el.delegate("td", "click", function () { //恢复样式 if (typeof window.lastSelectedDate !== "undefined") { window.lastSelectedDate.removeClass(); //删除样式 window.lastSelectedDate.attr("style", window.lastStyle); //恢复style window.lastSelectedDate.addClass(window.lastClass); //恢复class } //存储当前样式 window.lastSelectedDate = $(this); window.lastStyle = $(this).attr("style"); window.lastClass = $(this).attr("class"); //改变当前样式 $(this).removeClass(); //删除类选择器 $(this).removeAttr("style"); //删除当前样式 $(this).addClass("selected-day"); //添加类选择器 if (typeof params.onSelectedDay === "function") { params.onSelectedDay(this, $(this).attr("title")); } }); //css code var calendarcss = "<style type='text/css'> \ a{text-decoration:none;}\ .selected-day \ { \ color:#CCFF99; \ background-color:#6495ED; \ font-weight:bold; \ } \ .current-day \ { \ background-color:#FAFAD2; \ }\ #" + el.attr("id") + " #nav_container \ { \ height:20px; \ width:848px; \ } \ #" + el.attr("id") + " #nav_container #nav_prev_month \ { } \ #" + el.attr("id") + " #nav_container #nav_current_month \ { } \ #" + el.attr("id") + " #nav_container #nav_next_month \ { } \ #" + el.attr("id") + " table td, th \ { \ border-left: 1px solid #999; \ border-bottom: 1px solid #999; \ padding: 10px 0; \ text-align: center; \ } \ #" + el.attr("id") + " table \ { \ border-right: 1px solid #999; \ border-top: 1px solid #999; \ } \ #" + el.attr("id") + " table th \ { \ background: #666; \ color: #fff; \ } \ .other-month \ { \ background: #eee; \ } \ </style>"; $("head").append(calendarcss); } //左填充字符 //str:原始字符,tag:填充字符,len:填充后长度 function leftpad(str, tag, len) { if (str.length < len) { var lef = new Array(len - str.length); for (var i = 0; i < lef.length; i++) { lef[0] = tag; } return lef.join("") + str; } return str; } // jQuery plugin initialisation $.fn.calendarWidget = function (params) { calendarWidget(this, params); mountEvent(this,params); //挂载事件 var opts = {}; $.extend(opts, params); if (typeof opts.enabledcss === "undefined") opts.enabledcss = true; if (opts.enabledcss) mountCss(this, params); //挂载Css return this; };})(jQuery);2、使用页面：
<!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> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="js/jquery.calendar-widget.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#mycalendar").calendarWidget({ enabledcss: "true", onSelectedDay: function (sender, title) { alert(title); }, onCellInit: function (cell) { cell.style = "width:120px;"; } }); }); </script></head><body> <div id="mycalendar"></div></body></html>3、运行效果：
- jquery calendar
- jquery calendar
- create calendar by jquery
- jQuery Frontier Calendar简介
- jquery日程控件(Calendar)
- jquery-easyui Calendar 日历中文
- jQuery日历插件编写jquery.calendar.js
- Fullcalendar - Full-sized Calendar jQuery Plugin
- calendar
- calendar
- Calendar
- Calendar
- calendar
- Calendar
- Calendar
- Calendar
- Calendar
- Calendar
- [leetcode刷题系列]Search Insert Position
- 【Drainage Ditches 草地排水】
- UVA 10112 - Myacm Triangles
- 有限状态机(FSM)——《C++编程风格》读书笔记（六）
- QQ空间人气精灵王 QQ空间人气提升
- jquery calendar
- ——printf和fprintf
- K&R书评
- 多重继承——《C++编程风格》读书笔记（七）
- VMWare安装Ubuntu 12.04开启虚拟机的Unity Mode模式
- HDU 4625 JZPTREE
- 关于musicbox的撰写
- 研究一下 c语言中 的 对齐 补齐
- 尽量不要在生产环境代码中使用boost::this_thread::sleep
