Оглавление

Создание календаря с помощью CSS

Календари также содержат табличные данные. Пример календаря, взятый из настольного приложения, показан на рис. 5.14. В качестве заголовков столбцов выступают расположенные сверху названия дней недели. Поэтому для создания календарей целесообразно использовать таблицы; при этом объем HTML-кода можно свести к минимуму, применив CSS для задания внешнего вида календаря.

 

Календарь из настольного приложения

Рис. 5.14. Календарь из настольного приложения

 

Решение
Решение основано на использовании простой и доступной таблицы, которая средствами CSS преображается в привлекательный календарь, изображенный на рис. 5.15. Учитывая его несложную структуру, он
идеально подходит для приложения, связанного с базой данных, в котором таблица создается кодом на стороне сервера:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
  <title>Календарь</title>
  <meta http-equiv="content-type"
      content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="cal.css" />
  </head>
  <body>
  <table class="clmonth" summary="Календарь на август 2012">
    <caption>Август 2012</caption>
    <tr>
      <th scope="col">Понедельник</th>
      <th scope="col">Вторник</th>
      <th scope="col">Среда</th>
      <th scope="col">Четверг</th>
      <th scope="col">Пятница</th>
      <th scope="col">Суббота</th>
      <th scope="col">Воскресенье</th>
    </tr>
    <tr>
      <td class="previous">30</td>
       <td class="previous">31</td>
      <td class="active">1
        <ul>
          <li>модуль News</li>
          <li>модуль TDMDownloads</li>
        </ul></td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td class="active">6
        <ul>
          <li>Модуль инструкций</li>
        </ul></td>
	  <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>13</td>	
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td class="active">17
        <ul>
          <li>XOOPS 2.5.5-ru</li>
        </ul></td>
      <td class="active">18
        <ul>
          <li>Отладчик XOOPS</li>
          <li>Firebug 1.7</li>
        </ul></td>
      <td>19</td>

    </tr>
    <tr>
      <td>20</td>	
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td class="active">24
        <ul>
          <li>Xoops Partners</li>
        </ul></td>
      <td>25</td>
      <td>26</td>
    </tr>
    <tr>
      <td>27</td>	
      <td>28</td>
      <td>29</td>
      <td>30</td>
      <td class="active">31
        <ul>
          <li>редактор TinyMce</li>
        </ul></td>
      <td class="next">1</td>
      <td class="next">2</td>
    </tr>
  </table>
  </body>
  </html>

 

 

body {
background-color: #FFFFFF;
color: #000000;
font-size: 90%;
}
.clmonth {
border-collapse: collapse;
width: 780px;
}
.clmonth caption {
text-align: left;
font: bold 110% Georgia, “Times New Roman”, Times, serif;
padding-bottom: 0.4em;
}
.clmonth th {
border: 1px solid #AAAAAA;
border-bottom: none;
padding: 0.2em 0.6em 0.2em 0.6em;
background-color: #CCCCCC;
color: #3F3F3F;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 110px;
}
.clmonth td {
border: 1px solid #EAEAEA;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 0.2em 0.6em 0.2em 0.6em;
vertical-align: top;
}
.clmonth td.previous, .clmonth td.next {
background-color: #F6F6F6;
color: #C6C6C6;
}
.clmonth td.active {
background-color: #B1CBE1;
color: #2B5070;
border: 2px solid #4682B4;
}
.clmonth ul {
list-style-type: none;
margin: 0;
padding-left: 1em;
padding-right: 0.6em;
}
.clmonth li {
margin-bottom: 1em;
}

 

Окончательный вид календаря

Рис. 5.15. Окончательный вид календаря, оформленного с помощью CSS (DEMO)

 

Обсуждение
Решение поставленной задачи начнем с создания самой простой таблицы. У нее есть заголовок (текущий месяц), а названия дней недели выступают в качестве заголовков колонок, определенных с помощью тега <th>:

  <table class="clmonth" summary="Календарь на август 2012">
    <caption>Август 2012</caption>
    <tr>
      <th scope="col">Понедельник</th>
      <th scope="col">Вторник</th>
      <th scope="col">Среда</th>
      <th scope="col">Четверг</th>
      <th scope="col">Пятница</th>
      <th scope="col">Суббота</th>
      <th scope="col">Воскресенье</th>
    </tr>


Таблице присвоено имя класса clmonth. Использование класса вместо ID объясняется тем, что в некоторых случаях может возникнуть необходимость отображения сразу нескольких месяцев на одной странице.

 

Если потом выяснится, что таблице необходимо присвоить ID – например, для создания функции скрытия и отображения страницы с помощью JavaScript, – то можно кроме класса добавить и идентификатор.
Числа содержатся в отдельных ячейках, а мероприятия представлены в виде списка в соответствующей ячейке.

 

В приведенной ниже разметке видно, что двум ячейкам таблицы добавлены классы. Класс previous отмечает ячейки, содержащие дни, которые относятся к предыдущему месяцу (для выделения дней, относящихся к следующему месяцу, будет использоваться класс next); ячейкам, содержащим информацию о событиях, присваивается класс active:

    <tr>
      <td class="previous">30</td>
       <td class="previous">31</td> 
      <td class="active">1
        <ul>
          <li>модуль News</li>
          <li>модуль TDMDownloads</li>
        </ul></td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>


