$(document).ready(function(){
var dd = new Date();//2012,9,1)
createCalendars(dd);
});
function createCalendars(month){
var dateTodey= month.getDate();
var firstDay= dateTodey - Math.floor(dateTodey/7) * 7 - 8; //=dateTodey%7
var prevMonthMondey = new Date(month.getFullYear(), month.getMonth(), firstDay);
$("#main").append(getDivForWeek(0, prevMonthMondey, month));
$("#main").append(getDivForWeek(7, prevMonthMondey, month));
$("#main").append(getDivForWeek(14, prevMonthMondey, month));
$("#main").append(getDivForWeek(21, prevMonthMondey, month));
$("#main").append(getDivForWeek(28, prevMonthMondey, month));
$("#main").append(getDivForWeek(35, prevMonthMondey, month));
}
function getDivForWeek(dayIndex, prevMonthMondey, todayMonth){
var column = document.createElement("nav");
$(column).attr("class","menu");
for(i=dayIndex;i<dayIndex+7;i++){
var cellDay = getNavForDay(i, prevMonthMondey, todayMonth);
$(column).append(cellDay);
}
return column;
}
function getNavForDay(dayIndex, prevMonthMondey, todayMonth){
var indexDate = new Date(prevMonthMondey.getFullYear(), prevMonthMondey.getMonth(), prevMonthMondey.getDate() + dayIndex);
var style1 = "cur-month";
if (indexDate.getMonth() != todayMonth.getMonth()){
style1 = "not-cur-month";
} else if(indexDate.getDate() != todayMonth.getDate()) {
}
var cellDay = document.createElement("a");
$(cellDay).html(indexDate.getDate()).attr("href","#").attr("class",style1).bind("click",function (){alert(indexDate)});;
return cellDay;
}
-----------------------------------------------------------------------
<!DOCtype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kalendārs</title>
<link rel="stylesheet" href="stils.css" type="text/css">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="top-head">
</div>
<div id="main">
</div>
</body>
</html>
-------------------------------------------------------------------------
body {
margin:0;
background:#3d5c78 url('fons9a.png');
font-family:Arial;
font-size:26px;
color:#e5e6e8;
}
#top-head{
margin-left:0px;
margin-right:0px;
margin-top:6px;
height:53px;
border-top:1px solid #209256;
border-bottom:1px solid #005216;
background:#007236;
}
#main{
marging:auto;
width:283px;
min-height:305px;
margin:auto;
margin-top:0px;
border:1px solid #c0c0c0;
clear:both;
}
.menu{
float:left;
height:302px;
width:45px;
margin:auto;
border:1px solid #c0c0c0;
background-color:#efefef;
}
.menu a{
display:block;
text-align:center;
height:42px;
line-height:42px;
border-bottom: 1px solid #e0e0e0;
background-color:#f4f4f4;
/*color:#404040;*/
text-decoration:none;
font-weight:bold;
/*font-size:12px;*/
font-family:Verdana;
}
.menu a:hover{
background-color:#e0e0e0;
border-bottom:1px solid #dedede;
}
.not-cur-month{
color:#E0E0E0;
font-size:12px;
}
.cur-month{
color:#404040;
font-size:12px;
}
.cur-date{
color:#404040;
font-size:14px;
}
Комментариев нет:
Отправить комментарий