UI ELEMENTS - Calendarios | www.grupo5.com

Calendario días

Crear una <tabla> con la clase .calendar para crear un calendarío con los días del mes.

‹	Octubre 2023	›
30	31	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	2
Borrar selección

Calendario días con caption

Crear dentro de la <tabla> un contendor <caption> para añadir los botones y los select de mes y año.

‹ ›
Lu	Ma	Mi	Ju	Vi	Sa	Do
30	31	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	2

Calendario thead con fondo oscuro o claro

Crear la <table> .calendar con fondo blanco, por ejemplo, y dentro del <thead> añadir un <tr> con la clase .tr-oscuro o .tr-claro para añdir un fondo ocuro o uno claro.

‹	Octubre 2023	›
30	31	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	2

Calendario meses

Añadir, dentro de un <td colspan="7">, etiquetas <span> con los meses del año.

‹	2023	›
Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic

Calendario años

Añadir, dentro de un <td colspan="7">, etiquetas <span> con los años.

‹	Octubre 2023					›
Lu	Ma	Mi	Ju	Vi	Sa	Do
30	31	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	2

‹	Octubre 2023					›
Lu	Ma	Mi	Ju	Vi	Sa	Do
30	31	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	2

‹	Octubre 2023					›
Lu	Ma	Mi	Ju	Vi	Sa	Do
30	31	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	2