Los calendarios de Spectre están diseñados para un selector de fecha o rango de fechas y para mostrar eventos. Está hecho con un diseño flexible, es útil para crear un calendario atractivo. El calendario se puede crear en diferentes tamaños, ya que puede ser predeterminado o grande según sus requisitos.
Clase de tamaño de calendario Spectre:
- calendar*: Esta clase es imprescindible para crear un calendario.
- calendar-lg: esta clase se utiliza para crear un calendario de gran tamaño.
Nota: La clase de marca * es imprescindible para crear un calendario.
Sintaxis:
<div class="calendar calendar-lg">
...
</div>
Ejemplo 1: en este ejemplo, crearemos un calendario predeterminado.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>Spectre Calendar Size</strong> <br><br> <div class="calendar"> <!-- calendar navbar --> <div class="calendar-nav navbar"> <button class="btn btn-action btn-link btn-lg"> <i class="icon icon-arrow-left"></i> </button> <div class="navbar-primary">July 2022</div> <button class="btn btn-action btn-link btn-lg"> <i class="icon icon-arrow-right"></i> </button> </div> <div class="calendar-container"> <div class="calendar-header"> <div class="calendar-date">Mon</div> <div class="calendar-date">Tue</div> <div class="calendar-date">Wed</div> <div class="calendar-date">Thu</div> <div class="calendar-date">Fri</div> <div class="calendar-date">Sat</div> <div class="calendar-date">Sun</div> </div> <div class="calendar-body"> <!-- calendar previous month --> <div class="calendar-date prev-month"> <button class="date-item">27</button> </div> <div class="calendar-date prev-month"> <button class="date-item">28</button> </div> <div class="calendar-date prev-month"> <button class="date-item">29</button> </div> <div class="calendar-date prev-month"> <button class="date-item">30</button> </div> <!-- calendar current month --> <div class="calendar-date"> <button class="date-item">1</button> </div> <div class="calendar-date"> <button class="date-item">2</button> </div> <div class="calendar-date"> <button class="date-item">3</button> </div> <!-- calendar date: today --> <div class="calendar-date"> <button class="date-item">4</button> </div> <!-- calendar date: tooltip --> <div class="calendar-date"> <button class="date-item">5</button> </div> <!-- calendar date: not available --> <div class="calendar-date tooltip" data-tooltip="Not available"> <button class="date-item" disabled=""> 6 </button> </div> <!-- calendar range --> <div class="calendar-date range-start"> <button class="date-item">7</button> </div> <div class="calendar-date"> <button class="date-item">8</button> </div> <div class="calendar-date"> <button class="date-item">9</button> </div> <div class="calendar-date"> <button class="date-item">10</button> </div> <div class="calendar-date"> <button class="date-item">11</button> </div> <div class="calendar-date"> <button class="date-item">12</button> </div> <div class="calendar-date"> <button class="date-item">13</button> </div> <div class="calendar-date"> <button class="date-item">14</button> </div> <div class="calendar-date "> <button class="date-item">15</button> </div> <div class="calendar-date"> <button class="date-item">16</button> </div> <div class="calendar-date"> <button class="date-item date-today"> 17 </button> </div> <div class="calendar-date"> <button class="date-item">18</button> </div> <div class="calendar-date calendar-range range-start"> <button class="date-item">19</button> </div> <div class="calendar-date calendar-range"> <button class="date-item">20</button> </div> <div class="calendar-date calendar-range"> <button class="date-item">21</button> </div> <div class="calendar-date calendar-range"> <button class="date-item">22</button> </div> <div class="calendar-date calendar-range"> <button class="date-item">23</button> </div> <div class="calendar-date calendar-range"> <button class="date-item">24</button> </div> <div class="calendar-date calendar-range"> <button class="date-item">25</button> </div> <div class="calendar-date calendar-range range-end"> <button class="date-item"> 26 </button> </div> <div class="calendar-date"> <button class="date-item tooltip" data-tooltip="You have appointments"> 27 </button> </div> <div class="calendar-date"> <button class="date-item">28</button> </div> <div class="calendar-date"> <button class="date-item">29</button> </div> <div class="calendar-date"> <button class="date-item">30</button> </div> <div class="calendar-date"> <button class="date-item">31</button> </div> </div> </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, crearemos un calendario grande.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>Spectre Calndar Size</strong> <br><br> <div class="calendar calendar-lg"> <!-- calendar navbar --> <div class="calendar-nav navbar"> <button class="btn btn-action btn-link btn-lg"> <i class="icon icon-arrow-left"></i> </button> <div class="navbar-primary">July 2022</div> <button class="btn btn-action btn-link btn-lg"> <i class="icon icon-arrow-right"></i> </button> </div> <div class="calendar-container"> <div class="calendar-header"> <div class="calendar-date">Mon</div> <div class="calendar-date">Tue</div> <div class="calendar-date">Wed</div> <div class="calendar-date">Thu</div> <div class="calendar-date">Fri</div> <div class="calendar-date">Sat</div> <div class="calendar-date">Sun</div> </div> <div class="calendar-body"> <!-- calendar previous month --> <div class="calendar-date prev-month"> <button class="date-item">27</button> </div> <div class="calendar-date prev-month"> <button class="date-item">28</button> </div> <div class="calendar-date prev-month"> <button class="date-item">29</button> </div> <div class="calendar-date prev-month"> <button class="date-item">30</button> </div> <!-- calendar current month --> <div class="calendar-date"> <button class="date-item">1</button> </div> <div class="calendar-date"> <button class="date-item">2</button> </div> <div class="calendar-date"> <button class="date-item">3</button> </div> <!-- calendar date: today --> <div class="calendar-date"> <button class="date-item">4</button> </div> <!-- calendar date: tooltip --> <div class="calendar-date"> <button class="date-item">5</button> </div> <!-- calendar date: not available --> <div class="calendar-date tooltip" data-tooltip="Not available"> <button class="date-item" disabled="">6</button> </div> <!-- calendar range --> <div class="calendar-date range-start"> <button class="date-item">7</button> </div> <div class="calendar-date"> <button class="date-item">8</button> </div> <div class="calendar-date"> <button class="date-item">9</button> </div> <div class="calendar-date"> <button class="date-item">10</button> </div> <div class="calendar-date"> <button class="date-item">11</button> </div> <div class="calendar-date"> <button class="date-item">12</button> </div> <div class="calendar-date"> <button class="date-item">13</button> </div> <div class="calendar-date"> <button class="date-item">14</button> </div> <div class="calendar-date "> <button class="date-item">15</button> </div> <div class="calendar-date"> <button class="date-item">16</button> </div> <div class="calendar-date"> <button class="date-item date-today">17</button> </div> <div class="calendar-date"> <button class="date-item">18</button> </div> <div class="calendar-date calendar-range range-start"> <button class="date-item">19</button> </div> <div class="calendar-date calendar-range"> <button class="date-item">20</button> </div> <div class="calendar-date calendar-range"> <button class="date-item">21</button> </div> <div class="calendar-date calendar-range"> <button class="date-item">22</button> </div> <div class="calendar-date calendar-range"> <button class="date-item">23</button> </div> <div class="calendar-date calendar-range"> <button class="date-item">24</button> </div> <div class="calendar-date calendar-range"> <button class="date-item">25</button> </div> <div class="calendar-date calendar-range range-end"> <button class="date-item">26</button> </div> <div class="calendar-date"> <button class="date-item tooltip" data-tooltip="You have appointments">27</button> </div> <div class="calendar-date"> <button class="date-item">28</button> </div> <div class="calendar-date"> <button class="date-item">29</button> </div> <div class="calendar-date"> <button class="date-item">30</button> </div> <div class="calendar-date"> <button class="date-item">31</button> </div> </div> </div> </div> </center> </body> </html>
Producción:
Tamaño del calendario de Spectre
Referencia: https://picturepan2.github.io/spectre/experimentals/calendars.html#calendars-sizes
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA