Calendario colaborativo

calendario-colaborativo.markdown

Calendario colaborativo

A Pen by Joel Alejandro Villarreal Bertoldi on CodePen.

License.

index.html

<div class="calendario">
  <div class="meses">
    <button><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-512.png"></button>
    <div class="nombre-mes">Marzo 2020</div>
    <button class="boton-derecho"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-512.png"></button>
  </div>
  <div class="dias-semana">
    <div>L</div>
    <div>M</div>
    <div>M</div>
    <div>J</div>
    <div>V</div>
    <div>S</div>
    <div>D</div>
  </div>
  <div class="dias">
    <div class="dias-numero dia-otro-mes">24</div>
    <div class="dias-numero dia-otro-mes">25</div>
    <div class="dias-numero dia-otro-mes">26</div>
    <div class="dias-numero dia-otro-mes">27</div>
    <div class="dias-numero dia-otro-mes">28</div>  
    <div class="dias-numero dia-otro-mes">29</div>  
    <div class="dias-numero">1</div>
    <div class="dias-numero">2</div>
    <div class="dias-numero">3</div>
    <div class="dias-numero">4</div>
    <div class="dias-numero">5</div>
    <div class="dias-numero">6</div>
    <div class="dias-numero">7</div>
    <div class="dias-numero">8</div>
    <div class="dias-numero">9</div>
    <div class="dias-numero">10</div>
    <div class="dias-numero">11</div>
    <div class="dias-numero">12</div>
    <div class="dias-numero">13</div>
    <div class="dias-numero">14</div>
    <div class="dias-numero">15</div>
    <div class="dias-numero">16</div>
    <div class="dias-numero">17</div>
    <div class="dias-numero">18</div>
    <div class="dias-numero">19</div>
    <div class="dias-numero">20</div>
    <div class="dias-numero">21</div>
    <div class="dias-numero">22</div>
    <div class="dias-numero">23</div>
    <div class="dias-numero">24</div>
    <div class="dias-numero">25</div>
    <div class="dias-numero">26</div>
    <div class="dias-numero">27</div>
    <div class="dias-numero">28</div>
    <div class="dias-numero">29</div>
    <div class="dias-numero">30</div>
    <div class="dias-numero">31</div>
    <div class="dias-numero dia-otro-mes">1</div>
    <div class="dias-numero dia-otro-mes">2</div>
    <div class="dias-numero dia-otro-mes">3</div>
    <div class="dias-numero dia-otro-mes">4</div>
    <div class="dias-numero dia-otro-mes">5</div>  
  </div>
</div>

style.css

.calendario * {
  box-sizing: border-box;
}

.calendario {
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
  width: 250px;
  font-family: sans-serif; 
}

.meses {
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background-color: lightgrey;
}

.meses, .dias-semana, .dias {
  display: flex;
 flex-direction: row;
}

.dias {
  flex-wrap: wrap;
  justify-content: space-around;
}

.dias-otro-mes {
  color: grey;
}

.dias-semana {
  justify-content: space-between;
  background-color: rgb(230, 230, 230);
  padding: 10px 0;
}
.dias-semana div, .dias-numero {
  width: 35.71px;
  text-align: center;
}
.dias-numero {
	padding: 0.5rem;
	color: black;
}
.calendario button img {
  width: 15px;
}
.boton-derecho img {
   transform: scaleX(-1);
 }

/*
Ejercicio:

1. Aplicar media queries para que en una pantalla grande,
el calendario ocupe el 100% de la pantalla, tanto en ancho
como en alto.

2. El calendario en mobile tiene un ancho definido.
Apliquemos el 100% de ancho cuando la pantalla sea al menos
tan ancha como el calendario en mobile.
*/
@media screen and (min-width:250px) {
  .calendario {
    width: 100%;
  }

  .dias-numero, .dia-otro-mes {
    width: 14.28%;
  }

  .dias-semana {
    justify-content: space-around;
  }
  
  .meses {
    justify-content: center;   
  }
  .nombre-mes {
    padding: 0 100px;
  }

}

/*
3. Para la vista impresa del calendario, quiero que ocupe
el tamaño de una hoja A4 (29.7cm x 21cm) y que no se vean
los botones.
*/
@media print {
  /* y body? y html? */
  
  .calendario {
    width: 27cm;
    height: 21cm;    
  }
  
  .meses button {
    display: none;
  }
  
  .dias-numero, .dia-otro-mes {
    width: 14.28%;
  }

  .dias-semana {
    justify-content: space-around;
  }
  
  .meses {
    justify-content: center;   
  }
  
  .nombre-mes {
    padding: 0 100px;
  }
  
  .dias {
    align-items: space-between;
  }
}