<div class="c-calendar">
<ul class="c-calendar__weekdays">
<li aria-label="Lunedì">Lun</li>
<li aria-label="Martedì">Mar</li>
<li aria-label="Mercoledì">Mer</li>
<li aria-label="Giovedì">Gio</li>
<li aria-label="Venerdì">Ven</li>
<li aria-label="Sabato">Sab</li>
<li aria-label="Domenica">Dom</li>
</ul>
<ul class="c-calendar__day-grid">
<li class="ghost-day">
<span>29</span>
</li>
<li class="ghost-day">
<span>30</span>
</li>
<li class="ghost-day">
<span>31</span>
</li>
<li class="">
<span>1</span>
</li>
<li class="">
<span>2</span>
</li>
<li class="active-day">
<a href="#">
<span>3</span>
</a>
</li>
<li class="">
<span>4</span>
</li>
<li class="active-day">
<a href="#">
<span>5</span>
</a>
</li>
<li class="">
<span>6</span>
</li>
<li class="active-day">
<a href="#">
<span>7</span>
</a>
</li>
<li class="">
<span>8</span>
</li>
<li class="">
<span>9</span>
</li>
<li class="active-day">
<a href="#">
<span>10</span>
</a>
</li>
<li class="">
<span>11</span>
</li>
<li class="active-day">
<a href="#">
<span>12</span>
</a>
</li>
<li class="">
<span>13</span>
</li>
<li class="active-day">
<a href="#">
<span>14</span>
</a>
</li>
<li class="">
<span>15</span>
</li>
<li class="">
<span>16</span>
</li>
<li class="active-day">
<a href="#">
<span>17</span>
</a>
</li>
<li class="">
<span>18</span>
</li>
<li class="active-day">
<a href="#">
<span>19</span>
</a>
</li>
<li class="">
<span>20</span>
</li>
<li class="active-day">
<a href="#">
<span>21</span>
</a>
</li>
<li class="">
<span>22</span>
</li>
<li class="">
<span>23</span>
</li>
<li class="active-day">
<a href="#">
<span>24</span>
</a>
</li>
<li class="">
<span>25</span>
</li>
<li class="active-day">
<a href="#">
<span>26</span>
</a>
</li>
<li class="">
<span>27</span>
</li>
<li class="active-day">
<a href="#">
<span>28</span>
</a>
</li>
<li class="">
<span>29</span>
</li>
<li class="">
<span>30</span>
</li>
<li class="ghost-day">
<span>1</span>
</li>
<li class="ghost-day">
<span>2</span>
</li>
</ul>
</div>
<div class="c-dialog c-dialog--dayflight js-fr-dialogmodal " id="dialog-dayflight">
<div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-dayflight-title">
<div role="document">
<p class="c-dialog__title" id="dialog-dayflight-title">Mercoledì <strong>25 Aprile 2018</strong> Andata BLQ > ATH</p>
<div class="flightDetail">
<p class="flightDetail__companyName">Alitalia</p>
<div class="flightDetail__list">
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
<div class="c-trait__el new">
<span class="c-rounded-label c-rounded-label--grey u-typo-level-1">
<span aria-hidden="true">★</span> <strong>Novità</strong>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
<div class="c-trait__el new">
<span class="c-rounded-label c-rounded-label--grey u-typo-level-1">
<span aria-hidden="true">★</span> <strong>Novità</strong>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
<div class="c-trait__el new">
</div>
</div>
</div>
</div>
</div>
</div>
<p class="flightDetail__companyName">Ryanair</p>
<div class="flightDetail__list">
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
</div>
</div>
</div>
</div>
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
</div>
</div>
</div>
</div>
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
</div>
</div>
<div class="c-calendar">
<ul class="c-calendar__weekdays">
<li aria-label="Lunedì">Lun</li>
<li aria-label="Martedì">Mar</li>
<li aria-label="Mercoledì">Mer</li>
<li aria-label="Giovedì">Gio</li>
<li aria-label="Venerdì">Ven</li>
<li aria-label="Sabato">Sab</li>
<li aria-label="Domenica">Dom</li>
</ul>
<ul class="c-calendar__day-grid">
{{#each days}}
<li class="{{ this.class }}">
{{#equalTo this.class "active-day"}}
<a href="#">
<span>{{ this.day }}</span>
</a>
{{else}}
<span>{{ this.day }}</span>
{{/equalTo}}
</li>
{{/each}}
</ul>
</div>
{{ render "@dialog--dayflight" }}
{
"days": [
{
"day": 29,
"class": "ghost-day"
},
{
"day": 30,
"class": "ghost-day"
},
{
"day": 31,
"class": "ghost-day"
},
{
"day": 1
},
{
"day": 2
},
{
"day": 3,
"class": "active-day"
},
{
"day": 4
},
{
"day": 5,
"class": "active-day"
},
{
"day": 6
},
{
"day": 7,
"class": "active-day"
},
{
"day": 8
},
{
"day": 9
},
{
"day": 10,
"class": "active-day"
},
{
"day": 11
},
{
"day": 12,
"class": "active-day"
},
{
"day": 13
},
{
"day": 14,
"class": "active-day"
},
{
"day": 15
},
{
"day": 16
},
{
"day": 17,
"class": "active-day"
},
{
"day": 18
},
{
"day": 19,
"class": "active-day"
},
{
"day": 20
},
{
"day": 21,
"class": "active-day"
},
{
"day": 22
},
{
"day": 23
},
{
"day": 24,
"class": "active-day"
},
{
"day": 25
},
{
"day": 26,
"class": "active-day"
},
{
"day": 27
},
{
"day": 28,
"class": "active-day"
},
{
"day": 29
},
{
"day": 30
},
{
"day": 1,
"class": "ghost-day"
},
{
"day": 2,
"class": "ghost-day"
}
]
}
.c-calendar__weekdays,
.c-calendar__day-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@supports (display: grid) {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 0;
flex-direction: initial;
flex-wrap: initial;
}
li {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
margin-left: 0;
width: 14%; // For flex usage
flex-grow: 1;
@supports (display: grid) {
width: auto;
}
}
}
.c-calendar__weekdays {
margin-bottom: remify(16px);
}
.c-calendar__day-grid {
background-color: primary(sky, 20);
border: remify(2px) solid primary(sky, 20);
@include shadow(medium);
@supports (display: grid) {
grid-gap: remify(2px);
}
li {
background-color: secondary(page, 100);
height: 12vw;
max-height: remify(125px);
align-items: flex-start;
justify-content: flex-start;
padding: 1vw;
border: 1px solid primary(sky, 20);
border-width: 1px 0 0 1px;
@supports (display: grid) {
border : none;
}
}
span {
font-size: 85%;
line-height: remify(24px);
@include min-screen(bp(tablet)) {
font-size: 100%;
}
}
.flight-companies {
display: flex;
}
.company {
display: none;
@include min-screen(bp(tablet-p)) {
display: inline-block;
margin-top: 1vw;
text-align: center;
}
}
li.ghost-day {
color: primary(sky, 20);
}
li.active-day {
background-color: #fff;
padding: 0;
a {
padding: 1vw;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
span {
display: block;
background-color: primary(sky, 120);
color: #fff;
font-weight: fw(bold);
border-radius: remify(20px);
width: remify(24px);
height: remify(24px);
text-align: center;
@include min-screen(bp(tablet-l)) {
background-color: transparent;
color: primary(sky, 120);
// text-decoration: underline;
}
}
}
}
.c-calendar__hint {
margin-top: remify(24px);
display: block;
}
/*------------------------------------*\
Flights modifier
\*------------------------------------*/
.c-calendar--flights {
.airports {
color: primary(night, 80);
text-align: center;
margin-bottom: remify(16px);
font-size: 75%;
@include min-screen(bp(tablet)) {
font-size: 100%;
}
li {
display: inline-block;
padding: remify(8px) remify(16px);
}
a {
color: currentColor;
text-transform: uppercase;
&.is-active {
font-weight: fw(bold);
text-decoration: none;
color: primary(night, 100);
}
}
}
.filters {
margin-bottom: remify(8px);
@include min-screen(bp(tablet)) {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: remify(16px);
}
}
.filters__child {
@include min-screen(bp(tablet)) {
flex: 1 1 auto;
}
}
.route {
@include min-screen(bp(tablet)) {
order: 1;
}
text-align: left;
.is-label {
color: primary(night, 100);
font-weight: fw(bold);
display: block;
width: 100%;
text-align: left;
}
}
.companies {
display: flex;
justify-content: center;
align-items: center;
@include min-screen(bp(tablet)) {
order: 3;
}
label {
color: primary(night, 100);
font-weight: fw(bold);
display: block;
width: 100%;
text-align: left;
}
i {
display: block;
font-weight: fw(regular);
}
}
.news {
@include min-screen(bp(tablet)) {
order: 4;
flex: 1 0 100%;
text-align: center;
margin-top: remify(24px);
}
label:not(:last-child) {
margin-right: remify(32px);
}
}
.months {
display: flex;
align-items: center;
justify-content: center;
@include min-screen(bp(tablet)) {
order: 2;
}
p {
color: primary(night, 100);
font-size: 150%;
margin: 0 remify(24px);
}
a {
max-height: remify(24px);
}
svg * {
fill: primary(night, 100);
}
}
}
If the <li> contains .active-day class, an <a> that opens a dialog is added.
Example:
...
<li class="">
<span>2</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>3</span>
</a>
</li>
<li class="">
<span>4</span>
</li>
...