Страница 1 из 1

[Дизайн] Календарь

Добавлено: Пт фев 20, 2015 5:45 pm
Bagir
Элемент календаря с типом html кодом CSS и javascript.
Изображение

Код: Выделить всё

<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 или поменять путь в коде.

Re: Канелдарь

Добавлено: Пт фев 27, 2015 12:10 am
Bagir
Небольшое исправление. После воскресенья не сразу убирал красный цвет.

Код: Выделить всё

 if (d.getDay() == 0 || d.getDay() == 6)  { var s='color:#ff0000'; } else { var s=''; }

Re: Канелдарь

Добавлено: Пт фев 27, 2015 11:56 am
Amarok
Мило, но не знаю куда пристроить. А часики есть?

Re: Канелдарь

Добавлено: Пт фев 27, 2015 12:08 pm
triada13
Bagir а что за зверь такой - Канелдарь?

Re: Календарь

Добавлено: Пт фев 27, 2015 12:20 pm
Bagir
Это похоже из оперы "путаю педали" :D

Re: Канелдарь

Добавлено: Пт фев 27, 2015 12:25 pm
Bagir
BlackWarrior писал(а):Мило, но не знаю куда пристроить. А часики есть?
Пристроить можно прямо на сцену или на домашние страницы. Часов нет. В этом элементе они не будут работать. Для часиков надо чтобы javascript в коде элемента запускался каждую минуту и обновлял текст элемента. Сделать это не сложно. Только вот часы и так есть на планшете. Вот если бы научиться убирать эту строчку с часами на Андройде. Тогда было бы больше места для сайта, и вот тогда был бы интерес сделать элемент с часами.

Re: Календарь

Добавлено: Пт фев 27, 2015 1:09 pm
Amarok
Моя домашняя страница:
Screenshot_1.jpg
Screenshot_1.jpg (239.15 КБ) 12123 просмотра
С календуриком)
Но за идею и реализацию - низкий поклон

Re: [Дизайн] Календарь

Добавлено: Пт июл 31, 2020 11:36 am
~220v
Автору объявляется огромная благодарность за сей замечательный календарик!
Пользуясь случаем ;) хочу спросить - на первой сцене, проблем нет. Добавил на вторую сцену, но отображается только фоновая картинка без текста :( Если смотреть через "Просмотр / Редактировать" и "Просмотр" все ок, это проблема работы сцен?