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

Оформление сцен, меню, страниц

Модераторы: immortal, newz20

Ответить
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

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

Сообщение Bagir » Пт фев 20, 2015 5:45 pm

Элемент календаря с типом 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 или поменять путь в коде.
Вложения
Elements00-03-48.zip
(3.22 КБ) 345 скачиваний
calendar.png
calendar.png (3.47 КБ) 11971 просмотр
За это сообщение автора Bagir поблагодарили (всего 4):
Vit (Чт фев 26, 2015 7:49 am) • AirKing (Пт фев 27, 2015 8:13 am) • Amarok (Пт фев 27, 2015 11:55 am) • ~220v (Чт июл 30, 2020 5:37 pm)
Рейтинг: 4.65%
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

Re: Канелдарь

Сообщение Bagir » Пт фев 27, 2015 12:10 am

Небольшое исправление. После воскресенья не сразу убирал красный цвет.

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

 if (d.getDay() == 0 || d.getDay() == 6)  { var s='color:#ff0000'; } else { var s=''; }
За это сообщение автора Bagir поблагодарили (всего 2):
AirKing (Пт фев 27, 2015 8:12 am) • Amarok (Пт фев 27, 2015 11:55 am)
Рейтинг: 2.33%
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Аватара пользователя
Amarok
Сообщения: 1425
Зарегистрирован: Пт дек 14, 2012 12:24 pm
Откуда: Россия, Нижняя Тура
Благодарил (а): 460 раз
Поблагодарили: 126 раз
Контактная информация:

Re: Канелдарь

Сообщение Amarok » Пт фев 27, 2015 11:56 am

Мило, но не знаю куда пристроить. А часики есть?
Алиска живёт на Ubuntu Server 14.04.3 LTS
connect, группа в Telegram, Яндекс.Деньги для благодарностей за помощь: 41001355945165
triada13
Сообщения: 242
Зарегистрирован: Вт мар 11, 2014 8:36 pm
Откуда: Челябинск
Благодарил (а): 107 раз
Поблагодарили: 7 раз

Re: Канелдарь

Сообщение triada13 » Пт фев 27, 2015 12:08 pm

Bagir а что за зверь такой - Канелдарь?
Majordomo на Orange Pi Zero.
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

Re: Календарь

Сообщение Bagir » Пт фев 27, 2015 12:20 pm

Это похоже из оперы "путаю педали" :D
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

Re: Канелдарь

Сообщение Bagir » Пт фев 27, 2015 12:25 pm

BlackWarrior писал(а):Мило, но не знаю куда пристроить. А часики есть?
Пристроить можно прямо на сцену или на домашние страницы. Часов нет. В этом элементе они не будут работать. Для часиков надо чтобы javascript в коде элемента запускался каждую минуту и обновлял текст элемента. Сделать это не сложно. Только вот часы и так есть на планшете. Вот если бы научиться убирать эту строчку с часами на Андройде. Тогда было бы больше места для сайта, и вот тогда был бы интерес сделать элемент с часами.
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Аватара пользователя
Amarok
Сообщения: 1425
Зарегистрирован: Пт дек 14, 2012 12:24 pm
Откуда: Россия, Нижняя Тура
Благодарил (а): 460 раз
Поблагодарили: 126 раз
Контактная информация:

Re: Календарь

Сообщение Amarok » Пт фев 27, 2015 1:09 pm

Моя домашняя страница:
Screenshot_1.jpg
Screenshot_1.jpg (239.15 КБ) 11791 просмотр
С календуриком)
Но за идею и реализацию - низкий поклон
Алиска живёт на Ubuntu Server 14.04.3 LTS
connect, группа в Telegram, Яндекс.Деньги для благодарностей за помощь: 41001355945165
Аватара пользователя
~220v
Сообщения: 96
Зарегистрирован: Пн дек 23, 2019 5:56 pm
Благодарил (а): 109 раз
Поблагодарили: 18 раз

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

Сообщение ~220v » Пт июл 31, 2020 11:36 am

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