Código de JavaScript

Código de JavaScript - Calendario

Pos: 71

Val: 30

Ha aumentado 1 puesto en JavaScript (en relación al último mes)

Calendario

JavaScript

(2)

Publicado el 21 de Abril del 2016 por Gabi (6 códigos)

5.060 visualizaciones desde el 21 de Abril del 2016

Genera un calendario mediante JavaScript en el que puedes avanzar hacia el siguiente mes o el anterior.

Requerimientos

Navegador Web

1.0
(2)

Publicado el 21 de Abril del 2016

gráfica de visualizaciones de la versión: 1.0

5.061 visualizaciones desde el 21 de Abril del 2016

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="utf-8">

<title>Ejemplo de Calendario</title>

</head>

<body onload="calendario()">

<details>

<H1>Calendario</H1>

<p id="demo"></p>

</details>

<script>

function calendario(anyo, mes) {

  document.getElementById("demo").innerHTML="";

  var body = document.getElementById ("demo");

  var d = new Date();

  var meses = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");

  var dias = new Array("L","M","X","J","V","S","D");

  if (anyo == null) {

     anyo = d.getFullYear();

  } else {

     d.setFullYear(anyo);

  var anyoant = anyo - 1;

  var anyosig = anyo + 1;

  if (mes == null) {

     mes = d.getMonth();

  } else {

     d.setMonth(mes);

  if (mes == 0) {

     var mesant = 11;

  } else {

     var mesant = mes - 1;

  if (mes == 11) {

     var messig = 0;

  } else {

     var messig = mes + 1;

  var dia = 1;

  var table     = document.createElement("table");

  var tableRow  = document.createElement("tr");

  var tableData = document.createElement("td");

  tableData.setAttribute("colspan", "7");

  var textCell  = document.createTextNode(anyo);

  tableData.appendChild(textCell);

  tableRow.appendChild(tableData);

  table.appendChild(tableRow);

  var tableRow  = document.createElement("tr");

  var tableData = document.createElement("td");

  tableData.onclick = function(){if (mesant == 11) {calendario(anyoant, mesant);}else{calendario(anyo, mesant);}};

  var textCell  = document.createTextNode("<");

  tableData.appendChild(textCell);

  tableRow.appendChild(tableData);

  var tableData = document.createElement("td");

  tableData.setAttribute("colspan", "5");

  var textCell  = document.createTextNode(meses[mes]);

  tableData.appendChild(textCell);

  tableRow.appendChild(tableData);

  var tableData = document.createElement("td");

  tableData.onclick = function(){if (messig == 0) {calendario(anyosig, messig);}else{calendario(anyo, messig);}};

  var textCell  = document.createTextNode(">");

  tableData.appendChild(textCell);

  tableRow.appendChild(tableData);

  table.appendChild(tableRow);

  var tableRow  = document.createElement("tr");

  for (var i = 0; i < 7; i++) {

    var tableData = document.createElement("td");

    var textCell  = document.createTextNode(dias[i]);

    tableData.appendChild(textCell);

    tableRow.appendChild(tableData);

  table.appendChild(tableRow);

  d.setDate(dia);

  while (mes == d.getMonth()) {

    var tableRow = document.createElement("tr");

    for (var i = 0; i < 7; i++) {

      var tableData = document.createElement("td");

      if (mes != d.getMonth()) {

        var textCell = document.createTextNode(" ");

      } else {

        if ((1 + i) < d.getDay()) {

          var textCell = document.createTextNode(" ");

        } else {

          var textCell = document.createTextNode(dia);

          dia++;

          d.setDate(dia);

      tableData.appendChild(textCell);

      tableRow.appendChild(tableData);

    table.appendChild(tableRow);

  table.setAttribute("border", "1");

  body.appendChild(table);

</script>

</body>

</html>

Comentarios sobre la versión: 1.0 (2)

Vicent

2 de Junio del 2018

A mi no me funciona...

Responder

Gabi

29 de Junio del 2018

Lo he probado en Edge 20, firefox 60 y chrome 67 en los tres me ha funcionado, pero al incluir la etiqueta <details> en firefos y en chrome me aparece un desplegable con el texto "Detalles", una vez lo desplego me aparece el calendario y funciona correctamente en todos los meses salvo en febrero, que no muestra datos. Lo revisaré.

Gracias por tu comentario, Vicent

Responder