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.

Estamos actualizando todas las fichas de los componentes. Para conocer más sobre los lineamientos de uso del componente podés visitar la documentación en Obelisco v.1.


Predeterminado

Enero

2024
DLMMJVS
123456
78910111213
14151617181920
21222324252627
28293031
<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

Enero

2024
DLMMJVS
123456
78910111213
14151617181920
21222324252627
28293031
<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
DLMMJVS
123456
78910111213
14151617181920
21222324252627
28293031
<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
DLMMJVS
123456
78910111213
14151617181920
21222324252627
28293031

 <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
DLMMJVS
123456
78910111213
14151617181920
21222324252627
28293031
<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
DLMMJVS
123456
78910111213
14151617181920
21222324252627
28293031

Febrero

2024
DLMMJVS
123
45678910
11121314151617
18192021222324
2526272829

Marzo

2024
DLMMJVS
12
3456789
10111213141516
17181920212223
24252627282930
31

Abril

2024
DLMMJVS
123456
78910111213
14151617181920
21222324252627
282930

Mayo

2024
DLMMJVS
1234
567891011
12131415161718
19202122232425
262728293031

Junio

2024
DLMMJVS
1
2345678
9101112131415
16171819202122
23242526272829
30

Julio

2024
DLMMJVS
123456
78910111213
14151617181920
21222324252627
28293031

Agosto

2024
DLMMJVS
123
45678910
11121314151617
18192021222324
25262728293031

Septiembre

2024
DLMMJVS
1234567
891011121314
15161718192021
22232425262728
2930

Octubre

2024
DLMMJVS
12345
6789101112
13141516171819
20212223242526
2728293031

Noviembre

2024
DLMMJVS
12
3456789
10111213141516
17181920212223
24252627282930

Diciembre

2024
DLMMJVS
1234567
891011121314
15161718192021
22232425262728
293031
<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>

Navegación de pie de página