[html]<style>

.calendar-wrapper {
    margin: auto;
    display: flex;
    padding:20px;
    width:450px;
    flex-direction: column;
    align-items: center;
    background:lightgray;
    border-radius: 25px;
}

.calendar-wrapper>h4 {
    color: #646a6e;
    font-family: sans-serif;
    font-size: 35px;
    background: #ffffff;
    width: 90%;
    text-align: center;
    border-radius: calc(infinity* 1px);
    margin: 0px 0px 17px;
}

.calendar-wrapper>ul>li {
    display: inline-flex;
    width: 60px;
    height: 60px;
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px !important;
    margin-bottom: 5px;
    margin-left: 5px;
    font-family: sans-serif;
    border-radius: 12px;
}

.calen-week {
display:flex;
padding:0px!important;
}
.calen-days {
display:flex;
padding:0px!important;
}

.calen-week>li {
    background: #646a6e;
    font-size: 25px;
    color: #ededed;
    font-weight: bold;
}
.calen-days>li{
    background: #e8eeef;
    font-size: 30px;
    color: #495258;
}

.extra-day {
opacity:.3;
}

.calen-tooltip-wrapper {
    position: relative;
    display: flex;
    cursor: pointer;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, rgba(140, 180, 180, 1) 0%, rgba(199, 255, 251, 1) 47%, rgba(137, 196, 203, 1) 100%);
    border-radius: 12px;
}

.calen-tooltip-content {
    display: none;
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #151d224f;
    color: #151718;
    padding: 5px !important;
    border-radius: 12px;
    font-family: sans-serif;
    text-align: justify;
    z-index: 1000;
    font-size: 12px;
    width: 300px;
    flex-direction: column;
    backdrop-filter: blur(4px);
    transition: ease-in-out .4s;
}

.active {
        display: flex;
}

.calen-tooltip-content>img {
    width: 300px;
    height: 85px;
    object-fit: cover;
    border-radius: 7px;
    margin-top: 5px;
}

.calen-tooltip-content>p {
     font-size: 13px !important;
    background: #e8eeefc2;
    color: black;
    padding: 2px 6px !important;
    border-radius: 7px;
}

.calen-tooltip-content::before {
    content: '';
    position: absolute;
    top: -32px;
    left: 50%;
    margin-left: -16px;
    border-width: 16px;
    border-style: solid;
    border-color: transparent transparent #9da0a3;
}

.day-with-tooltip {
    position: relative;
    display: flex;
    cursor: pointer;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, rgba(140, 180, 180, 1) 0%, rgba(199, 255, 251, 1) 47%, rgba(137, 196, 203, 1) 100%);
    border-radius: 12px;
}

</style>

[/html]

[html]
<section class="calendar-wrapper">
<h4>ОКТЯБРЬ</h4>
<ul class = "calen-week">
<li>ПН</li>
<li>ВТ</li>
<li>СР</li>
<li>ЧТ</li>
<li>ПТ</li>
<li>СБ</li>
<li>ВС</li>
</ul>

<ul class = "calen-days">
<li class="extra-day">29</li>
<li class="extra-day">30</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

<ul class = "calen-days">
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>

<ul class = "calen-days">
<li>13</li>
<li>
<div class="calen-tooltip-wrapper"> 14
    <div class="calen-tooltip-content"><p>
<center><p style="font-size: 13px;"><a href="https://lepidus.ru/viewtopic.php?id=6762#p279812"> Another Cold Case</a></p></center>
         </p>
    </div>
</div>
</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
</ul>

<ul class = "calen-days">
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
</ul>

<ul class = "calen-days">
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li class = "extra-day">1</li>
<li class = "extra-day">2</li>
</ul>
</section>
[/html]