JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<span id='calendar_test'>?</span>
	<p>Chosen box: <b><span id='calendar_chosenbox'>?</span></b>
  
  <div id='calendar_box1' class='calendar_box calendar_closed' data-box='1'>1</div><div id='calendar_box2' class='calendar_box calendar_closed' data-box='2'>2</div><div id='calendar_box3' class='calendar_box calendar_closed' data-box='3'>3</div><div id='calendar_box4' class='calendar_box calendar_closed' data-box='4'>4</div><div id='calendar_box5' class='calendar_box calendar_closed' data-box='5'>5</div><div id='calendar_box6' class='calendar_box calendar_closed' data-box='6'>6</div><div id='calendar_box7' class='calendar_box calendar_closed' data-box='7'>7</div><div id='calendar_box8' class='calendar_box calendar_closed' data-box='8'>8</div><div id='calendar_box9' class='calendar_box calendar_closed' data-box='9'>9</div><div id='calendar_box10' class='calendar_box calendar_closed' data-box='10'>10</div><div id='calendar_box11' class='calendar_box calendar_closed' data-box='11'>11</div><div id='calendar_box12' class='calendar_box calendar_closed' data-box='12'>12</div><div id='calendar_box13' class='calendar_box calendar_closed' data-box='13'>13</div><div id='calendar_box14' class='calendar_box calendar_closed' data-box='14'>14</div><div id='calendar_box15' class='calendar_box calendar_closed' data-box='15'>15</div><div id='calendar_box16' class='calendar_box calendar_closed' data-box='16'>16</div><div id='calendar_box17' class='calendar_box calendar_closed' data-box='17'>17</div><div id='calendar_box18' class='calendar_box calendar_closed' data-box='18'>18</div><div id='calendar_box19' class='calendar_box calendar_closed' data-box='19'>19</div><div id='calendar_box20' class='calendar_box calendar_closed' data-box='20'>20</div><div id='calendar_box21' class='calendar_box calendar_closed' data-box='21'>21</div><div id='calendar_box22' class='calendar_box calendar_closed' data-box='22'>22</div><div id='calendar_box23' class='calendar_box calendar_closed'...

JavaScript

// select a box. Nothing happens if you click on one already open, or too early to open
	$('.calendar_closed,.calendar_today').click(function(){ $('#calendar_test').html('test');
	  var box = $(this).data('box'); $('#calendar_chosenbox').html(box);
	});
	
	// opening box
	$('#calendar_choose_griff').click(function() {
	  var aid = $('#grifflist').val();
	  $.ajax({ type: 'POST', url: '../../ajax/calendar.php', data: { whatdo : 'open', target : box, uid : {$uid}, aid : aid },
	  success: function(result){
	    if(result.success == 'yes'){ 
	      $('#calendar_open_inner').html(result.text); $('#calendar_open_result').fadeIn(400);
	      // must update that box div so it's now opened and can't be clicked again
	      $('#calendar_box'+box).attr('class','calendar_opened'); 
	    }
	    else{ $('#calendar_open_error').html(result.text); }
	  }
	}); return false;});
	
	// close the opening box div
	$('#calendar_open_close').click(function(){ 
	  $('#calendar_open_result').fadeOut(400); $('#calendar_open_inner').html(''); 
	});