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.
Clases de calendario de espectro:
- calendario: esta clase se utiliza para crear un contenedor de interfaz de calendario.
- calendar-nav: esta clase se utiliza para crear un calendario de navegación.
- contenedor de calendario: esta clase se utiliza para contener el elemento de encabezado de calendario .
- encabezado de calendario: esta clase se usa para contener los elementos de fecha del calendario como los días que vemos en un calendario.
- calendar-date: Esta clase se utiliza para mantener la fecha como cualquier día específico «Domingo».
- calendar-body: esta clase se utiliza para contener las fechas en forma de número.
- prev-month: esta clase contiene las fechas del mes anterior, que parecen inactivas.
- próximo mes: esta clase contiene las fechas del próximo mes, que parecen inactivas.
- elemento de fecha: esta clase contiene el número individual como una fecha.
- range-start: esta clase se utiliza para crear un rango.
- calendar-range: esta clase se utiliza para llevar el efecto de rango de principio a fin.
- range-end: esta clase se utiliza para finalizar un rango.
Tamaño del Calendario: Existen diferentes tamaños del calendario, podemos crearlos como queramos.
Ejemplo 1: en este ejemplo, crearemos la interfaz para julio de 2022, incluiremos un rango de una fecha de reunión y una fecha inactiva o no disponible. También mencionaremos la fecha actual.
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> <h3>SPECTRE Autocomplete</h3> <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 la interfaz del calendario de junio de 2022, haremos un rango más indicaremos los fines de semana en naranja.
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 Autocomplete</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">June 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">30</button> </div> <div class="calendar-date prev-month"> <button class="date-item">31</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> <div class="calendar-date"> <button class="date-item bg-error text-secondary">4</button> </div> <div class="calendar-date"> <button class="date-item bg-error text-secondary">5</button> </div> <!-- calendar date: today --> <div class="calendar-date"> <button class="date-item">6</button> </div> <!-- calendar date: tooltip --> <div class="calendar-date"> <button class="date-item">7</button> </div> <!-- calendar date: not available --> <div class="calendar-date"> <button class="date-item">8</button> </div> <!-- calendar range --> <div class="calendar-date range-start"> <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 bg-error text-secondary">11</button> </div> <div class="calendar-date"> <button class="date-item bg-error text-secondary">12</button> </div> <div class="calendar-date"> <button class="date-item">13</button> </div> <div class="calendar-date calendar-range range-start"> <button class="date-item ">14</button> </div> <div class="calendar-date calendar-range"> <button class="date-item">15</button> </div> <div class="calendar-date calendar-range range-end"> <button class="date-item ">16</button> </div> <div class="calendar-date "> <button class="date-item">17</button> </div> <div class="calendar-date"> <button class="date-item bg-error text-secondary">18</button> </div> <div class="calendar-date"> <button class="date-item bg-error text-secondary">19</button> </div> <div class="calendar-date"> <button class="date-item">20</button> </div> <div class="calendar-date"> <button class="date-item">24</button> </div> <div class="calendar-date"> <button class="date-item">22</button> </div> <div class="calendar-date"> <button class="date-item">23</button> </div> <div class="calendar-date"> <button class="date-item">24</button> </div> <div class="calendar-date"> <button class="date-item bg-error text-secondary">25</button> </div> <div class="calendar-date"> <button class="date-item bg-error text-secondary">26</button> </div> <div class="calendar-date"> <button class="date-item">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> <!-- Next Month --> <div class="calendar-date next-month"> <button class="date-item">1</button> </div> <div class="calendar-date next-month"> <button class="date-item">2</button> </div> <div class="calendar-date next-month"> <button class="date-item">3</button> </div> </div> </div> </div> </center> </body> </html>
Producción:
Referencia: https://picturepan2.github.io/spectre/experimentals/calendars.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA