Pruebas.

Hoooola~~
Hoy os traigo un tutorial paracrear tu propio calendario manual <3 es bastante fácil y sencillo owo
Lo único que teneís que hacer es:

1. Clicad en esta página. Creaís el calendario colocando en qué día quieres que comience la semana, el mes y el año.

2.Finalmente clicaís en y obtendreís el código :3 Debajo aparece un example bastante anticuado de cómo quedaría <3 Luego clica en y CTRL + C o Copiar

3. ¡Personalizar! He creado varios diseños para que elijaís a vuestro gusto n////n Espero que os gusten :3 Lo único que hay que hacer es colocar este código entre las etiquetas <style> o <b:skin> de tu plantilla de tabla y ya estará personalizado <3


#month { border-collapse: collapse; float: center; text-transform: uppercase; text-align: center; background-color:transparent; color: #aaa; font-size: 11px; font-family: calibri;} #month th, #month td { border: 0px; } #month thead { background: rgb(253,177,180); /* Old browsers / background: -moz-linear-gradient(top, rgba(253,177,180,1) 0%, rgba(253,207,208,1) 24%, rgba(253,227,228,1) 100%); / FF3.6+ / background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,177,180,1)), color-stop(24%,rgba(253,207,208,1)), color-stop(100%,rgba(253,227,228,1))); / Chrome,Safari4+ / background: -webkit-linear-gradient(top, rgba(253,177,180,1) 0%,rgba(253,207,208,1) 24%,rgba(253,227,228,1) 100%); / Chrome10+,Safari5.1+ / background: -o-linear-gradient(top, rgba(253,177,180,1) 0%,rgba(253,207,208,1) 24%,rgba(253,227,228,1) 100%); / Opera 11.10+ / background: -ms-linear-gradient(top, rgba(253,177,180,1) 0%,rgba(253,207,208,1) 24%,rgba(253,227,228,1) 100%); / IE10+ / background: linear-gradient(to bottom, rgba(253,177,180,1) 0%,rgba(253,207,208,1) 24%,rgba(253,227,228,1) 100%); / W3C / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdb1b4', endColorstr='#fde3e4',GradientType=0 ); / IE6-9 / } #month td { width:16px; height:16px; padding:5px; } td .day { display:none; } #month tbody .weekend { background-color: #fde3e4; opacity:0.5; } #month tbody .next, #month tbody .previous {opacity:0.2; } .rtop { display:block;} .rtop { display: block; height: 1px; overflow: hidden; background:#fff; } .r1{margin: 0 0 0 5px} .r2{margin: 0 0 0 3px} .r3{margin: 0 0 0 2px} .r4{margin: 0 0 0 1px; height: 2px} #month td img{vertical-align:middle; opacity: 0.5;} #month td img:hover{opacity: 1;} #month th { font: 12px georgia; } </style>	#month { border-collapse: collapse; float: center; text-transform: uppercase; text-align: center; background-color:transparent; color: #aaa; font-size: 11px; font-family: calibri;;} #month th, #month td { border: 0px; } #month thead { background: rgb(145,255,255); /* Old browsers / background: -moz-linear-gradient(top, rgba(145,255,255,1) 0%, rgba(201,255,255,1) 54%, rgba(201,255,255,1) 100%); / FF3.6+ / background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(145,255,255,1)), color-stop(54%,rgba(201,255,255,1)), color-stop(100%,rgba(201,255,255,1))); / Chrome,Safari4+ / background: -webkit-linear-gradient(top, rgba(145,255,255,1) 0%,rgba(201,255,255,1) 54%,rgba(201,255,255,1) 100%); / Chrome10+,Safari5.1+ / background: -o-linear-gradient(top, rgba(145,255,255,1) 0%,rgba(201,255,255,1) 54%,rgba(201,255,255,1) 100%); / Opera 11.10+ / background: -ms-linear-gradient(top, rgba(145,255,255,1) 0%,rgba(201,255,255,1) 54%,rgba(201,255,255,1) 100%); / IE10+ / background: linear-gradient(to bottom, rgba(145,255,255,1) 0%,rgba(201,255,255,1) 54%,rgba(201,255,255,1) 100%); / W3C / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91ffff', endColorstr='#c9ffff',GradientType=0 ); / IE6-9 / } #month td { width:16px; height:16px; padding:5px; } td .day { display:none; } #month tbody .weekend { background-color: #C9FFFF; opacity:0.5; } #month tbody .next, #month tbody .previous {opacity:0.2; } .rtop { display:block;} .rtop { display: block; height: 1px; overflow: hidden; background:#fff; } .r1{margin: 0 0 0 5px} .r2{margin: 0 0 0 3px} .r3{margin: 0 0 0 2px} .r4{margin: 0 0 0 1px; height: 2px} #month td img{vertical-align:middle; opacity: 0.5;} #month td img:hover{opacity: 1;} #month th { font: 12px georgia; }

#month { border-collapse: collapse; float: center; text-transform: uppercase; text-align: center; background-color:transparent; color: #aaa; font-size: 11px; font-family: calibri;} #month th, #month td { border: 0px; } #month thead { background: rgb(205,247,143); /* Old browsers / background: -moz-linear-gradient(top, rgba(205,247,143,1) 0%, rgba(226,255,201,1) 54%, rgba(226,255,201,1) 100%); / FF3.6+ / background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(205,247,143,1)), color-stop(54%,rgba(226,255,201,1)), color-stop(100%,rgba(226,255,201,1))); / Chrome,Safari4+ / background: -webkit-linear-gradient(top, rgba(205,247,143,1) 0%,rgba(226,255,201,1) 54%,rgba(226,255,201,1) 100%); / Chrome10+,Safari5.1+ / background: -o-linear-gradient(top, rgba(205,247,143,1) 0%,rgba(226,255,201,1) 54%,rgba(226,255,201,1) 100%); / Opera 11.10+ / background: -ms-linear-gradient(top, rgba(205,247,143,1) 0%,rgba(226,255,201,1) 54%,rgba(226,255,201,1) 100%); / IE10+ / background: linear-gradient(to bottom, rgba(205,247,143,1) 0%,rgba(226,255,201,1) 54%,rgba(226,255,201,1) 100%); / W3C / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdf78f', endColorstr='#e2ffc9',GradientType=0 ); / IE6-9 / } #month td { width:16px; height:16px; padding:5px; } td .day { display:none; } #month tbody .weekend { background-color: #E2FFC9; opacity:0.5; } #month tbody .next, #month tbody .previous {opacity:0.2; } .rtop { display:block;} .rtop { display: block; height: 1px; overflow: hidden; background:#fff; } .r1{margin: 0 0 0 5px} .r2{margin: 0 0 0 3px} .r3{margin: 0 0 0 2px} .r4{margin: 0 0 0 1px; height: 2px} #month td img{vertical-align:middle; opacity: 0.5;} #month td img:hover{opacity: 1;} #month th { font: 12px georgia; }	#month { border-collapse: collapse; float: center; text-transform: uppercase; text-align: center; background-color:transparent; color: #aaa; font-size: 11px; font-family: calibri;} #month th, #month td { border: 0px; } #month thead { background: rgb(206,147,255); /* Old browsers / background: -moz-linear-gradient(top, rgba(206,147,255,1) 0%, rgba(230,201,255,1) 54%, rgba(230,201,255,1) 100%); / FF3.6+ / background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,147,255,1)), color-stop(54%,rgba(230,201,255,1)), color-stop(100%,rgba(230,201,255,1))); / Chrome,Safari4+ / background: -webkit-linear-gradient(top, rgba(206,147,255,1) 0%,rgba(230,201,255,1) 54%,rgba(230,201,255,1) 100%); / Chrome10+,Safari5.1+ / background: -o-linear-gradient(top, rgba(206,147,255,1) 0%,rgba(230,201,255,1) 54%,rgba(230,201,255,1) 100%); / Opera 11.10+ / background: -ms-linear-gradient(top, rgba(206,147,255,1) 0%,rgba(230,201,255,1) 54%,rgba(230,201,255,1) 100%); / IE10+ / background: linear-gradient(to bottom, rgba(206,147,255,1) 0%,rgba(230,201,255,1) 54%,rgba(230,201,255,1) 100%); / W3C / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce93ff', endColorstr='#e6c9ff',GradientType=0 ); / IE6-9 / } #month td { width:16px; height:16px; padding:5px; } td .day { display:none; } #month tbody .weekend { background-color: #E6C9FF; opacity:0.5; } #month tbody .next, #month tbody .previous {opacity:0.2; } .rtop { display:block;} .rtop { display: block; height: 1px; overflow: hidden; background:#fff; } .r1{margin: 0 0 0 5px} .r2{margin: 0 0 0 3px} .r3{margin: 0 0 0 2px} .r4{margin: 0 0 0 1px; height: 2px} #month td img{vertical-align:middle; opacity: 0.5;} #month td img:hover{opacity: 1;} #month th { font: 12px georgia; }

