Главная JavaScript Примеры оформления календаря

Календарь для сайта на JavaScript

Примеры оформления календаря-1

Простой календарь для сайта на CSS и JavaScript.
На этой странице приведены 4 Примера оформленя календаря средством изменения стиля. Полный код календаря приведен в предыдущей статье.

На этой странице показано, как просто изменив только стиль, получить разный вид календаря для своего сайта.

Базовый (исходный стиль) календарь см. Пример 1

Календарь для сайта (css)
1.2 
<style>
  .look-calendar {
    width:150px; border:1px solid #0051a8; padding:6px; 
    background-color:#d7ecfc; margin: 0 auto;   
  }
  #calendar {
    width: 100%;
    line-height: 1.1em;
    font-size: 12px;
    text-align: center;
    border-spacing:0px;
  }
  #calendar tr.dn td {
    font-size: 10px;
  }
  #calendar thead tr:last-child {
    font-size: small;
    color: #555555;
  }
  #calendar thead tr:nth-child(1) td:nth-child(2) {
    color: #323232;
  }
  #calendar thead tr:nth-child(1) td:nth-child(1):hover,
  #calendar thead tr:nth-child(1) td:nth-child(3):hover {
    cursor: pointer;
  }
  #calendar tbody td {
    color: #055092;
  }
  #calendar tbody td:nth-child(n+6),
  #calendar .holiday {
    color: #fa0606;
  }
  #calendar tbody td.today {
    background: #dc0000;
    color: #fff;
  }
</style>
Результат примера (html)

1.2

‹ ›
ПнВтСрЧтПтСбВс

Вид календаря на странице сайта

Календарь для сайта
1.3 
<style>
  .look-calendar {
    width:240px; border:3px solid #cbcccc; padding:5px; 
    background-color:#1c1d1b; margin: 0 auto;   
  }
  #calendar {
    width: 100%;
    line-height: 1.2em;
    font-size: 14px;
    text-align: center;
    border-spacing:0px;
    color: #cff8e4;
  }
  #calendar tr.dn td {
    color: #cff8e4;
  }
  #calendar thead tr:last-child {
    font-size: small;
    color: #555555;
  }
  #calendar thead tr:nth-child(1) td:nth-child(2) {
    color: #323232;
    font-size: 18px;
  }
  #calendar thead tr:nth-child(1) td:nth-child(1):hover,
  #calendar thead tr:nth-child(1) td:nth-child(3):hover {
    cursor: pointer;
  }
  #calendar tbody td {
    color: #69b0ee;
  }
  #calendar tbody td:nth-child(n+6),
  #calendar .holiday {
    color: #e78c5c;
  }
  #calendar tbody td.today {
    background: #0051a8;
    color: #fff;
  }
</style>
Результат примера

1.3

‹ ›
ПнВтСрЧтПтСбВс

Вид календаря на странице сайта

Календарь для сайта
1.4 
<style>
  .look-calendar {
    width: 250px;
    border: dashed 2px #037256;
    padding: 20px;
    background-color: #d5faf2;
    margin: 0 auto;
  }
  #calendar {
    width: 100%;
    line-height: 1.2em;
    font-size: 15px;
    text-align: center;
    border-spacing:3px;
    color: #000;
  }
  #calendar tr.dn td {
    color: #24aa72;
    font-weight: 700;
  }
  #calendar thead tr:last-child {
    font-size: small;
    color: #555555;
  }
  #calendar thead tr:nth-child(1) td:nth-child(2) {
    color: #323232;
    font-size: 18px;
    font-weight: 400;
  }
  #calendar thead tr:nth-child(1) td:nth-child(1):hover,
  #calendar thead tr:nth-child(1) td:nth-child(3):hover {
    cursor: pointer;
  }
  #calendar tbody td {
    color: #8523be;
  }
  #calendar tbody td:nth-child(n+6),
  #calendar .holiday {
    color: #c50c05;
  }
  #calendar tbody td.today {
    background: #dc0000;
    color: #fff;
  }
</style>
Результат примера

1.4

‹ ›
ПнВтСрЧтПтСбВс

Вид календаря на странице сайта

Календарь для сайта 5
1.5 
<style>
  .look-calendar {
    width: 250px;
    border: 20px inset #bdb67e;
    padding: 8px;
    background-color: #fafae8;
    margin: 0 auto;   
  }
  #calendar {
    width: 100%;
    line-height: 1.2em;
    font-size: 15px;
    text-align: center;
    border-spacing:2px;
    color: #000;
  }
  #calendar tr.dn td {
    color: #b48b05;
    font-weight: 700;
  }
  #calendar thead tr:last-child {
    font-size: small;
    color: #555555;
  }
  #calendar thead tr:nth-child(1) td:nth-child(2) {
    color: #4e4c2e;
    font-size: 18px;
    font-weight: 700;
  }
  #calendar thead tr:nth-child(1) td:nth-child(1):hover,
  #calendar thead tr:nth-child(1) td:nth-child(3):hover {
    cursor: pointer;
  }
  #calendar tbody td {
    color: #0f0f0f;
  }
  #calendar tbody td:nth-child(n+6),
  #calendar .holiday {
    color: #c50c05;
  }
  #calendar tbody td.today {
    background: #dc0000;
    color: #fff;
  }
</style>
Результат примера 5


1.5

‹ ›
ПнВтСрЧтПтСбВс

Вид календаря на странице сайта

Для работы календаря не забудьте скопировать html код и код скрипта с этой страницы.