My calendar - help!

JavaScript
1

Hello! I make a calendar whit javascript, there is a method for print the day of the month in a single “div” whitout add content??? here my code…look the method appendChild and removeChild.

Thank’s

<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Calendario-online</title>
  <style>
  
  .giornimese{float:left; padding-left:5px;}
  #mese{float:left;}
  #giorni{margin-left:20px; float:left;}
  
  </style>
  </head>
  <body>
  
<button id="btn_previus" type="button">Previus</button>
<button id="btn_next" type="button" onclick="Next()">Next</button>

<p id="anno"></p>
<p id="mese"></p>
<div id="giorni"></div>  
  
<script type="text/javascript">

var d = new Date("2019-01-1");

var mesi = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];

var boxgiorni = [];

var countmesi = d.getMonth();  

var day = document.getElementById("giorni");

var giornimese = document.getElementsByClassName("giornimese");

function getDaysInMonth() {
    return new Date(d.getFullYear(), countmesi+1, 0).getDate();
}


function setBoxDay() {

   var boxmese = document.createElement("div");
   
   day.appendChild(boxmese);   
       
   for(var i = 1; i <= getDaysInMonth(); i++) { 
  
      boxgiorni[i] = document.createElement("p");
      
      boxgiorni[i].setAttribute("class", "giornimese");
    
      boxmese.appendChild(boxgiorni[i]);
      
      boxgiorni[i].innerHTML = i;
   }

}  
     

function Next() {
   
   countmesi = countmesi + 1;
   
   if(countmesi >= 12) {countmesi = 0;}
   
   document.getElementById("mese").innerHTML = mesi[countmesi];
   
   setBoxDay(); 
   

}


document.getElementById("anno").innerHTML = d.getFullYear();

</script>
  
  </body>
</html>
2

If you are asking how to stop the days keep repeating down the page then I guess you need to set the innerHTML back to empty (day.innerHTML = "";) here.

function Next() {
   
   countmesi = countmesi + 1;
   
   if(countmesi >= 12) {countmesi = 0;}
   
   document.getElementById("mese").innerHTML = mesi[countmesi];
     
	day.innerHTML = "";
    setBoxDay(); 
  
}

Anything more complicated than that will have to wait until the JS gurus respond properly :slight_smile:

3

Right. I’m still waking up, but lets give this a crack.

  countmesi = countmesi + 1;
  
  if(countmesi >= 12) {countmesi = 0;}

Save yourself some space and reading, and do this as

   countmesi = (countmesi + 1) % 12;

(Javascript Arithmetic - Remainder)

You can change the HTML of existing divs, yes, but you already know how to do that.

If it were me, and you wanted to do it with add/remove children, I wouldnt actually blank the div, i’d just add or remove boxes as necessary, but blanking and redrawing is fine on this scale.

Then again, if it were me, i’d use a table for this kind of data, and have a pre-made 5x7 (or 6x7 if i wanted a header row) table that i could just plop the values into at will. Also makes it easier to align the dates properly within the week.

1 Like
5

I found this to be an interesting challenge (especially with the language) and so I played around with it and created this highly modified version.

<!DOCTYPE HTML>
<html lang="en">
<!-- Highly modified from: https://www.sitepoint.com/community/t/my-calendar-help/313555/2 -->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Calendar-one line</title>
<style>
 table { border-collapse: collapse; }
 th, td { border: 1px solid black; padding: 0 0.25em; height: 1em; min-width: 1.5em; }
 td { text-align: center; }
 thead > tr > th { background-color: lightgreen; }
</style>
</head>
<body>
  
<button onclick="NextYr(-1)"> &lt;&lt;- Year </button>
<button id="btn_previus" type="button" onclick="Next(-1)">Previous</button>
<button id="btn_next" type="button" onclick="Next(1)">Next</button>
<button onclick="NextYr(1)"> Year -&gt;&gt; </button>

<p id="anno"></p>
    <table>
      <thead>
       <tr>
        <th id="Sun"> Sun </th>
        <th id="Mon"> Mon </th>
        <th id="Tue"> Tue </th>
        <th id="Wed"> Wed </th>
        <th id="Thu"> Thu </th>
        <th id="Fri"> Fri </th>
        <th id="Sat"> Sat </th>
       </tr>
      </thead>

      <tbody id="calBody">
       <tr> <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td> </tr>
       <tr> <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td> </tr>
       <tr> <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td> </tr>
       <tr> <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td> </tr>
       <tr> <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td> </tr>
       <tr> <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td>  <td> </td> </tr>
      </tbody>
    </table>
	   
<script>


var mesi = ["January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"],
    d = new Date(),
    m = d.getMonth();  
    y = d.getFullYear();

function getDaysInMonth() { return new Date(d.getFullYear(), m+1, 0).getDate(); }
function get1stDayInMonth(MM, YYYY) { return new Date(YYYY,MM,1).getDay(); }
function Next(amt) {
   if ((m + amt) < 0) { y--; }
   if ((m + amt) > 11) { y++; }

   m = (m + amt) % 12;
   if (m < 0) { m = 11; }
   document.getElementById("anno").innerHTML = mesi[m]+' '+y;
   setCal(m, y);
}
function NextYr(amt) {
  y += amt;
  Next(0);
}
function setCal(MM,YYYY) {
  var fd = get1stDayInMonth(MM,YYYY),
      ld = getDaysInMonth(),
      k = 1;
  var sel = document.getElementById('calBody').querySelectorAll('td');
  for (var i=0; i<sel.length; i++) {
    if ( (i >= fd) && (k <= ld) ) { sel[i].innerHTML = k; k++; }
                             else { sel[i].innerHTML = ''; }
  }
}
function init() { Next(0); } init();
</script>
</body>
</html>
1 Like
6

