jsongen

by Nic Fontaine

HTML

<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
  webshims.setOptions('forms-ext', {types: 'date'});
	webshims.polyfill('forms forms-ext');
	webshims.activeLang('en-us');
</script>

<form id='form'>
  Start Date
  <input id='f-date-begin' type="date" >
  End Date
  <input id='f-date-end' type="date" >
  Days of the Week<br>
  <div id='f-days'>
    <label><input type='checkbox' value='Monday' checked>Mon</label>
    <label><input type='checkbox' value='Tuesday' checked>Tue</label>
    <label><input type='checkbox' value='Wednesday' checked>Wed</label>
    <label><input type='checkbox' value='Thursday' checked>Thu</label>
    <label><input type='checkbox' value='Friday' checked>Fri</label>
    <label><input type='checkbox' value='Saturday'>Sat</label>
    <label><input type='checkbox' value='Sunday'>Sun</label>
  </div>
  Slot Length (min)
  <input id='f-slot-len' type='text' value='10'>
  Start Hour (24hr)
  <select id='f-begin'>
    <option value='6'>06:00</option>
    <option value='7'>07:00</option>
    <option value='8'>08:00</option>
    <option value='9' selected>09:00</option>
    <option value='10'>10:00</option>
    <option value='11'>11:00</option>
    <option value='12'>12:00</option>
  </select>
  End Hour (end of last session, 24hr):
    <select id='f-end'>
    <option value='9'>09:00</option>
    <option value='10'>10:00</option>
    <option value='11'>11:00</option>
    <option value='12'>12:00</option>
    <option value='13'>13:00</option>
    <option value='14'>14:00</option>
    <option value='15'>15:00</option>
    <option value='16'>16:00</option>
    <option value='17'>17:00</option>
    <option value='18' selected>18:00</option>
    <option value='19'>19:00</option>
    <option value='20'>20:00</option>
  </select>
  Break Hour (example: <b>13</b>)
  <input id='f-break-hr' type='text'>
  Break Minute (example: <b>50</b>)
  <input id='f-break-min' type='text'>
  <input id='f-send' type='submit'...

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  font-size: 0.7em;
  tab-size: 1px !important;
  background: #fff;
}
form {
  float: left;
  padding: 15px;
  width: 30%;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
}
input, select {
  display: block;
  margin-top: 4px;
  margin-bottom: 13px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
}
input[type='checkbox'] {
  width: auto;
  display: inline-block;
}
input[type='submit'] {
  padding: 8px;
}
pre {
  -moz-tab-size: 2;
  -o-tab-size:   2;
  tab-size:      2;
  float: right;
  margin: 0;
  padding: 10px;
  background: #222;
  color: #fff;
  height: 100%;
  overflow-y: auto;
  width: 70%;
  box-sizing: border-box;
}
.allselect {
	-webkit-touch-callout: all; /* iOS Safari */
	  -webkit-user-select: all; /* Safari */
	   -khtml-user-select: all; /* Konqueror HTML */
	     -moz-user-select: all; /* Firefox */
	      -ms-user-select: all; /* Internet Explorer/Edge */
	          user-select: all; /* Non-prefixed version */
}

JavaScript

webshim.setOptions('forms-ext', {
  replaceUI: 'auto'
});

//set language/UI dateformat || or use lang attribute on html element
//webshims.activeLang('hu'); // hu == hungary

webshim.polyfill('forms forms-ext');

var conf = {
  weeks: 1,
  days: 2,
  slotLen: 10, // minutes in length of sim
  breakHr: "", // break/lunch hr
  breakMin: "", 
  slotsPerHr: function() { return 60/this.slotLen },
  noOfHours: function() { return this.end-this.begin }
}

var jCal = {}

function gen() {

	// GENERAL CONF
  jCal.conf.startHr = Number(conf.begin)
  
  conf.days = document.getElementById('f-days').querySelectorAll('input[type="checkbox"]:checked').length

  // "weeks" ARRAY
  jCal.weeks = []
  for (var i=0; i<conf.weeks; i++) {
    jCal.weeks[i] = {}

    // "days" ARRAY
    jCal.weeks[i].days = []
    for (var j=0; j<conf.days; j++) {
      jCal.weeks[i].days[j] = {}

      var hour = Number(conf.begin)
      var hourCount = hour

      // "hours" ARRAY
      jCal.weeks[i].days[j].hours = []
      for (var k=0; k<conf.noOfHours(); k++) {
      	//console.log(k)
      	var hourString = hourCount.toString()
        if (hourString.length < 2) { hourString = '0' + hourString }
        
        jCal.weeks[i].days[j].hours.push([])
        
        var slot = 0 // RESET TO THE HOUR EACH TIME

        // NOT BREAK HR
        if (hourCount != conf.breakHr) {
        //alert(hourCount + ' ' + conf.breakHr)
        	// SLOTS "#": " "
          for (var l=0; l<conf.slotsPerHr(); l++) {
            // MAKE 2 DIGITS IN MINUTES
            //slot = slot.toString()
        		if (slot.toString().length < 2) { slot = '0' + slot.toString() }
            // MAKE READABLE KEY NAME
						var slotKey = hourCount + ':' + slot
            var slotVal
            
            // CALC SLOT END, WITH ROUND UP TO HOUR FOR 60
            var slotEndMin = Number(slot)+Number(conf.slotLen)
            var slotEndHr = hourCount
            if (slotEndMin == 60) {
            	slotEndMin = '00'
        ...