Calendario mensual responsivo simple con JavaScript y CSS

Vista prévia

Descripción

Una implementación de HTML/JavaScript/CSS de calendario mensual sencillo y responsivo.

Funcionamiento

Cree controles que le permitan alternar entre meses.

<div class="controls">

<p onclick="previousMonth()" style="float: left;"> < </p>

<p id="current-month" style="float: left; padding-left:10px; padding-right:10px;">January</p>

<p onclick="nextMonth()" style="float: right;"> > </p>
</div>

Cree un contenedor vacío para colocar el calendario del mes.

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

El núcleo de JavaScript para representar un calendario mensual dentro del elemento contenedor.

<div class="calendar" id="calendar"> </div>// Globally head date object for the month shown
var date = new Date();
date.setDate(1);
date.setMonth(0);


window.onload = function() {

// Add the current month on load

createMonth();
};

// Converts day ids to the relevant string
function dayOfWeekAsString(dayIndex) {

return ["Sun", "Mon","Tue","Wed","Thu","Fri","Sat"][dayIndex];
}
// Converts month ids to the relevant string
function monthsAsString(monthIndex) {

return ["January", "Febuary","March","April","May","June","July", "August", "September", "October", "November", "December"][monthIndex];
}

// Creates a day element
function createCalendarDay(num, day) {

var currentCalendar = document.getElementById("calendar");


var newDay = document.createElement("div");

var date = document.createElement("p");

date.innerHTML = num;


var dayElement = document.createElement("p");

dayElement.innerHTML = day;


newDay.className = "calendar-day";

newDay.appendChild(date);

newDay.appendChild(dayElement);


currentCalendar.appendChild(newDay);
}

// Clears all days from the calendar
function clearCalendar() {

var currentCalendar = document.getElementById("calendar");


currentCalendar.innerHTML = "";

}

// Clears the calendar and shows the next month
function nextMonth() {

clearCalendar();


date.setMonth(date.getMonth() + 1);


createMonth(date.getMonth());
}

// Clears the calendar and shows the previous month
function previousMonth() {

clearCalendar();


date.setMonth(date.getMonth() - 1);

var val = date.getMonth();

createMonth(date.getMonth());
}

// Creates and populates all of the days to make up the month
function createMonth() {

var currentCalendar = document.getElementById("calendar");


var dateObject = new Date();

dateObject.setDate(date.getDate());

dateObject.setMonth(date.getMonth());

dateObject.setYear(date.getFullYear());


createCalendarDay(dateObject.getDate(), dayOfWeekAsString(dateObject.getDay()));

dateObject.setDate(dateObject.getDate() + 1);


while (dateObject.getDate() != 1) {


createCalendarDay(dateObject.getDate(), dayOfWeekAsString(dateObject.getDay()));


dateObject.setDate(dateObject.getDate() + 1);

}


// Set the text to the correct month

var currentMonthText = document.getElementById("current-month");

currentMonthText.innerHTML = monthsAsString(date.getMonth()) + " " + date.getFullYear();


}

Un pequeño CSS para el estilo del calendario del mes.

body {

background-color: #f2f2f2;

color: #888888;
}

.calendar-day {

width: 8%;

box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1);

background-color: #fff;

font-size: 22px;

line-height: 50%;

padding-left: 10px;

padding-right: 10px;

padding-top: 5px;

padding-bottom: 5px;

margin: -1px;

text-align: center;

display: inline-block;
}

.controls {

display: inline-block;

text-align: center;

cursor: pointer;
}