Как добавить на статический сайт календарь событий или исправить имеющийся?

Question

[Николай]

На статический сайт необходимо добавить неплохо выглядящий календарь событий. В календаре может быть по несколько событий на 1 дату т.е. в определенной ячейке указываются гиперссылки - заголовки событий. Возможно кто то сможет подсказать где такой найти или исправить тот, что мне удалось найти.
В примере визуальные эффекты выделения даты привязаны к тегу a, из-за этого не удается добавить несколько событий в 1 дату (что получается при добавлении можно посмотреть в прикрепленном изображении). Как увеличить календарь несложно догадаться, но вот как исправить CSS для получения нужного результата не знаю и надеюсь на помощь знающих.

Код в jsfiddle.net

CSS код

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
  font: 30px/20px "Lucida Grande", Tahoma, Verdana, sans-serif; 		/*задает задает размер шрифта с названием месяца*/
  color: #404040;
  background: #46484C;
}

.container {
  margin: 50px auto;
  width: 706px;				/*задает ширину таблицы */
}

.container .cal {
  margin: 0 auto;
}

.cal {
  display: block;
  width: 706px;				/*задает ширину ячейки с названием месяца(и фона)*/
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.cal a {
  text-decoration: none;
}

.cal caption {
  display: block;
  line-height: 100px;			/*задает высоту ячейки с названием месяца*/
  font-weight: bold;
  color: #e2e2e2;
  text-align: center;
  text-shadow: 0 -1px black;
  background: #333;
  background: rgba(0, 0, 0, 0.35);
  border-top: 1px solid #333;
  border-bottom: 1px solid #313131;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.cal caption a {
  display: block;
  line-height: 80px;		/*задает высоту ячейки с стрелками перелистывания месяцев */
  padding: 0 10px;			/*задает отступ перед и после стрелки перелистывания месяцев */
  font-size: 80px;			/*задает размер стрелки перелистывания месяцев */
  color: #e2e2e2;
}

.cal caption a:hover {
  color: white;
}

.cal caption .prev {
  float: left;
}

.cal caption .next {
  float: right;
}

.cal th, .cal td {
  width: 30px;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.8);
}

.cal th:first-child, .cal td:first-child {
  border-left: 0;
}

.cal th {
  line-height: 30px;					/*задает высоту строки с днями недели*/
  font-size: 14px;						/*задает размер шрифта с днями недели*/
  color: #696969;
  text-transform: uppercase;
  background: #f3f3f3;
  border-left: 1px solid #f3f3f3;
}

.cal td {
  font-size: 11px;
  font-weight: bold;
  border-top: 1px solid #c2c2c2;
  border-left: 1px solid #c2c2c2;
}

.cal td a {
  clear: both;
  display: block; 
  position: relative; 
  width: 100px; 				/*задает ширину ячеек дней месяца*/ 
  line-height: 100px;			/*задает высоту ячеек дней месяца*/
  color: #666;
  background-image: linear-gradient(to bottom, #eaeaea 0%, #e5e5e5 60%, #d9d9d9 100%); 
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.5);
}

.cal td a:hover, .cal td.off a {
  background: #f3f3f3;
}

.cal td.off a {
  color: #b3b3b3;
}