Вид таблицы без использования CSS представлен на рис. 5.16.

 

Вид календаря без использования CSS

Рис. 5.16. Вид календаря без использования CSS

 

Итак, разметка готова, и можно приступить к визуальному оформлению. Зададим основные стили для элемента body, в том числе и параметры шрифта. Затем зададим стиль для класса clmonth, чтобы рамки перекрывали друг друга и между ячейками не оставалось пустого пространства, а также укажем ширину таблицы:

body {
background-color: #FFFFFF;
color: #000000;
font-size: 90%;
}
.clmonth {
border-collapse: collapse;
width: 780px;
}


Мы указали стили для элемента caption, являющегося дочерним по отношению к элементу класса clmonth, а затем для заголовков (th) и ячеек (td) таблицы:

.clmonth caption {
text-align: left;
font: bold 110% Georgia, “Times New Roman”, Times, serif;
padding-bottom: 0.4em;
}
.clmonth th {
border: 1px solid #AAAAAA;
border-bottom: none;
padding: 0.2em 0.6em 0.2em 0.6em;
background-color: #CCCCCC;
color: #3F3F3F;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 110px;
}
.clmonth td {
border: 1px solid #EAEAEA;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 0.2em 0.6em 0.2em 0.6em;
vertical-align: top;
}


Как видно на рис. 5.17, наш календарь начинает приобретать определенные визуальные черты.

 

календарь выглядит привлекательнее

Рис. 5.17. Благодаря новому оформлению элементов caption, th и td календарь выглядит привлекательнее

 

Теперь можно задать оформление для списков событий, расположенных внутри ячеек, удалив маркеры и добавив больше пустого пространства между пунктами списка:

.clmonth ul {
list-style-type: none;
margin: 0;
padding-left: 1em;
padding-right: 0.6em;
}

.clmonth li {
margin-bottom: 1em;
}


Наконец, добавим стили классов previous и next, чтобы не относящиеся к текущему месяцу дни отображались в оттенках серого. Кроме того, зададим стиль для класса active, используемого для выделения дней с событиями:

.clmonth td.previous, .clmonth td.next {
background-color: #F6F6F6;
color: #C6C6C6;
}
.clmonth td.active {
background-color: #B1CBE1;
color: #2B5070;
border: 2px solid #4682B4;
}

Мы рассмотрели лишь один из немногих способов создания календарей. Календари часто используют в блогах: при щелчке по числу можно перейти к сделанной в этот день записи. Если убрать из нашего HTML- кода все события, оставить только первые буквы названий дней недели и слегка изменить CSS-код, мы получим простой миниатюрный календарь, который вполне можно использовать в этих целях (рис. 5.18).

 

Создание миниатюрного календаря

Рис. 5.18. Создание миниатюрного календаря (DEMO)


Ниже представлены HTML- и CSS-коды этой версии календаря:
  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Мини календарь</title>
<meta http-equiv="content-type"
    content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="cal_mini.css" />
</head>
<body>
<table class="clmonth" summary="Календарь на август 2012">
  <caption>Август 2012</caption>
  <tr>
    <th scope="col">Пн</th>
    <th scope="col">Вт</th>
    <th scope="col">Ср</th>
    <th scope="col">Чт</th>
    <th scope="col">Пт</th>
    <th scope="col">Сб</th>
    <th scope="col">Вс</th>
  </tr>
  <tr>
    <td class="previous">30</td> 
    <td class="previous">31</td>
    <td class="active">1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr> 
    <td class="active">6</td>
    <td>7</td> 	
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>13</td>  
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td class="active">17</td>
    <td class="active">18</td>
    <td>19</td>
  </tr>
  <tr>
    <td>20</td>  
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td class="active">24</td>
    <td>25</td>
    <td>26</td>
  </tr>
  <tr>
    <td>27</td>  
    <td>28</td>
    <td>29</td>
    <td>30</td>	
    <td class="active">31</td>
    <td class="next">1</td>
    <td class="next">2</td>
  </tr>
</table>
</body>
</html>

 

body {
	background-color: #ffffff;
	color: #000000;
	font-size: 90%;
}
.clmonth {
	border-collapse: collapse;
}
.clmonth caption {
	text-align: left;
	font: bold 110% Georgia, "Times New Roman", Times, serif; 
	padding-bottom: 0.4em;
}
.clmonth th {
	border: 1px solid #AAAAAA;
	border-bottom: none;
	padding: 0.2em 0.4em 0.2em 0.4em;
	background-color: #CCCCCC;
	color: #3F3F3F;
	font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.clmonth td {
	border: 1px solid #EAEAEA;
	font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
	padding: 0.2em 0.4em 0.2em 0.4em;
	vertical-align: top;
}
.clmonth td.previous, .clmonth td.next {
	background-color: #F6F6F6;
	color: #C6C6C6;
}
.clmonth td.active {
	background-color: #B1CBE1;
	color: #2B5070;
	border: 2px solid #4682B4;
}
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити

Кто активен

5 пользователь(ей) активно (4 пользователь(ей) просматривают Инструкции)

Участников: 0
Гостей: 5

далее...

Рекомендуем

Информация тестостерон купить на нашем сайте.

Новые инструкции

Шпаргалки

BX слайдер с переводом.

Шпаргалка по EMMET

Шпаргалка по Flexbox

Шпаргалка по Grid