Cambia los títulos de las semanas para una mayor similitud con las tablas

4. En cada numerito que se muestre en el calendario coloca:

<img src="URLDETUIMAGEN" title="DIAIMPORTANTE"/>

¿Más gifs? Busca aquí

Créditos a Nao-shii por el code y el CCS de la tabla.

ラベル: XHTML y CCS


#month { border-collapse: collapse; float: center; text-transform: uppercase; text-align: center; background-color:transparent; color: #aaa; font-size: 11px; font-family: calibri;} #month th, #month td { border: 0px; } #month thead { background: rgb(253,177,180); /* Old browsers / background: -moz-linear-gradient(top, rgba(253,177,180,1) 0%, rgba(253,207,208,1) 24%, rgba(253,227,228,1) 100%); / FF3.6+ / background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,177,180,1)), color-stop(24%,rgba(253,207,208,1)), color-stop(100%,rgba(253,227,228,1))); / Chrome,Safari4+ / background: -webkit-linear-gradient(top, rgba(253,177,180,1) 0%,rgba(253,207,208,1) 24%,rgba(253,227,228,1) 100%); / Chrome10+,Safari5.1+ / background: -o-linear-gradient(top, rgba(253,177,180,1) 0%,rgba(253,207,208,1) 24%,rgba(253,227,228,1) 100%); / Opera 11.10+ / background: -ms-linear-gradient(top, rgba(253,177,180,1) 0%,rgba(253,207,208,1) 24%,rgba(253,227,228,1) 100%); / IE10+ / background: linear-gradient(to bottom, rgba(253,177,180,1) 0%,rgba(253,207,208,1) 24%,rgba(253,227,228,1) 100%); / W3C / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdb1b4', endColorstr='#fde3e4',GradientType=0 ); / IE6-9 / } #month td { width:16px; height:16px; padding:5px; } td .day { display:none; } #month tbody .weekend { background-color: #fde3e4; opacity:0.5; } #month tbody .next, #month tbody .previous {opacity:0.2; } .rtop { display:block;} .rtop { display: block; height: 1px; overflow: hidden; background:#fff; } .r1{margin: 0 0 0 5px} .r2{margin: 0 0 0 3px} .r3{margin: 0 0 0 2px} .r4{margin: 0 0 0 1px; height: 2px} #month td img{vertical-align:middle; opacity: 0.5;} #month td img:hover{opacity: 1;} #month th { font: 12px georgia; } </style>	#month { border-collapse: collapse; float: center; text-transform: uppercase; text-align: center; background-color:transparent; color: #aaa; font-size: 11px; font-family: calibri;;} #month th, #month td { border: 0px; } #month thead { background: rgb(145,255,255); /* Old browsers / background: -moz-linear-gradient(top, rgba(145,255,255,1) 0%, rgba(201,255,255,1) 54%, rgba(201,255,255,1) 100%); / FF3.6+ / background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(145,255,255,1)), color-stop(54%,rgba(201,255,255,1)), color-stop(100%,rgba(201,255,255,1))); / Chrome,Safari4+ / background: -webkit-linear-gradient(top, rgba(145,255,255,1) 0%,rgba(201,255,255,1) 54%,rgba(201,255,255,1) 100%); / Chrome10+,Safari5.1+ / background: -o-linear-gradient(top, rgba(145,255,255,1) 0%,rgba(201,255,255,1) 54%,rgba(201,255,255,1) 100%); / Opera 11.10+ / background: -ms-linear-gradient(top, rgba(145,255,255,1) 0%,rgba(201,255,255,1) 54%,rgba(201,255,255,1) 100%); / IE10+ / background: linear-gradient(to bottom, rgba(145,255,255,1) 0%,rgba(201,255,255,1) 54%,rgba(201,255,255,1) 100%); / W3C / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91ffff', endColorstr='#c9ffff',GradientType=0 ); / IE6-9 / } #month td { width:16px; height:16px; padding:5px; } td .day { display:none; } #month tbody .weekend { background-color: #C9FFFF; opacity:0.5; } #month tbody .next, #month tbody .previous {opacity:0.2; } .rtop { display:block;} .rtop { display: block; height: 1px; overflow: hidden; background:#fff; } .r1{margin: 0 0 0 5px} .r2{margin: 0 0 0 3px} .r3{margin: 0 0 0 2px} .r4{margin: 0 0 0 1px; height: 2px} #month td img{vertical-align:middle; opacity: 0.5;} #month td img:hover{opacity: 1;} #month th { font: 12px georgia; }

