Календарь

Календарь — отдельный модуль для добавления в него различных событий. Применялся на GD вики. (Ссылка на модуль)

## Работа с календарём

### Введение

В чистом виде календарь является большой конструкцией с множеством тегов, классов и надписей, которую было трудно понять и изменить. На данный момент большинство работы было перенесено в Модуль:Calendar, а читабельность самого вызова модуля намного выше.

### Пример использования

Типичный код при использовании календаря выглядит так (для большей красоты этот код стоит добавить внутрь тега `<center></center>`):

```
11+bd+День рождения отмечает SimonOriole!;
12+bd+День рождения отмечает FishTV!;
15+mixed+День рождения отмечает кто-то + какой-то конкурс!;
24+bd+День рождения отмечает Gameman120!;
30+bd+День рождения отмечают Retention и Батька Таттлтейл!
}}
```

Ниже будут рассмотрены составляющие данного календаря (слева направо):

* `**{{#invoke:Calendar**` — вызов модуля Calendar (всегда одинаково);
* `**generate**` — вызов метода generate в модуле (точкой входа является только он);
* `**31**` — количество дней в выбранном месяце (если делаете календарь для марта — указываете `**31**`);
* `**Март 2019:**` — заголовок у календарного листа;

* Далее идут два числа (`**25**` и `**28**`), которые указывают последние дни предыдущего месяца, если они есть на календарном листке (см. изображение). В случае, если месяц начинается с понедельника — оба числа должны быть равны `**0**`;
* В конце календаря идёт последний блок — записи с информацией о событиях, которые будут рассмотрены в разделе ниже (и после которого идут закрывающие скобки `**}}**`).

### Записи о событиях

В блоке находятся записи, отделённые друг от друга точкой с запятой (`**;**`). Ниже виден пример записи:

```
11+bd+День рождения отмечает SimonOriole!

```

Каждая запись содержит в себе следующую информацию, которая отделяется друг от друга плюсами:

* День, в который происходит событие;
* Тип события. На данный момент есть три типа:
	+ `**event**` — какое-либо событие на вики, например конкурс или выбор избранной статьи;
	+ `**bd**` — день рождения участника;
	+ `**mixed**` — используется тогда, когда событие и день рождения происходят в один день.
* Текстовая информация, которая будет видна при наведении/нажатии на этот день в календаре (здесь не должны использоваться `**;**` и `**+**`).

## Результат

В результате код, указанный в самом начале, даст такой результат:

Март 2019:
ПнВтСрЧтПтСбВс
2526272823
45678910
13141617
181920212223
252627282931

**Просмотр кода**

CSS для отображения календаря:

```
.calend {
  display: inline-block;
  width: 40px;
  height: 30px;
  padding: 10px;
  background-color: white;
  border:1px solid #555;
  font-size:24px;
}

.calend-small {
  display: inline-block;
  width: 20px;
  height: 15px;
  padding: 6px;
  border:1px solid #555;
  font-size:14px;
  background-color: white;
}

.calweekend {
    color: red;
}

.calothermonth {
    color: #aaa;
}

.calothermonthwe {
    color: #FFA6A6;
}

.calend:hover, .calend-small:hover {
    background-color: #C9FFA9 !important;
}

.caltooltip {
  display: inline-block;
  position: relative;
  cursor: help;
}

.cltporange {
    background: #FFEBC6;
}

.cltpblue {
    background: #CBFFFE;
}

.cltpmixed {
    background: #ACFFCE;
}
/* стиль появляющейся подсказки */
.caltooltip > span {
  color: black;
  position: absolute;
  bottom: 100%;
  left: -20em;
  right: -20em;
  width: -moz-max-content;
  width: -webkit-max-content;
  width: max-content;
  max-width: 20em;
  overflow: auto;
  visibility: hidden;
  margin: 0 auto .4em;
  padding: .3em;
  border: solid rgb(200,200,200);
  font-size: 16px;
  background: #fff;
  line-height: normal;
  cursor: auto;
  color: black;
}

.caltooltip-small > span {
    font-size: 14px !important;
}

 /* треугольник под подсказкой */
.caltooltip:after {
  content: "";
  position: absolute;
  top: -.6em;
  left: 50%;
  visibility: hidden;
  margin: 0 0 0 -.4em;
  border: .4em solid;
  font-size:14px;
  border-color: rgb(200,200,200) transparent transparent transparent;
  cursor: auto;
}

.caltooltip-small:after {
  	top: -.4em;
    font-size: 12px !important;
}

 /* поле между текстом и подсказкой */
.caltooltip:before {
  content: "";
  position: absolute;
  top: -.4em;
  left: 0;
  right: 0;
  height: .4em;
  visibility: hidden;
}

/* появление не сразу */
.caltooltip:hover > span,
.caltooltip:hover:before,
.caltooltip:hover:after,
.caltooltip:focus > span,
.caltooltip:focus:before,
.caltooltip:focus:after {
  visibility: visible;
  transition: 0s .1s;
}
 /* Убрать рамку в Хроме */
.caltooltip:focus {
  outline: none;
}
/* ширина подсказки может быть не более ширины окна браузера */
@media (max-width: 20em) {
  .caltooltip > span {
    box-sizing: border-box;
  }
}

```