Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Стильный вид календаря на сайт

Дата добавления: 14.03.2017 - 02:55
Категория: Вид календаря
Добавил: Buger
Количество просмотров: 191
Количество комментариев: 0
Размер файла: 5.9Kb
Рейтинг материала: 5.0 / 1
Стильный вид календаря на сайт
рейтинг 5.0
/
голосов 1
Красивый и стильный вид календаря, в котором осуществляется вывод числа, месяца и года в настоящее время.
Вид и стиль календаря вы сможете изменить в стилях. А именно, задать свою цветовую гамму, изменить имя шрифта, задать размер шрифта. В общем сможете сделать всё, что придет вам в голову.
Установка календаря очень простая и тривиальная.

HTML разметка
Код
<div class="calendar">
   
  <div class="day">
  <div class="previous">
  <p id="prevDay"></p>
  </div>
  <div class="current">
  <p id="currentDay"></p><span>Число</span></div>
  <div class="next">
  <p id="nextDay"></p>
  </div>
  </div>
   
  <div class="month">
  <div class="previous">
  <p id="prevMonth"></p>
  </div>
  <div class="current">
  <p id="currentMonth"></p><span>Месяц</span></div>
  <div class="next">
  <p id="nextMonth"></p>
  </div>
  </div>
   
  <div class="year">
  <div class="previous">
  <p id="prevYear"></p>
  </div>
  <div class="current">
  <p id="currentYear"></p><span>Год</span></div>
  <div class="next">
  <p id="nextYear"></p>
  </div>
  </div>
   
</div>


CSS стили
Код
<style type="text/css">
  .calendar {
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
  color: white;
  @import url("//fonts.googleapis.com/css?family=Fjalla+One");
  font-family: 'Fjalla One', sans-serif;
  }
   
  .calendar .year,
  .calendar .month,
  .calendar .day {
  width: 33.333%;
  float: left;
  }
   
  .calendar .year .previous p,
  .calendar .year .next p,
  .calendar .year .current p,
  .calendar .month .previous p,
  .calendar .month .next p,
  .calendar .month .current p,
  .calendar .day .previous p,
  .calendar .day .next p,
  .calendar .day .current p {
  font-size: 40px;
  margin: 0;
  }
   
  .calendar .year .previous span,
  .calendar .year .next span,
  .calendar .year .current span,
  .calendar .month .previous span,
  .calendar .month .next span,
  .calendar .month .current span,
  .calendar .day .previous span,
  .calendar .day .next span,
  .calendar .day .current span {
  font-size: 14px;
  text-transform: uppercase;
  }
   
  .calendar .year .previous,
  .calendar .year .next,
  .calendar .month .previous,
  .calendar .month .next,
  .calendar .day .previous,
  .calendar .day .next {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 2.6em 0;
  }
   
  .calendar .year .previous p,
  .calendar .year .next p,
  .calendar .month .previous p,
  .calendar .month .next p,
  .calendar .day .previous p,
  .calendar .day .next p {
  opacity: 0.3;
  }
   
  .calendar .year .current,
  .calendar .month .current,
  .calendar .day .current {
  padding: 2em 0;
  }
   
  .calendar .year {
  background-color: #b81d55;
  }
   
  .calendar .month {
  background-color: #b81d80;
  }
   
  .calendar .day {
  background-color: #bb2fb5;
  }
</style>


Подключаем библиотеку Moment.js
Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>


Вставляем обработчик
Код
<script type="text/javascript">
  function calendar() {
  var nMoment = moment();
   
  // получаем текущее число
  var currentDay = document.getElementById('currentDay');
  currentDay.innerHTML = nMoment.format('DD');
  // получаем предыдущее число
  var prevDay = document.getElementById('prevDay');
  prevDay.innerHTML = moment().subtract(1, 'days').format('DD');
  // получаем следующее число
  var nextDay = document.getElementById('nextDay');
  nextDay.innerHTML = moment().add(1, 'days').format('DD');
   
  // получаем текущий месяц
  var currentMonth = document.getElementById('currentMonth');
  currentMonth.innerHTML = nMoment.format('MM');
  // получаем предыдущий месяц
  var prevMonth = document.getElementById('prevMonth');
  prevMonth.innerHTML = moment().subtract(1, 'months').format('MM');
  // получаем следующий месяц
  var nextMonth = document.getElementById('nextMonth');
  nextMonth.innerHTML = moment().add(1, 'months').format('MM');
   
  // получаем текущий год
  var currentYear = document.getElementById('currentYear');
  currentYear.innerHTML = nMoment.format('YYYY');
  // получаем предыдущий год
  var prevYear = document.getElementById('prevYear');
  prevYear.innerHTML = moment().subtract(1, 'years').format('YYYY');
  // получаем следующий год
  var nextYear = document.getElementById('nextYear');
  nextYear.innerHTML = moment().add(1, 'years').format('YYYY');
   
  }
  calendar();
</script>


Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.