Calendario
El calendario es una representación visual en forma de tabla que exhibe eventos y fechas importantes correspondientes a los días de la semana de un mes determinado.
Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.
Predeterminado
Enero
2024| D | L | M | M | J | V | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | |||
- 1. Nombre del evento.
- 10. Nombre del evento.
- 25. Nombre del evento.
<div class="calendar">
<div class="calendar-header">
<h2 class="calendar-title">Enero</h2>
<span class="calendar-year">2024</span>
</div>
<div class="calendar-body">
<table>
<thead>
<tr class="calendar-week-header">
<th><span>D</span></th>
<th><span>L</span></th>
<th><span>M</span></th>
<th><span>M</span></th>
<th><span>J</span></th>
<th><span>V</span></th>
<th><span>S</span></th>
</tr>
</thead>
<tbody>
<tr class="calendar-week">
<td></td>
<td>
<span title="Nombre del evento.">
<span class="active">1</span>
</span>
</td>
<td><span>2</span></td>
<td><span>3</span></td>
<td><span>4</span></td>
<td><span>5</span></td>
<td><span>6</span></td>
</tr>
<tr class="calendar-week">
<td><span>7</span></td>
<td><span>8</span></td>
<td><span>9</span></td>
<td>
<span title="Nombre del evento.">
<span class="active">10</span>
</span>
</td>
<td><span>11</span></td>
<td><span>12</span></td>
<td><span>13</span></td>
</tr>
<tr class="calendar-week">
<td><span>14</span></td>
<td><span>15</span></td>
<td><span>16</span></td>
<td><span>17</span></td>
<td><span>18</span></td>
<td><span>19</span></td>
<td><span>20</span></td>
</tr>
<tr class="calendar-week">
<td><span>21</span></td>
<td><span>22</span></td>
<td><span>23</span></td>
<td><span>24</span></td>
<td>
<span title="Nombre del evento.">
<span class="active">25</span>
</span>
</td>
<td><span>26</span></td>
<td><span>27</span></td>
</tr>
<tr class="calendar-week">
<td><span>28</span></td>
<td><span>29</span></td>
<td><span>30</span></td>
<td><span>31</span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr class="calendar-week">
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
</tbody>
</table>
</div>
<div class="calendar-footer">
<ul class="calendar-footer-list">
<li>
<strong>1. </strong>
Nombre del evento.
</li>
<li>
<strong>10. </strong>
Nombre del evento.
</li>
<li>
<strong>25. </strong>
Nombre del evento.
</li>
</ul>
</div>
</div>Con enlaces
<div class="calendar">
<div class="calendar-header">
<h2 class="calendar-title">Enero</h2>
<span class="calendar-year">2024</span>
</div>
<div class="calendar-body">
<table>
<thead>
<tr class="calendar-week-header">
<th><span>D</span></th>
<th><span>L</span></th>
<th><span>M</span></th>
<th><span>M</span></th>
<th><span>J</span></th>
<th><span>V</span></th>
<th><span>S</span></th>
</tr>
</thead>
<tbody>
<tr class="calendar-week">
<td></td>
<td>
<a href="#" class="calendar-link" title="Nombre del evento.">
<span class="active">1</span>
</a>
</td>
<td><span>2</span></td>
<td><span>3</span></td>
<td><span>4</span></td>
<td><span>5</span></td>
<td><span>6</span></td>
</tr>
<tr class="calendar-week">
<td><span>7</span></td>
<td><span>8</span></td>
<td><span>9</span></td>
<td>
<a href="#" class="calendar-link" title="Nombre del evento.">
<span class="active">10</span>
</a>
</td>
<td><span>11</span></td>
<td><span>12</span></td>
<td><span>13</span></td>
</tr>
<tr class="calendar-week">
<td><span>14</span></td>
<td><span>15</span></td>
<td><span>16</span></td>
<td><span>17</span></td>
<td><span>18</span></td>
<td><span>19</span></td>
<td><span>20</span></td>
</tr>
<tr class="calendar-week">
<td><span>21</span></td>
<td><span>22</span></td>
<td><span>23</span></td>
<td><span>24</span></td>
<td>
<a href="#" class="calendar-link" title="Nombre del evento.">
<span class="active">25</span>
</a>
</td>
<td><span>26</span></td>
<td><span>27</span></td>
</tr>
<tr class="calendar-week">
<td><span>28</span></td>
<td><span>29</span></td>
<td><span>30</span></td>
<td><span>31</span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr class="calendar-week">
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
</tbody>
</table>
</div>
<div class="calendar-footer">
<ul class="calendar-footer-list">
<li>
<strong>1. </strong>
Nombre del evento.
</li>
<li>
<strong>10. </strong>
Nombre del evento.
</li>
<li>
<strong>25. </strong>
Nombre del evento.
</li>
</ul>
</div>
</div>Con dos referencias
Enero
2024| D | L | M | M | J | V | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | |||
- 1. Nombre del evento.
- 9. Nombre del evento.
- 12, 13. Nombre del evento.
- 25 al 27. Nombre del evento.
<div class="calendar">
<div class="calendar-header">
<h2 class="calendar-title">Enero</h2>
<span class="calendar-year">2024</span>
</div>
<div class="calendar-body">
<table>
<thead>
<tr class="calendar-week-header">
<th><span>D</span></th>
<th><span>L</span></th>
<th><span>M</span></th>
<th><span>M</span></th>
<th><span>J</span></th>
<th><span>V</span></th>
<th><span>S</span></th>
</tr>
</thead>
<tbody>
<tr class="calendar-week">
<td></td>
<td>
<span title="Nombre del evento.">
<span class="active-secondary">1</span>
</span>
</td>
<td><span>2</span></td>
<td><span>3</span></td>
<td><span>4</span></td>
<td><span>5</span></td>
<td><span>6</span></td>
</tr>
<tr class="calendar-week">
<td><span>7</span></td>
<td><span>8</span></td>
<td>
<span title="Nombre del evento.">
<span class="active">9</span>
</span>
</td>
<td><span>10</span></td>
<td><span>11</span></td>
<td>
<span title="Nombre del evento.">
<span class="active-secondary">12</span>
</span>
</td>
<td>
<span title="Nombre del evento.">
<span class="active-secondary">13</span>
</span>
</td>
</tr>
<tr class="calendar-week">
<td><span>14</span></td>
<td><span>15</span></td>
<td><span>16</span></td>
<td><span>17</span></td>
<td><span>18</span></td>
<td><span>19</span></td>
<td><span>20</span></td>
</tr>
<tr class="calendar-week">
<td><span>21</span></td>
<td><span>22</span></td>
<td><span>23</span></td>
<td><span>24</span></td>
<td>
<span title="Nombre del evento.">
<span class="active">25</span>
</span>
</td>
<td>
<span title="Nombre del evento.">
<span class="active">26</span>
</span>
</td>
<td>
<span title="Nombre del evento.">
<span class="active">27</span>
</span>
</td>
</tr>
<tr class="calendar-week">
<td><span>28</span></td>
<td><span>29</span></td>
<td><span>30</span></td>
<td><span>31</span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr class="calendar-week">
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
</tbody>
</table>
</div>
<div class="calendar-footer">
<ul class="calendar-footer-list">
<li>
<strong>1. </strong>
Nombre del evento.
</li>
<li>
<strong>9. </strong>
Nombre del evento.
</li>
<li>
<strong>12, 13. </strong>
Nombre del evento.
</li>
<li>
<strong>25 al 27. </strong>
Nombre del evento.
</li>
</ul>
</div>
</div>Con colapsable
Enero
2024| D | L | M | M | J | V | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | |||
- 1. Nombre del evento.
- 10. Nombre del evento.
- 12. Nombre del evento.
- 15. Nombre del evento.
- 23. Nombre del evento.
- 27. Nombre del evento.
<div className="calendar">
<div className="calendar-header">
<h2 className="calendar-title">Enero</h2>
<span className="calendar-year">2024</span>
</div>
<div className="calendar-body">
<table>
<thead>
<tr className="calendar-week-header">
<th>
<span>D</span>
</th>
<th>
<span>L</span>
</th>
<th>
<span>M</span>
</th>
<th>
<span>M</span>
</th>
<th>
<span>J</span>
</th>
<th>
<span>V</span>
</th>
<th>
<span>S</span>
</th>
</tr>
</thead>
<tbody>
<tr className="calendar-week">
<td></td>
<td>
<span title="Nombre del evento.">
<span className="active">1</span>
</span>
</td>
<td>
<span>2</span>
</td>
<td>
<span>3</span>
</td>
<td>
<span>4</span>
</td>
<td>
<span>5</span>
</td>
<td>
<span>6</span>
</td>
</tr>
<tr className="calendar-week">
<td>
<span>7</span>
</td>
<td>
<span>8</span>
</td>
<td>
<span>9</span>
</td>
<td>
<span title="Nombre del evento.">
<span className="active">10</span>
</span>
</td>
<td>
<span>11</span>
</td>
<td>
<span title="Nombre del evento.">
<span className="active">12</span>
</span>
</td>
<td>
<span>13</span>
</td>
</tr>
<tr className="calendar-week">
<td>
<span>14</span>
</td>
<td>
<span title="Nombre del evento.">
<span className="active">15</span>
</span>
</td>
<td>
<span>16</span>
</td>
<td>
<span>17</span>
</td>
<td>
<span>18</span>
</td>
<td>
<span>19</span>
</td>
<td>
<span>20</span>
</td>
</tr>
<tr className="calendar-week">
<td>
<span>21</span>
</td>
<td>
<span>22</span>
</td>
<td>
<span title="Nombre del evento.">
<span className="active">23</span>
</span>
</td>
<td>
<span>24</span>
</td>
<td>
<span>25</span>
</td>
<td>
<span>26</span>
</td>
<td>
<span title="Nombre del evento.">
<span className="active">27</span>
</span>
</td>
</tr>
<tr className="calendar-week">
<td>
<span>28</span>
</td>
<td>
<span>29</span>
</td>
<td>
<span>30</span>
</td>
<td>
<span>31</span>
</td>
<td>
<span></span>
</td>
<td>
<span></span>
</td>
<td>
<span></span>
</td>
</tr>
<tr className="calendar-week">
<td>
<span></span>
</td>
<td>
<span></span>
</td>
<td>
<span></span>
</td>
<td>
<span></span>
</td>
<td>
<span></span>
</td>
<td>
<span></span>
</td>
<td>
<span></span>
</td>
</tr>
</tbody>
</table>
</div>
<div className="calendar-footer">
<div className="accordion-item">
<button
className="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseCalendar1"
aria-expanded="false"
aria-controls="collapseCalendar1"
>
<span className="material-symbols-rounded o-icon" aria-hidden="true">
calendar_month
</span>
<span className="collapse-title">Referencia</span>
</button>
<div id="collapseCalendar1" className="accordion-collapse collapse">
<div className="accordion-body">
<ul className="calendar-footer-list">
<li>
<strong>1. </strong>
Nombre del evento.
</li>
<li>
<strong>10. </strong>
Nombre del evento.
</li>
<li>
<strong>12. </strong>
Nombre del evento.
</li>
<li>
<strong>15. </strong>
Nombre del evento.
</li>
<li>
<strong>23. </strong>
Nombre del evento.
</li>
<li>
<strong>27. </strong>
Nombre del evento.
</li>
</ul>
</div>
</div>
</div>
</div>
</div>Sin eventos
Enero
2024| D | L | M | M | J | V | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | |||
<div class="calendar">
<div class="calendar-header">
<h2 class="calendar-title">Enero</h2>
<span class="calendar-year">2024</span>
</div>
<div class="calendar-body">
<table>
<thead>
<tr class="calendar-week-header">
<th><span>D</span></th>
<th><span>L</span></th>
<th><span>M</span></th>
<th><span>M</span></th>
<th><span>J</span></th>
<th><span>V</span></th>
<th><span>S</span></th>
</tr>
</thead>
<tbody>
<tr class="calendar-week">
<td></td>
<td><span>1</span></td>
<td><span>2</span></td>
<td><span>3</span></td>
<td><span>4</span></td>
<td><span>5</span></td>
<td><span>6</span></td>
</tr>
<tr class="calendar-week">
<td><span>7</span></td>
<td><span>8</span></td>
<td><span>9</span></td>
<td><span>10</span></td>
<td><span>11</span></td>
<td><span>12</span></td>
<td><span>13</span></td>
</tr>
<tr class="calendar-week">
<td><span>14</span></td>
<td><span>15</span></td>
<td><span>16</span></td>
<td><span>17</span></td>
<td><span>18</span></td>
<td><span>19</span></td>
<td><span>20</span></td>
</tr>
<tr class="calendar-week">
<td><span>21</span></td>
<td><span>22</span></td>
<td><span>23</span></td>
<td><span>24</span></td>
<td><span>25</span></td>
<td><span>26</span></td>
<td><span>27</span></td>
</tr>
<tr class="calendar-week">
<td><span>28</span></td>
<td><span>29</span></td>
<td><span>30</span></td>
<td><span>31</span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr class="calendar-week">
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
</tbody>
</table>
</div>
</div>Disposición
Enero
2024| D | L | M | M | J | V | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | |||
- 10. Nombre del evento.
- 26. Nombre del evento.
- 28. Nombre del evento.
Febrero
2024| D | L | M | M | J | V | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | ||
- 1. Nombre del evento.
<div class="calendar-deck">
<div class="calendar">
<div class="calendar-header">
<h2 class="calendar-title">Enero</h2>
<span class="calendar-year">2024</span>
</div>
<div class="calendar-body">
<table>
<thead>
<tr class="calendar-week-header">
<th><span>D</span></th>
<th><span>L</span></th>
<th><span>M</span></th>
<th><span>M</span></th>
<th><span>J</span></th>
<th><span>V</span></th>
<th><span>S</span></th>
</tr>
</thead>
<tbody>
<tr class="calendar-week">
<td></td>
<td><span>1</span></td>
<td><span>2</span></td>
<td><span>3</span></td>
<td><span>4</span></td>
<td><span>5</span></td>
<td><span>6</span></td>
</tr>
<tr class="calendar-week">
<td><span>7</span></td>
<td><span>8</span></td>
<td><span>9</span></td>
<td>
<span title="Nombre del evento.">
<span class="active">10</span>
</span>
</td>
<td><span>11</span></td>
<td><span>12</span></td>
<td><span>13</span></td>
</tr>
<tr class="calendar-week">
<td><span>14</span></td>
<td><span>15</span></td>
<td><span>16</span></td>
<td><span>17</span></td>
<td><span>18</span></td>
<td><span>19</span></td>
<td><span>20</span></td>
</tr>
<tr class="calendar-week">
<td><span>21</span></td>
<td><span>22</span></td>
<td><span>23</span></td>
<td><span>24</span></td>
<td><span>25</span></td>
<td>
<span title="Nombre del evento.">
<span class="active">26</span>
</span>
</td>
<td><span>27</span></td>
</tr>
<tr class="calendar-week">
<td>
<span title="Nombre del evento.">
<span class="active">28</span>
</span>
</td>
<td><span>29</span></td>
<td><span>30</span></td>
<td><span>31</span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr class="calendar-week">
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
</tbody>
</table>
</div>
<div class="calendar-footer">
<ul class="calendar-footer-list">
<li>
<strong>10. </strong>
Nombre del evento.
</li>
<li>
<strong>26. </strong>
Nombre del evento.
</li>
<li>
<strong>28. </strong>
Nombre del evento.
</li>
</ul>
</div>
</div>
<div class="calendar">
<div class="calendar-header">
<h2 class="calendar-title">Febrero</h2>
<span class="calendar-year">2024</span>
</div>
<div class="calendar-body">
<table>
<thead>
<tr class="calendar-week-header">
<th><span>D</span></th>
<th><span>L</span></th>
<th><span>M</span></th>
<th><span>M</span></th>
<th><span>J</span></th>
<th><span>V</span></th>
<th><span>S</span></th>
</tr>
</thead>
<tbody>
<tr class="calendar-week">
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<span title="Nombre del evento.">
<span class="active">1</span>
</span>
</td>
<td><span>2</span></td>
<td><span>3</span></td>
</tr>
<tr class="calendar-week">
<td><span>4</span></td>
<td><span>5</span></td>
<td><span>6</span></td>
<td><span>7</span></td>
<td><span>8</span></td>
<td><span>9</span></td>
<td><span>10</span></td>
</tr>
<tr class="calendar-week">
<td><span>11</span></td>
<td><span>12</span></td>
<td><span>13</span></td>
<td><span>14</span></td>
<td><span>15</span></td>
<td><span>16</span></td>
<td><span>17</span></td>
</tr>
<tr class="calendar-week">
<td><span>18</span></td>
<td><span>19</span></td>
<td><span>20</span></td>
<td><span>21</span></td>
<td><span>22</span></td>
<td><span>23</span></td>
<td><span>24</span></td>
</tr>
<tr class="calendar-week">
<td><span>25</span></td>
<td><span>26</span></td>
<td><span>27</span></td>
<td><span>28</span></td>
<td><span>29</span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr class="calendar-week">
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
</tbody>
</table>
</div>
<div class="calendar-footer">
<ul class="calendar-footer-list">
<li>
<strong>1. </strong>
Nombre del evento.
</li>
</ul>
</div>
</div>
</div>