Calendar Generator

For eyescreen registration form calendar auto generator

by Thet Hlaing

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<select name="form[Date2][]" id="Date1" class="rsform-select-box">
<option value="">- Select Date -</option>
<option value="22-July-2016">22th July 2016 - Friday</option>
<option value="6-August-2016">6th August 2016 - Saturday</option>
<option value="20-August-2016">20th August 2016 - Saturday</option>
<option value="26-August-2016">26th August 2016 - Friday</option>
<option value="27-August-2016">27th August 2016 - Saturday</option>
<option value="10-September-2016">10th September 2016 - Saturday</option>
<option value="16-September-2016">16th September 2016 - Friday</option>
<option value="17-September-2016">17th September 2016 - Saturday</option>
</select>

<section class="calendar" id="calendar">
	      <!--<span class="twoDes"> 2 slots left </span> <br/>-->
       <span class="oneDes"> 1 slot left </span> <br>
	     <span class="fullDes"> fully booked </span> <br>	     
</section>

<span id='test'> Test click</span>

CSS

/*Calendar */
.calendar{ margin: 10px 0px 20px 15px;}
.calendar.show{display:block;}
.calendarToggle{margin-left: 15px;  text-decoration: none;  color: #fff;  background-color: rgb(75, 140, 182);  padding: 6px 10px;  
display: inline-block;  position:relative; margin-bottom:20px;}
section.month {display: inline-block; text-align: center;  border: 1px solid #21B8CE;  margin-bottom:5px;    vertical-align: top;}
section.month header{    margin-bottom: 1px; background-color: #21B8CE; color: #fff; padding: 3px 0px;  line-height: 19px;}
.datelist { display: inline-block; width: 80px; height: 456px; vertical-align: top;}
.datelist:not(:nth-child(2)){  border-left: 1px solid #21B8CE;margin-left:-3px;}
.datelist div { padding: 5px;  margin-top: 1px;}
.datelist .twofree{ background-color: #F8B500;  color: #fff;}
.datelist .onefree{background-color:#EC809A; color:#fff;}
.datelist .full{  background-color: #C1C1C1;color: #fff;}
.twoDes{ background-color: #F8B500;  color: #fff;   display: inline-block;  padding: 5px;  margin-bottom: 5px;  width: 76px;}
.oneDes{ background-color: #EC809A;  color: #fff;   display: inline-block;  padding: 5px;  margin-bottom: 5px;  width: 76px;}
.fullDes{ background-color: #C1C1C1;  color: #fff;  display: inline-block;  padding: 5px;  margin-bottom: 5px;}

JavaScript

jQuery(document).ready(function(){
		var prevMonth = "";
    var monthObj = "";
    var headerObj = "";
    //Temp Holder
    var calendarObj = jQuery(document.createElement("div"));
    var fridaySlots = ["01:00pm","01:30pm","02:00pm","02:30pm","03:00pm","03:30pm","04:00pm","04:30pm"]; 
    var saturdaySlots = ["9:30am","10:00am","10:30am","11:00am","11:30am","12:00pm","12:30pm","02:00pm","02:30pm","03:00pm","03:30pm","04:00pm","04:30pm","05:00pm"];
    
		jQuery('#Date1 option').each(function(){
    	//Exclude 'Select Date' option
      if(jQuery(this).val() != ""){      	
        var currentValue = jQuery(this).val();
        var currentText = jQuery(this).text();
        var currentDayNumerical = currentValue.split('-')[0];
        var currentNthDayNumerical = currentText.split(' ')[0];
        var currentMonth = currentValue.split('-')[1];
        var currentDay = currentText.split('-')[1];
        
        //Different Month, Create new section
        if(currentMonth != prevMonth){
        	//Create Holder 
          calendarObj.append(monthObj);
        	monthObj = jQuery(document.createElement("section")).addClass("month");
        	//Create Header
        	headerObj = jQuery(document.createElement("header")).html(currentMonth);  
        	monthObj.append(headerObj);           
        }        
        //Create Date Object
        var dateObj = jQuery(document.createElement('div')).addClass('datelist').attr('data-date',currentValue);
        var dateHeaderObj = jQuery(document.createElement('header')).html(currentNthDayNumerical + '<br>'+ currentDay);
        dateObj.append(dateHeaderObj);        
        //Get associate day slots by Friday/Saturday
        console.log('currentDay = '+currentDay);
        if(jQuery.trim(currentDay) == "Friday"){
        	jQuery.each(fridaySlots,function(i,val){
        		dateObj.append(jQuery(document.createElement("div")).html(val).attr('data-time',val));
        	});
        }
        else{
       ...