Код: Выделить всё
<style type="text/css">
div.element_89 {
width:128px;
height:137px;
background-image:url(/cms/scenes/elements/calendar.png);
background-repeat:no-repeat;
background-position:center 4px;
}
.element_89 #calendar_weekday {
top:29px;
height:20px;
position:relative;
font-size:12pt;
font-weight:700;
font-family:'Times New Roman', Times, serif;
text-align:center;
color:#000000;
}
.element_89 #calendar_day {
top:20px;
height:77px;
position:relative;
font-size:48pt;
font-weight:800;
font-family:'Times New Roman', Times, serif;
text-align:center;
color:#000000;
}
.element_89 #calendar_month {
top:5px;
position:relative;
font-size:11pt;
font-weight:600;
font-family:'Times New Roman', Times, serif;
text-align:center;
color:#000000;
}
</style>
<script type="text/javascript">
function ClockRefreshData() {
var d=new Date(),
weekday = ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
month = ['Январь','Февраль','Март','Апрель','Май','Июнь',
'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'];
// Красный день для выходных
if (d.getDay() == 0 || d.getDay() == 6) { var s='color:#ff0000'; } else { var s=''; }
document.getElementById('calendar_weekday').innerHTML = weekday[d.getDay()];
document.getElementById('calendar_day').innerHTML = d.getDate();
document.getElementById('calendar_day').setAttribute('style', s);
document.getElementById('calendar_month').innerHTML = month[d.getMonth()];
// Таймер для обновления календаря в полночь
var clockdelay = d.getTime();
d.setDate(d.getDate()+1);
d.setHours(0,0,0);
clockdelay = d.getTime() - clockdelay;
setTimeout("ClockRefreshData()",clockdelay);
}
onload = ClockRefreshData();
</script>
<div id="calendar_weekday"></div>
<div id="calendar_day"></div>
<div id="calendar_month"></div>
Календарь берет дату из системной и не требует никаких дополнительных свойств. Весь его код расположен в одном элементе. Вверх вниз текст можно двигать изменяя top: в соответствующих группах. Можно задать свой шрифт font-family: Размер и жирность font-size: font-weight: Да и вообще настроить все как хочется.
Добавлено выделение красным цветом Суббот и Воскресений.
Настройка:
- 1. Поменять везде номер элемента на свой element_89
2. Скопировать файл подложки по пути /cms/scenes/elements/calendar.png или поменять путь в коде.