For anything other than an exercise I would HIGHLY recommend using a well known, battle tested calendar solution.The open source calendar that has worked out well for me in the past is Full Calendar.

https://fullcalendar.io/

7

Continued playing and found error in post #5 above where leap-years were not accounted for. This has the modified correction.

Note: This is NOT a replacement for a full-blown Google calendar. Intended as an exercise in simplified calendar creation and date picks.

<!DOCTYPE HTML>
<html lang="en">
<!-- Highly modified from: https://www.sitepoint.com/community/t/my-calendar-help/313555/2 -->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Calendar Pick</title>

<style>
 table { border-collapse: collapse; }
 th, td { border: 1px solid black; padding: 0 0.25em; height: 1em; min-width: 1.5em; }
 thead > tr > th { background-color: lightgreen; }
 tbody > tr > td { text-align: center; }
 tbody > tr > td:hover { background-color: lightgreen; }
 tfoot > tr { text-align: center; }
 caption { font-weight: bold; }
 input[type='button'] { font-weight: bold; }
</style>

</head>
<body>
    <table id="calendar">
      <caption id="anno"> </caption>

      <thead>
       <tr>
        <th id="Sun"> Sun </th>
        <th id="Mon"> Mon </th>
        <th id="Tue"> Tue </th>
        <th id="Wed"> Wed </th>
        <th id="Thu"> Thu </th>
        <th id="Fri"> Fri </th>
        <th id="Sat"> Sat </th>
       </tr>
      </thead>

      <tbody id="calBody">
       <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr>
       <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr>
       <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr>
       <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr>
       <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr>
       <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr>
      </tbody>

      <tfoot>
       <tr>
        <td colspan="7">
         <input type="button" id="PY" value="&lt;y">
         <input type="button" id="PM" value="&lt;m">
         <input type="button" id="CMY" value="N">
         <input type="button" id="NM" value="m&gt;">
         <input type="button" id="NY" value="y&gt;">
        </td>
       </tr>
      </tfoot>

    </table>
<p>
<button onclick="doc('debug').innerHTML = ''"> Clear </button>
<pre id="debug"></pre>

<script>
function doc(IDS) { return document.getElementById(IDS); }

var month = ["January", "February", "March", "April", "May", "June",
             "July", "August", "September", "October", "November", "December"],
    d, m, y;

function getDaysInMonth() { return new Date(d.getFullYear(), m+1, 0).getDate(); }
function get1stDayInMonth(MM, YYYY) { return new Date(YYYY,MM,1).getDay(); }
function Next(amt) {
   if (amt == null) { amt = this.getAttribute('data-dir'); }
   if ((m + amt) < 0) { y--; }
   if ((m + amt) > 11) { y++; }

   m = (m + amt) % 12;
   if (m < 0) { m = 11; }
   doc("anno").innerHTML = month[m]+' '+y;
   setCal(m, y);
   return false;
}
function NextYr(amt) { y += amt;  Next(0); }
function isLeap(year) { return new Date(year, 1, 29).getDate() === 29; }
function showPick() {
  var yr = this.getAttribute('data-yr');
  var mo = this.getAttribute('data-mo');
  var da = this.getAttribute('data-da');
  doc('debug').innerHTML += mo+'/'+da+'/'+yr+'\n';
  return // alert( mo+'/'+da+'/'+yr );
}

function setCal(MM,YYYY) {
  var fd = get1stDayInMonth(MM,YYYY),  ld = getDaysInMonth();
  if ( (MM == 1) && isLeap(YYYY) ) { ld++; }

  var sel = doc('calBody').querySelectorAll('td'),  k = 1;
  for (var i=0; i<sel.length; i++) { sel[i].removeEventListener('click', showPick); }
  for (var i=0; i<sel.length; i++) {
    if ( (i >= fd) && (k <= ld) ) {
      sel[i].setAttribute('data-yr', YYYY);
      sel[i].setAttribute('data-mo', (MM+1));
      sel[i].setAttribute('data-da', k);
      sel[i].addEventListener('click', showPick);
      sel[i].innerHTML = k;   k++;
    } else { sel[i].innerHTML = ''; }
  }
}
function now() {
    d = new Date(),
    m = d.getMonth(),
    y = d.getFullYear();
    Next(0);
}

function init() {
  now();
  doc('PY').addEventListener("click", function(ndx) { return function() { NextYr(ndx); } }(-1) );
  doc('PM').addEventListener("click", function(ndx) { return function() { Next(ndx); } }(-1) );
  doc('CMY').addEventListener("click", now);
  doc('NM').addEventListener("click", function(ndx) { return function() { Next(ndx); } }(1) );
  doc('NY').addEventListener("click", function(ndx) { return function() { NextYr(ndx); } }(1) );
} init();
</script>
</body>
</html>
1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.