Si te Gusta este calendario para tu web es muy sencillo de añadir.
Solo necesitas 3 sencillos pasos, los estilos css, codigo de llamada Html, y el ejecutable Jquery scripts.
1º css.
body { font-family: 'Arial', sans-serif; background-color: #3b323f; } body, html, .wrapper { padding: 0; margin: 0; width: 100%; height: 100%; } .wrapper { display: flex; align-items: center; justify-content: center; } button::-moz-focus-inner { border: 0; padding: 0; } #calendari { margin: 20px 0; position: relative; overflow: hidden; height: 330px; width: 350px; font-size: 14px; box-shadow: 0px 1px 4px rgba(0,0,0,0.4); } table { border-collapse: collapse; table-layout: fixed; width: 350px; box-shadow: 0px 1px 3px rgba(0,0,0,0.2); background-color: #fff; position: absolute; top: 0; left: 0; transform: translateX(0); transition: all 0.3s ease; } table.actiu { transform: translateX(0px)top; } table.inactiu { transition: all 0.3s 0.01s ease; } table.amagat-esquerra { transform: translateX(-299px); } table.amagat-dreta { transform: translateX(300px); } td,th { text-align: center; background-color: #fff; } th { padding: 10px; } tr:first-child th { font-size: 20px; font-weight: bold; border-left: none; border-top: none; } td:last-child, th:last-child { border-right: none; } th { border-top: 1px solid rgba(0,0,0,0.1); border-right: 1px solid rgba(0,0,0,0.1); background-color: #9b59b6; color: #fff; text-shadow: 0px -1px 0px rgba(0,0,0,0.2); font-weight: normal; } th .any { font-size: 12px; font-weight: normal; display: block; text-shadow: none; color: rgba(0,0,0,0.4); } tr:nth-child(2) th { padding: 5px; } td { padding: 0; border-bottom: 1px solid rgba(0,0,0,0.05); } td>span { color: #555; padding: 10px; display: block; border: 2px solid transparent; transition: border 0.3s ease; } td:nth-child(even)>span { background-color: rgba(0,0,0,0.02); } td:last-child>span, td:nth-child(6)>span { color: #9b59b6; } td.avui>span { font-weight: bold; background-color: #9b59b6; color: #fff; border: 2px solid rgba(0,0,0,0.1); } td.fora > span { opacity: 0.2; } td > span:hover { background: #a57cb6; color: #fff; } .boto-next, .boto-prev { background: rgba(0,0,0,0.1); color: #fff; font-family: inherit; border: none; font-size: 18px; font-weight: bold; text-shadow: inherit; padding: 2px 10px 5px 10px; line-height: 1px; height: 30px; width: 30px; vertical-align: middle; border-radius: 100%; position: absolute; top: 15px; } .boto-next { right: 10px; padding-left: 13px; } .boto-prev { left: 10px; padding-right: 13px;} .boto-next:hover, .boto-prev:hover { background: rgba(0,0,0,0.2); } button:hover { cursor: pointer; } button:focus { outline: none; }
2º El Html
<div class="wrapper">
<div id="calendari"></div>
</div>
3º Jquery
var mesos = [
'Gener',
'Febrer',
'Març',
'Abril',
'Maig',
'Juny',
'Juliol',
'Agost',
'Septembre',
'Octubre',
'Novembre',
'Desembre'
];
var dies = [
'Diumenge',
'Dilluns',
'Dimarts',
'Dimecres',
'Dijous',
'Divendres',
'Dissabte'
];
var dies_abr = [
'dg',
'dl',
'dm',
'dc',
'dj',
'dv',
'ds'
];
Number.prototype.pad = function(num) {
var str = '';
for(var i = 0; i < (num-this.toString().length); i++)
str += '0';
return str += this.toString();
}
function calendari(widget, data)
{
var original = widget.getElementsByClassName('actiu')[0];
if(typeof original === 'undefined')
{
original = document.createElement('table');
original.setAttribute('data-actual',
data.getFullYear() + '/' +
data.getMonth().pad(2) + '/' +
data.getDate().pad(2))
widget.appendChild(original);
}
var diff = data - new Date(original.getAttribute('data-actual'));
diff = new Date(diff).getMonth();
var e = document.createElement('table');
e.className = diff === 0 ? 'amagat-esquerra' : 'amagat-dreta';
e.innerHTML = '';
widget.appendChild(e);
e.setAttribute('data-actual',
data.getFullYear() + '/' +
data.getMonth().pad(2) + '/' +
data.getDate().pad(2))
var fila = document.createElement('tr');
var titol = document.createElement('th');
titol.setAttribute('colspan', 7);
var boto_prev = document.createElement('button');
boto_prev.className = 'boto-prev';
boto_prev.innerHTML = '◂';
var boto_next = document.createElement('button');
boto_next.className = 'boto-next';
boto_next.innerHTML = '▸';
titol.appendChild(boto_prev);
titol.appendChild(document.createElement('span')).innerHTML =
mesos[data.getMonth()] + '<span class="any">' + data.getFullYear() + '</span>';
titol.appendChild(boto_next);
boto_prev.onclick = function() {
data.setMonth(data.getMonth() - 1);
calendari(widget, data);
};
boto_next.onclick = function() {
data.setMonth(data.getMonth() + 1);
calendari(widget, data);
};
fila.appendChild(titol);
e.appendChild(fila);
fila = document.createElement('tr');
for(var i = 1; i < 7; i++)
{
fila.innerHTML += '<th>' + dies_abr[i] + '</th>';
}
fila.innerHTML += '<th>' + dies_abr[0] + '</th>';
e.appendChild(fila);
/* Obtinc el dia que va acabar el mes anterior */
var inici_mes =
new Date(data.getFullYear(), data.getMonth(), -1).getDay();
var actual = new Date(data.getFullYear(),
data.getMonth(),
-inici_mes);
/* 6 setmanes per cobrir totes les posiblitats
* Quedaria mes consistent alhora de mostrar molts mesos
* en una quadricula */
for(var s = 0; s < 6; s++)
{
var fila = document.createElement('tr');
for(var d = 1; d < 8; d++)
{
var cela = document.createElement('td');
var span = document.createElement('span');
cela.appendChild(span);
span.innerHTML = actual.getDate();
if(actual.getMonth() !== data.getMonth())
cela.className = 'fora';
/* Si es avui el decorem */
if(data.getDate() == actual.getDate() &&
data.getMonth() == actual.getMonth())
cela.className = 'avui';
actual.setDate(actual.getDate()+1);
fila.appendChild(cela);
}
e.appendChild(fila);
}
setTimeout(function() {
e.className = 'actiu';
original.className +=
diff === 0 ? ' amagat-dreta' : ' amagat-esquerra';
}, 20);
original.className = 'inactiu';
setTimeout(function() {
var inactius = document.getElementsByClassName('inactiu');
for(var i = 0; i < inactius.length; i++)
widget.removeChild(inactius[i]);
}, 1000);
}
calendari(document.getElementById('calendari'), new Date());
Pd: Esto es todo pero si no queréis añadir el codigo directo en vuestro documento web podéis hacerlo externamente desde una nube.
1º copiar el texto css y guardar con el nombre style.css luego copiar el jquery pegar y guardar con el nombre index.js siempre con el bloc de notas o bien con gedit el que yo uso un editor de texto NUNCA con word o openword etc..
2º Subirlo ha vuestra nube yo uso dropbox hay muxas donde elegir.
3º pegar la direcion de enlace en el documento mas abajo os dejo un ejemplo.
DOCUMENTO HTML D CALENDARIO MINIALISTA:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - Minimalist calendar</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="wrapper">
<div id="calendari"></div>
</div>
<script src="js/index.js"></script>
</body>
</html>
Instrucciones: añadir direcion url en css/style.css con vuestra dirección de los estilos, y en js/index.js con vuestra direcion url del jquery. Guardar como index.html y cuando le dais doble click, se abrira el explorador predeterminado con la hoja.
Si kereis añadirlo a vuestra web solo debéis añadir esta linea completa
entre las etiquetas head <link rel="stylesheet" href="css/style.css"/>
Y esta linea entre las etiqueta Body <script src="js/index.js"></script>
Y por ultimo el html donde kieras k aparezca.
Ejemplo mas abajo para ver como funciona:
