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

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

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

Ответить
PAV
Сообщения: 949
Зарегистрирован: Пт дек 06, 2013 11:30 am
Откуда: Москва
Благодарил (а): 68 раз
Поблагодарили: 94 раза

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

Сообщение PAV » Пт фев 07, 2014 1:29 pm

А давайте делиться наработками календарей.
У меня пока получилось так - Изображение
http://www.webmasters.by/articles/web-p ... -css3.html
Аватара пользователя
Amarok
Сообщения: 1425
Зарегистрирован: Пт дек 14, 2012 12:24 pm
Откуда: Россия, Нижняя Тура
Благодарил (а): 460 раз
Поблагодарили: 126 раз
Контактная информация:

Re: Календарь

Сообщение Amarok » Ср фев 12, 2014 4:31 pm

У меня вот такой календурик:
Изображение

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

<style>
#calendar2 {
  width: 100%;
  font: monospace;
  line-height: 1.2em;
  font-size: 15px;
  text-align: center;
}
#calendar2 thead tr:last-child {
  font-size: small;
  color: rgb(85, 85, 85);
}
#calendar2 thead tr:nth-child(1) td:nth-child(2) {
  color: rgb(50, 50, 50);
}
#calendar2 thead tr:nth-child(1) td:nth-child(1):hover, #calendar2 thead tr:nth-child(1) td:nth-child(3):hover {
  cursor: pointer;
}
#calendar2 tbody td {
  color: rgb(44, 86, 122);
}
#calendar2 tbody td:nth-child(n+6), #calendar2 .holiday {
  color: rgb(231, 140, 92);
}
#calendar2 tbody td.today {
  background: rgb(220, 0, 0);
  color: #fff;
}
</style>

<table id="calendar2">
  <thead>
    <tr><td>‹<td colspan="5"><td>›
    <tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
  <tbody>
</table>

<script>
function Calendar2(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
    D = new Date(year,month,Dlast),
    DNlast = new Date(D.getFullYear(),D.getMonth(),Dlast).getDay(),
    DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
    calendar = '<tr>',
    month=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];
if (DNfirst != 0) {
  for(var  i = 1; i < DNfirst; i++) calendar += '<td>';
}else{
  for(var  i = 0; i < 6; i++) calendar += '<td>';
}
for(var  i = 1; i <= Dlast; i++) {
  if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
    calendar += '<td class="today">' + i;
  }else{
    calendar += '<td>' + i;
  }
  if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
    calendar += '<tr>';
  }
}
for(var  i = DNlast; i < 7; i++) calendar += '<td>&nbsp;';
document.querySelector('#'+id+' tbody').innerHTML = calendar;
document.querySelector('#'+id+' thead td:nth-child(2)').innerHTML = month[D.getMonth()] +' '+ D.getFullYear();
document.querySelector('#'+id+' thead td:nth-child(2)').dataset.month = D.getMonth();
document.querySelector('#'+id+' thead td:nth-child(2)').dataset.year = D.getFullYear();
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {  // чтобы при перелистывании месяцев не "подпрыгивала" вся страница, добавляется ряд пустых клеток. Итог: всегда 6 строк для цифр
    document.querySelector('#'+id+' tbody').innerHTML += '<tr><td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;';
}
}
Calendar2("calendar2", new Date().getFullYear(), new Date().getMonth());
// переключатель минус месяц
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(1)').onclick = function() {
  Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)-1);
}
// переключатель плюс месяц
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(3)').onclick = function() {
  Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)+1);
}
</script>
Алиска живёт на Ubuntu Server 14.04.3 LTS
connect, группа в Telegram, Яндекс.Деньги для благодарностей за помощь: 41001355945165
kanakoff
Сообщения: 2
Зарегистрирован: Вс янв 26, 2014 6:43 pm
Откуда: Череповец Вологодская обл. Россия
Благодарил (а): 0
Поблагодарили: 0

Re: Календарь

Сообщение kanakoff » Чт фев 13, 2014 2:44 pm

Можно ли прикрутить Google.Calendar вместо штатного календаря?
Ubuntu
WeatherStation WH1080
Axis 207
RaspberryPi
Ivan
Сообщения: 1473
Зарегистрирован: Сб окт 12, 2013 11:03 pm
Благодарил (а): 49 раз
Поблагодарили: 327 раз

Re: Календарь

Сообщение Ivan » Чт фев 13, 2014 3:38 pm

Хорошо бы ещё сделать приложения из маркета Google.Calendar
Linux, Raspberry PI, MySensors
Connect: http://connect.smartliving.ru/profile/53
Мои проекты: http://smartliving.ru/profile/4
PAV
Сообщения: 949
Зарегистрирован: Пт дек 06, 2013 11:30 am
Откуда: Москва
Благодарил (а): 68 раз
Поблагодарили: 94 раза

Re: Календарь

Сообщение PAV » Ср июл 16, 2014 10:33 am

Ни у кого не получилось Google calendar прикрутить?
Ivan
Сообщения: 1473
Зарегистрирован: Сб окт 12, 2013 11:03 pm
Благодарил (а): 49 раз
Поблагодарили: 327 раз

Re: Календарь

Сообщение Ivan » Ср июл 16, 2014 12:06 pm

У меня почти получилось сделать импорт. Загвоздка встала в шаблонах МД, пока забил. Если интересно гдето кидал исходники по логину и чтению календаря с Гугля
Linux, Raspberry PI, MySensors
Connect: http://connect.smartliving.ru/profile/53
Мои проекты: http://smartliving.ru/profile/4
PAV
Сообщения: 949
Зарегистрирован: Пт дек 06, 2013 11:30 am
Откуда: Москва
Благодарил (а): 68 раз
Поблагодарили: 94 раза

Re: Календарь

Сообщение PAV » Ср июл 16, 2014 12:36 pm

Нужен не импорт, нужна синхронизация.
Ivan
Сообщения: 1473
Зарегистрирован: Сб окт 12, 2013 11:03 pm
Благодарил (а): 49 раз
Поблагодарили: 327 раз

Re: Календарь

Сообщение Ivan » Ср июл 16, 2014 1:07 pm

Я пока делал импорт. Т.к. синхронизация боле сложный механизм.
Но если у вас есть возможность написать синхронизацию. Кто вам мешает. Доступ идёт ведь через официальный API
Linux, Raspberry PI, MySensors
Connect: http://connect.smartliving.ru/profile/53
Мои проекты: http://smartliving.ru/profile/4
PAV
Сообщения: 949
Зарегистрирован: Пт дек 06, 2013 11:30 am
Откуда: Москва
Благодарил (а): 68 раз
Поблагодарили: 94 раза

Re: Календарь

Сообщение PAV » Ср июл 16, 2014 2:15 pm

дык, если бы умел, не спрашивал ;)
PAV
Сообщения: 949
Зарегистрирован: Пт дек 06, 2013 11:30 am
Откуда: Москва
Благодарил (а): 68 раз
Поблагодарили: 94 раза

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

Сообщение PAV » Чт фев 27, 2020 1:49 pm

Други, а никто не сделал календаря, типа такого?
Хочу e-ink книжку запустить в режиме календаря. Пока CalenGoo приспособил, но хочу вывести страницу и с календарем и с инфой от МЖД.
1ZEYShP22.jpg
1ZEYShP22.jpg (273.2 КБ) 5002 просмотра
Ответить