html日历修改,HTML精美日历插件
Html精美日历插件,包括日期选择,日期查看,星期查看等等功能。文章末尾附有演示地址。先看看效果图:
源代码:var CalendarHandler = {
currentYear: 0,
currentMonth: 0,
isRunning: false,
initialize: function() {
$calendarItem = this.CreateCalendar(0, 0, 0);
$("#Container").append($calendarItem);
$("#context").css("height", $("#CalendarMain").height() - 65 "px");
$("#center").css("height", $("#context").height() - 30 "px");
$("#selectYearDiv").css("height", $("#context").height() - 30 "px").css("width", $("#context").width() "px");
$("#selectMonthDiv").css("height", $("#context").height() - 30 "px").css("width", $("#context").width() "px");
$("#centerCalendarMain").css("height", $("#context").height() - 30 "px").css("width", $("#context").width() "px");
$calendarItem.css("height", $("#context").height() - 30 "px"); //.css("visibility","hidden");
$("#Container").css("height", "0px").css("width", "0px").css("margin-left", $("#context").width() / 2 "px").css("margin-top", ($("#context").height() - 30) / 2 "px");
$("#Container").animate({
width: $("#context").width() "px",
height: ($("#context").height() - 30) * 2 "px",
marginLeft: "0px",
marginTop: "0px"
}, 300, function() {
$calendarItem.css("visibility", "visible");
});
$(".dayItem").css("width", $("#context").width() "px");
var itemPaddintTop = $(".dayItem").height() / 6;
$(".item").css({
"width": $(".week").width() / 7 "px",
"line-height": itemPaddintTop "px",
"height": itemPaddintTop "px"
});
$(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 "px").css("margin-top", ($(".item").height() - 25) / 2 "px");
$(".week>h3").css("width", $(".week").width() / 7 "px");
this.RunningTime();
},
CreateSelectYear: function() {
$(".currentDay").show();
$("#selectYearDiv").children().remove();
var yearindex = 0;
for (var i = this.currentYear - 5; i
yearindex ;
if (i == this.currentYear) $("#selectYearDiv").append($("" i ""));
else $("#selectYearDiv").append($("" i ""));
if (yearindex == 1 || yearindex == 5 || yearindex == 9) $("#selectYearDiv").find("#" yearindex).css("border-left-color", "#fff");
if (yearindex == 4 || yearindex == 8 || yearindex == 12) $("#selectYearDiv").find("#" yearindex).css("border-right-color", "#fff");
}
$("#selectYearDiv>div").css("width", ($("#center").width() - 4) / 4 "px").css("line-height", ($("#center").height() - 4) / 3 "px");
$("#centerMain").animate({
marginLeft: "0px"
}, 300);
},
CreateSelectMonth: function() {
$(".currentDay").show();
$("#selectMonthDiv").children().remove();
for (var i = 1; i
if (i == this.currentMonth) $("#selectMonthDiv").append($("" i "月"));
else $("#selectMonthDiv").append($("" i "月"));
if (i == 1 || i == 5 || i == 9) $("#selectMonthDiv").find("#" i).css("border-left-color", "#fff");
if (i == 4 || i == 8 || i == 12) $("#selectMonthDiv").find("#" i).css("border-right-color", "#fff");
}
$("#selectMonthDiv>div").css("width", ($("#center").width() - 4) / 4 "px").css("line-height", ($("#center").height() - 4) / 3 "px");
$("#centerMain").animate({
marginLeft: -$("#center").width() * 2 "px"
}, 300);
},
IsRuiYear: function(aDate) {
return (0 == aDate % 4 && (aDate % 100 != 0 || aDate % 400 == 0));
},
CalculateWeek: function(y, m, d) {
if (m == 1) {
m = 13;
y--;
}
if (m == 2) {
m = 14;
y--;
}
var week = (d 2 * m 3 * (m 1) / 5 y y / 4 - y / 100 y / 400) % 7 1;
return week;
},
CalculateMonthDays: function(m, y) {
var mDay = 0;
if (m == 0 || m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
mDay = 31;
} else {
if (m == 2) {
//判断是否为芮年
var isRn = this.IsRuiYear(y);
if (isRn == true) {
mDay = 29;
} else {
mDay = 28;
}
} else {
mDay = 30;
}
}
return mDay;
},
CreateCalendar: function(y, m, d) {
$dayItem = $("");
//获取当前月份的天数
var nowDate = new Date();
if(y==nowDate.getFullYear()&&m==nowDate.getMonth() 1||(y==0&&m==0))
$(".currentDay").hide();
var nowYear = y == 0 ? nowDate.getFullYear() : y;
this.currentYear = nowYear;
var nowMonth = m == 0 ? nowDate.getMonth() 1 : m;
this.currentMonth = nowMonth;
var nowDay = d == 0 ? nowDate.getDate() : d;
$(".selectYear").html(nowYear "年");
$(".selectMonth").html(nowMonth "月");
var nowDaysNub = this.CalculateMonthDays(nowMonth, nowYear);
//获取当月第一天是星期几
//var weekDate = new Date(nowYear "-" nowMonth "-" 1);
//alert(ss.getDay());
var nowWeek = parseInt(this.CalculateWeek(nowYear, nowMonth, 1));
//var nowWeek=weekDate.getDay();
//获取上个月的天数
var lastMonthDaysNub = this.CalculateMonthDays((nowMonth - 1), nowYear);
if (nowWeek != 0) {
//生成上月剩下的日期
for (var i = (lastMonthDaysNub - (nowWeek - 1)); i
$dayItem.append("" (i 1) "");
}
}
//生成当月的日期
for (var i = 0; i
if (i == (nowDay - 1)) $dayItem.append("" (i 1) "");
else $dayItem.append("" (i 1) "");
}
//获取总共已经生成的天数
var hasCreateDaysNub = nowWeek nowDaysNub;
//如果小于42,往下个月推算
if (hasCreateDaysNub
for (var i = 0; i <= (42 - hasCreateDaysNub); i ) {
$dayItem.append("" (i 1) "");
}
}
return $dayItem;
},
CSS: function() {
var itemPaddintTop = $(".dayItem").height() / 6;
$(".item").css({
"width": $(".week").width() / 7 "px",
"line-height": itemPaddintTop "px",
"height": itemPaddintTop "px"
});
$(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 "px").css("margin-top", ($(".item").height() - 25) / 2 "px");
},
CalculateNextMonthDays: function() {
if (this.isRunning == false) {
$(".currentDay").show();
var m = this.currentMonth == 12 ? 1 : this.currentMonth 1;
var y = this.currentMonth == 12 ? (this.currentYear 1) : this.currentYear;
var d = 0;
var nowDate = new Date();
if (y == nowDate.getFullYear() && m == nowDate.getMonth() 1) d = nowDate.getDate();
else d = 1;
$calendarItem = this.CreateCalendar(y, m, d);
$("#Container").append($calendarItem);
this.CSS();
this.isRunning = true;
$($("#Container").find(".dayItem")[0]).animate({
height: "0px"
}, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
});
}
},
CalculateLastMonthDays: function() {
if (this.isRunning == false) {
$(".currentDay").show();
var nowDate = new Date();
var m = this.currentMonth == 1 ? 12 : this.currentMonth - 1;
var y = this.currentMonth == 1 ? (this.currentYear - 1) : this.currentYear;
var d = 0;
if (y == nowDate.getFullYear() && m == nowDate.getMonth() 1) d = nowDate.getDate();
else d = 1;
$calendarItem = this.CreateCalendar(y, m, d);
$("#Container").append($calendarItem);
var itemPaddintTop = $(".dayItem").height() / 6;
this.CSS();
this.isRunning = true;
$($("#Container").find(".dayItem")[0]).animate({
height: "0px"
}, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
});
}
},
CreateCurrentCalendar: function() {
if (this.isRunning == false) {
$(".currentDay").hide();
$calendarItem = this.CreateCalendar(0, 0, 0);
$("#Container").append($calendarItem);
this.isRunning = true;
$($("#Container").find(".dayItem")[0]).animate({
height: "0px"
}, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
});
this.CSS();
$("#centerMain").animate({
marginLeft: -$("#center").width() "px"
}, 500);
}
},
RunningTime: function() {
var mTiming = setInterval(function() {
var nowDate = new Date();
var nowTime = nowDate.getHours() ":" nowDate.getMinutes() ":" nowDate.getSeconds();
$("#footNow").html(nowTime);
}, 1000);
}
}
html日历修改,HTML精美日历插件相关推荐
- 精美日历EXCLE格式
精美日历EXCLE格式 转载于:https://blog.51cto.com/cctv5/58193
- android自定义选年控件,Android精美日历控件CalendarView自定义使用完全解析
项目github地址 此框架采用组合的方式,各个模块互相独立,可自由采用各种提供的控件组合,完全自定义自己需要的UI,周视图和月视图可通过简单自定义任意自由绘制,不怕美工提需求!!!下面教程将介绍如何 ...
- Android开源的精美日历控件,热插拔设计的万能自定义UI
UI框架应该逻辑与界面实现分离,该日历控件使用了热插拔的设计 ,简单几步即可实现你需要的UI效果,热插拔的思想是你提供你的实现,我提供我的插座接口,与自定义Behavior是一样的思想. 听说第一页无 ...
- Android开源的精美日历控件,热插拔设计的万能自定义UI,你值得拥有
XML用法 如果需要在日历控件下方使用其它控件,使用CalendarLayout控件即可,calendar_content_view_id为其它控件的id,支持任意控件,如RecyclerView.L ...
- Android开源的精美日历控件,热插拔设计的万能自定义UI,看完直接怼产品经理
<attr name="current_month_text_color" format="color" /> <!--当前月份的字体颜色-- ...
- android+高仿+日历,Android开源的精美日历控件,热插拔设计的万能自定义UI
UI框架应该逻辑与界面实现分离,该日历控件使用了热插拔的设计 ,简单几步即可实现你需要的UI效果,热插拔的思想是你提供你的实现,我提供我的插座接口,与自定义Behavior是一样的思想. 听说第一页无 ...
- Android开源的精美日历控件,热插拔设计的万能自定义UI,flutter调用原生sdk
XML用法 如果需要在日历控件下方使用其它控件,使用CalendarLayout控件即可,calendar_content_view_id为其它控件的id,支持任意控件,如RecyclerView.L ...
- 仿钉钉考勤统计页面的日历组件,通过日历展示每日考勤打卡情况,支持在日历上打两种不同类型的点,大致适配各种分辨率效果图
原文链接:uniapp : 仿钉钉考勤统计页面的日历组件,通过日历展示每日考勤打卡情况,支持在日历上打两种不同类型的点,大致适配各种分辨率 - northwest - 博客园 (cnblogs.com ...
- android 添加系统日历事件,添加系统日历事件
前两天,产品提一个需求,说是弄一个系统日历的提醒,到时提醒用户做一些事情,大概这么一个需求.搞了一两天,查看API翻阅文档,算是完成需求了. 这篇文章一个纯粹的代码文章,就是告诉怎么用系统日历添加提醒 ...
- jQuery UI Datepicker日期日历改造为年月日历
jQuery UI Datepicker日期日历改造为年月日历 参数为:yymm 显示如下效果 参数为:yymmdd 显示效果如: 具体代码修改如下,红色为 修改内容 /*! * jQuery UI ...
最新文章
- 全国大学生智能汽车竞赛获奖证书文字
- python添加系统环境win7_python环境配置(基于win7 x64)
- xampp mysqli_query and后的条件不行_Java笔记不用!null作为判空条件
- componentsJoinedByString 和 componentsSeparatedByString 的方法的区别
- 【2019牛客暑期多校训练营(第二场) - H】Second Large Rectangle(单调栈,全1子矩阵变形)
- myeclipse部署ssh项目工程
- 在线CSV转SQL工具
- 利用bootstrap的modal组件自定义alert,confirm和modal对话框
- 倍加福二维码测试2——C#界面程序开发
- 不得不知的高速PCB设计中各类地的处理方法
- 樊登讲亲密关系_《亲密关系》
- CORTEX:我知道你在真笑还是假笑 | 前辅助运动区的激活与对笑声传染性和真实性的感知
- 今夏流行的十大避暑胜地
- iOS内存扫描工具实现
- python代码怎么变成软件_从Python代码到APP,你只需要一个小工具:GitHub已超6000星
- jQuery详解(二) 函数和事件
- LabVIEW通讯-TCP
- CPU的功能和基本组成
- 相片尺寸怎么修改?手机如何整体缩小图片尺寸?
- 门禁|梯控管理系统CPU卡读写器发卡器HX-WR03密码设置操作说明