Simple Calendar via Multidimensional Array

by Matthew Day

HTML

<select id="day">
    <option value="0">Monday</option>
    <option value="1">Tuesday</option>
    <option value="2">Wednesday</option>
    <option value="3">Thursday</option>
    <option value="4">Friday</option>
  </select>
  <select id="hour">
    <option value="0">8:00 AM</option>
    <option value="1">9:00 AM</option>
    <option value="2">10:00 AM</option>
    <option value="3">11:00 AM</option>
    <option value="4">12:00 PM</option>
    <option value="5">1:00 PM</option>
    <option value="6">2:00 PM</option>
    <option value="7">3:00 PM</option>
    <option value="8">4:00 PM</option>
    <option value="9">5:00 PM</option>
    <option value="10">6:00 PM</option>
    <option value="11">7:00 PM</option>
  </select>
  <input id="event" placeholder="event" type="text" />
  <button id="submit">Submit</button>



<div id="schedule"></div>

<!--

var days = 7;
var hours = 11;
var f = new Array();

for (i=0;i<days;i++) {
 f[i]=new Array();
 for (j=0;j<hours;j++) {
  f[i][j]=0;
 }
}

f[0][0]="its monday at 8am";
console.log(f);

-->

JavaScript

(function($) {
	let app = {
    addEvent: function() {
			$(document).on('click', 'button', function() {
      	let day = $('#day').val();
        let hour = $('#hour').val();
        let event = $('#event').val();
        //app.outerArr.push(event);
        let f = new Array();
        for (i=0;i<5;i++) {
         f[i]=new Array();
         for (j=0;j<12;j++) {
         		f[i][j] = `${app.hours[j]} >> Nothing scheduled`;
         }
        }
      	if(event) {
        	f[day][hour] = `${app.hours[hour]} >> ${event}`;
        }
        
        $('#schedule').empty().append(`
        	<h1>Monday</h1>
          ${f[0].toString().replace(/,/g, '<br>')}
          <h1>Tuesday</h1>
          ${f[1].toString().replace(/,/g, '<br>')}
          <h1>Wednesday</h1>
          ${f[2].toString().replace(/,/g, '<br>')}
          <h1>Thursday</h1>
          ${f[3].toString().replace(/,/g, '<br>')}
          <h1>Friday</h1>
          ${f[4].toString().replace(/,/g, '<br>')}
        `);
      });
    },
    //days: ['monday', 'tuesday', 'wednesday', 'thursday','friday'],
    hours: ['8:00 AM', '9:00 AM', '10:00 AM', '11:00 AM', '12:00 PM', '1:00 PM', '2:00 PM', '3:00 PM', '4:00 PM', '5:00 PM', '6:00 PM', '7:00 PM'],
  	init: function() {
      app.addEvent();
    },
    outerArr: []
  }
  
  $(document).ready(function() {
  	app.init();
  })

})(window.jQuery);