|
Сообщение от Блондинка
|
|
я бы предпочла, чтобы высота блока с элементами управления была постоянной
|
А я о чем? В календаре вашем, о котором вы говорите, количество строк "заточено" по текущий месяц, и получится, в зависимости от количества дней и дня недели начала месяца, это количество будет разным.
Собственно, грубо говоря, весь календарь, это:
<html>
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: separate;
}
td {
padding: 2px 4px;
border: 1px solid #c6c6c6;
text-align: right;
color: #000;
font: 12px Arial;
}
tr:first-child td {
background-color: #d0d0d0;
border-color: #999;
}
tr td:last-child {
color: #f70707;
}
tr:first-child td:last-child {
border-color: #f06565;
background-color: #fdafaf;
color: #000;
}
td.gray {
border-color: #cecece;
background-color: #e6e6e6;
color: #999!important
}
td.today {
background-color: #f6fdb5;
}
</style>
</head>
<body>
<table>
<tr><td>Пн</td><td>Вт</td><td>Ср</td><td>Чт</td><td>Пт</td><td>Сб</td><td>Вс</td></tr>
</table>
<script>
var d = new Date(),
currentYear = d.getFullYear(),
currentMonth = d.getMonth(),
today = d.getDate(),
d = new Date(currentYear, currentMonth, 1),
day = (d.getDay()||7)-1,
d = new Date(currentYear, currentMonth, 1 - day),
startDate = d.getDate(),
tbl = document.querySelector('table'),
row, cell, date,
n = 42; //даты календаря как 7х6
for(var i=0; i<n; ++i) {
if(!(i % 7)) row = tbl.insertRow(-1);
cell = row.insertCell(-1);
d = new Date(currentYear, currentMonth, startDate + i);
date = d.getDate();
cell.textContent = date;
if(date==today && currentMonth==d.getMonth() && currentYear==d.getFullYear()) cell.classList.add("today");
if(d.getMonth() != currentMonth) cell.classList.add("gray");
}
</script>
</body>
</html>
Вы можете стилями разукрасить календарь как угодно, какие угодно размеры ячеек его определять, но независимо от месяца дни его будут вписаны в один и тот же размер.