.cal td.active a, .cal td a:active {
  margin: -1px;
  color: #f3f3f3;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  background: #6dafbf;
  border: 1px solid #598b94;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}

.cal td.active:first-child a, .cal td:first-child a:active {
  border-left: 0;
  margin-left: 0;
}

.cal td.active:last-child a, .cal td:last-child a:active {
  border-right: 0;
  margin-right: 0;
}

.cal tr:last-child td.active a, .cal tr:last-child td a:active {
  border-bottom: 0;
  margin-bottom: 0;
}

Код html страницы

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]>>!--> <html lang="ru"> <!--<![endif]-->
<head>
  <link rel="stylesheet" href="calengar.css">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Календарь событий</title>
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
  <div class="container">
    <table class="cal">
      <caption>
        <span class="prev"><a href="#">←</a></span>
        <span class="next"><a href="#">→</a></span>
        Апрель 2019
      </caption>
      <thead>
        <tr>
          <th>Пн</th>
          <th>Вт</th>
          <th>Ср</th>
          <th>Чт</th>
          <th>Пт</th>
          <th>Сб</th>
          <th>Вс</th>
        </tr>
      </thead>
      <tbody>
        <tr>
		  <td class="off"><a href="#">25</a></td>
          <td class="off"><a href="#">26</a></td>
          <td class="off"><a href="#">27</a></td>
          <td class="off"><a href="#">28</a></td>
          <td class="off"><a href="#">29</a></td>
          <td class="off"><a href="#">30</a></td>
          <td class="off"><a href="#">31</a></td>
        </tr>
        <tr>
          <td><a href="#">1</a></td>
          <td><a href="#">2</a></td>
          <td><a href="#">3</a></td>
          <td><a href="#">4</a></td>
          <td><a href="#">5</a></td>
          <td><a href="#">6</a></td>
          <td><a href="#">7</a></td>
		</tr>
        <tr>
          <td><a href="#">8</a></td>
          <td><a href="#">9</a></td>
          <td><a href="#">10</a></td>
          <td><a href="#">11</a></td>
          <td><a href="#">12</a></td>
          <td><a href="#">13</a></td>
          <td><a href="#">14</a></td>
        </tr>
        <tr>
          <td><a href="#">15</a></td>
          <td><a href="#">16</a></td>
          <td><a href="#">17</a></td>
          <td><a href="#">18</a></td>
          <td><a href="#">19</a></td>
          <td><a href="#">20</a></td>
          <td><a href="#">21</a></td>
        </tr>
        <tr>		  
          <td><a href="#">22</a></td>
          <td><a href="#">23<br />
		  <a href="/page1.htm">Статья 1</a> <a href="/page2.htm">Статья 2</a></a></td>
          <td><a href="#">24</a></td>
          <td><a href="#">25</a></td>
          <td><a href="#">26</a></td>
          <td><a href="#">27</a></td>
          <td><a href="#">28</a></td>
        </tr>
        <tr>
          <td><a href="#">29</a></td>
          <td><a href="#">30</a></td>
          <td><a href="#">31</a></td>
          <td class="off"><a href="#">1</a></td>
          <td class="off"><a href="#">2</a></td>
          <td class="off"><a href="#">3</a></td>
          <td class="off"><a href="#">4</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Календарь после добавления нескольких событий

Ссылка на исходники

Comments

[Ankhena]

1. Вообще уберите исходные a из ячеек. Перепишите стили.
2. И уберите из кода про древние ИЕ, вряд ли ваша целевая аудитория ими действительно пользуется.
3.
Если п.1. не достаточно, то
Выложите код в песочницу на jsfiddle.net или codepen.io

[Николай]

Ankhena, добавил код в jsfiddle.net. С CSS плохо знаком, пробовал вместо тега а эффекты присваивать ячейкам таблицы, но как несложно догадаться не вышло ничего путного.

[Ankhena]

Николай, а js от него где?

[Николай]

Ankhena, не используется там js как я понял

[Ankhena]

Николай, ээээ а месяцы как переключаются?

[Николай]

Ankhena, я предполагал, что будут отдельные html страницы для каждого месяца, а в дальнейшем будет добавлена страница с всеми месяцами для более быстрой навигации, по типу обычных календарей при нажатии на месяц и всё отдельными страницами. Это конечно прошлый век, но пока переход к чему то более современному не предвидится.

[Ankhena]

Николай,
Понятно.
Стили от ссылок нужно присвоить к td.
Номера дней вместо ссылки обернуть в span.
Ячейкам задать вертикальное выравнивание по верху vertical-align: top
Поставить отступы.
Возможно, разобраться с границами.
Возможно, будет удобнее работать с моделью box-sizing: border-box.

Также:
Обдумать количество ссылок и длину текста.
Дело в том, что сейчас ячейки закрашены градиентом. При увеличении какой-то строки, градиент в ней будет выглядеть не так, как в остальных. Т.е. нужно либо обрезать текст так, чтобы ячейки (строки) были всегда одинаковой высоты либо изменить точки градиента (не в процентах, а фикс) либо заменить его на чистый цвет.

И, судя по наличию в стилях класса .active javascript там всё таки подразумевался.

Может быть, вам подойдет гугло-календарь?
https://support.google.com/calendar/answer/41207?hl=ru

[Николай]

Ankhena, гугл календарь пробовал, выглядит он слишком просто, но у меня возникли проблемы с ссылками на статьи. Не знаю разберусь ли с этой проблемой.
Насчет js вероятно Вы правы, но оригинальный календарь найти не удалось, он старый и сайт разработчика не работает.
В ближайшее время попробую переделать стили и присвоить их тегу td.

Answer 1

[dk-web]

В вашем случае как минимум без js не обойтись, есть jquery календари неплохие.
Но комплексное решение -
https://fullcalendar.io

Comments

[Николай]

Попробую разобраться. Для человека несведущего в данной области довольно сложно разобрать в подобном. Это скорее на крайний случай в данной ситуации.