#month { border-collapse: collapse; float: center; text-transform: uppercase; text-align: center; background-color:transparent; color: #aaa; font-size: 11px; font-family: calibri;} #month th, #month td { border: 0px; } #month thead { background: rgb(205,247,143); /* Old browsers / background: -moz-linear-gradient(top, rgba(205,247,143,1) 0%, rgba(226,255,201,1) 54%, rgba(226,255,201,1) 100%); / FF3.6+ / background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(205,247,143,1)), color-stop(54%,rgba(226,255,201,1)), color-stop(100%,rgba(226,255,201,1))); / Chrome,Safari4+ / background: -webkit-linear-gradient(top, rgba(205,247,143,1) 0%,rgba(226,255,201,1) 54%,rgba(226,255,201,1) 100%); / Chrome10+,Safari5.1+ / background: -o-linear-gradient(top, rgba(205,247,143,1) 0%,rgba(226,255,201,1) 54%,rgba(226,255,201,1) 100%); / Opera 11.10+ / background: -ms-linear-gradient(top, rgba(205,247,143,1) 0%,rgba(226,255,201,1) 54%,rgba(226,255,201,1) 100%); / IE10+ / background: linear-gradient(to bottom, rgba(205,247,143,1) 0%,rgba(226,255,201,1) 54%,rgba(226,255,201,1) 100%); / W3C / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdf78f', endColorstr='#e2ffc9',GradientType=0 ); / IE6-9 / } #month td { width:16px; height:16px; padding:5px; } td .day { display:none; } #month tbody .weekend { background-color: #E2FFC9; opacity:0.5; } #month tbody .next, #month tbody .previous {opacity:0.2; } .rtop { display:block;} .rtop { display: block; height: 1px; overflow: hidden; background:#fff; } .r1{margin: 0 0 0 5px} .r2{margin: 0 0 0 3px} .r3{margin: 0 0 0 2px} .r4{margin: 0 0 0 1px; height: 2px} #month td img{vertical-align:middle; opacity: 0.5;} #month td img:hover{opacity: 1;} #month th { font: 12px georgia; }	#month { border-collapse: collapse; float: center; text-transform: uppercase; text-align: center; background-color:transparent; color: #aaa; font-size: 11px; font-family: calibri;} #month th, #month td { border: 0px; } #month thead { background: rgb(206,147,255); /* Old browsers / background: -moz-linear-gradient(top, rgba(206,147,255,1) 0%, rgba(230,201,255,1) 54%, rgba(230,201,255,1) 100%); / FF3.6+ / background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,147,255,1)), color-stop(54%,rgba(230,201,255,1)), color-stop(100%,rgba(230,201,255,1))); / Chrome,Safari4+ / background: -webkit-linear-gradient(top, rgba(206,147,255,1) 0%,rgba(230,201,255,1) 54%,rgba(230,201,255,1) 100%); / Chrome10+,Safari5.1+ / background: -o-linear-gradient(top, rgba(206,147,255,1) 0%,rgba(230,201,255,1) 54%,rgba(230,201,255,1) 100%); / Opera 11.10+ / background: -ms-linear-gradient(top, rgba(206,147,255,1) 0%,rgba(230,201,255,1) 54%,rgba(230,201,255,1) 100%); / IE10+ / background: linear-gradient(to bottom, rgba(206,147,255,1) 0%,rgba(230,201,255,1) 54%,rgba(230,201,255,1) 100%); / W3C / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce93ff', endColorstr='#e6c9ff',GradientType=0 ); / IE6-9 / } #month td { width:16px; height:16px; padding:5px; } td .day { display:none; } #month tbody .weekend { background-color: #E6C9FF; opacity:0.5; } #month tbody .next, #month tbody .previous {opacity:0.2; } .rtop { display:block;} .rtop { display: block; height: 1px; overflow: hidden; background:#fff; } .r1{margin: 0 0 0 5px} .r2{margin: 0 0 0 3px} .r3{margin: 0 0 0 2px} .r4{margin: 0 0 0 1px; height: 2px} #month td img{vertical-align:middle; opacity: 0.5;} #month td img:hover{opacity: 1;} #month th { font: 12px georgia; }