Calendario anual simple en JavaScript puro-Calendarize

Vista prévia

Descripción

Calendarize es una implementación de JavaScript más simple de un calendario anual personalizable para sus aplicaciones Web.

Funcionamiento

Agregue la biblioteca JavaScript calendarize. js a sus páginas Web.

<script src="calendarize.js"></script>

Cree un contenedor vacío para el calendario.

<div id="calendar"></div>

Represente un calendario anual dentro del contenedor que acaba de crear.

var $calendar = document.getElementById("calendar");
var currentYear = new Date().getFullYear();
var calendarize = new Calendarize();
calendarize.buildYearCalendar($calendar, currentYear);

Aplica tus propios estilos CSS al calendario.

.month {

width: 300px;

padding: 20px;

background: #fff;

position: relative;

overflow: hidden;

float: left;

margin: 20px;

height: 350px;
}

.month h3 {

text-align: center;

margin: -20px -20px 30px -20px;

padding: 20px 0;

background: red;

color: #fff;
}

.day, .dow, .dummy-day {

display: inline-block;

width: 12.7864%;

float: left;

text-align: center;

margin-right: 1.5%;
}

.dow {

font-weight: bold;

margin-bottom: 10px;
}

.day {

color: #333;

cursor: pointer;

box-shadow: inset 0 0 0 1px #eee;
}

.day.weekend { background: #fafaff; }

.day:hover { background: yellow; }

.day, .dummy-day {

height: 40px;

line-height: 40px;

margin-bottom: 1.5%;

background: #fff;
}

.dummy-day {

background: #f5f5f5;

color: #ccc;
}

Opciones posibles.

var opts = {


showMonth: true,


showDaysOfWeek: true,


showYear: true,


clickHandler: function(e) {



var day = e.target.getAttribute("data-date");



alert(day);


}
};