CALENDAR TEST

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="//cdn.cfront-cloud.co.uk/scripts/3/ko.datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.css">
<div id="cal">

</div>

CSS

* {
  font-family: Open Sans,Arial,Helvetica,sans-serif;
}

.hmr {
  box-sizing: border-box;  
  display: flex;
  border-bottom: 1px solid #ffffff;
}

.hmi,
.hml,
.hmh {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  flex-shrink: 1;
  flex-grow: 0;
  height: 20px;
  background: #dddddd;
  border-right: 1px solid rgba(255, 255, 255, 1);
  box-sizing: border-box;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hmi:last-child {
  border-right: none;
}

.hml,
.hmh:first-child {
  color: #ffffff;
  background: #201090;
  width: 2em;
  flex-shrink: 0;
  flex-grow: 0;
  font-size: 11px;
  font-weight: 600;
}

.hmh {
    background: none;
    color: #000000;
    font-size: 9px;
}

.hmh:first-child {
  background: none;  
}

.hmi.x {
  background: #ff6010;
}

.fc-event {
  border: none;
  background: none;
}

JavaScript

$('#cal').html('wfdwefews')

$('#cal').fullCalendar({
defaultDate: '2018-03-12',
eventRender: 
						function(calevent, caleventel)
						{ 
							var islistview = caleventel.hasClass('fc-list-item');
              
            	console.log({'calevent': calevent, 'caleventel':caleventel, 'islistview':islistview });
              
              if(!islistview && calevent.heatmap)
              {
              	$(caleventel).empty();
                
                var row = $('<div class="hmr">').appendTo(caleventel);
                
                for(var i = -1; i < 12; i++)
                	row.append('<i class="hmh">' + (i == 0 ? '12' : (i > 0 ? i : '')) + '</i>');

								row = $('<div class="hmr">').appendTo(caleventel);
                $(row).append('<i class="hml">AM</i>');     
                $.each(calevent.heatmap, 
                	function(idx, o)
                  {
                  	if(((idx % 12) == 0) && idx > 0)
                    {
                    	row = $('<div class="hmr">').appendTo(caleventel);
                      $(row).append('<i class="hml">PM</i>');
                    }                    
                    
                		$(row).append('<i class="hmi ' + this.t + (!!this.x ? ' x' : '') + '""></i>');
                  }
                );
                
                $(caleventel).append('</div>');
              }
						},
        events: [
        {
          title: 'Meeting',
          start: '2018-03-04',
          heatmap: [
          	{ t: '0000', x: 0 },
          	{ t: '0100', x: 0 },
          	{ t: '0200', x: 0 },
          	{ t: '0300', x: 0 },
          	{ t: '0400', x: 0 },
          	{ t: '0500', x: 1 },
          	{ t: '0600', x: 1 },
          	{ t: '0700', x: 1 },
          	{ t: '0800', x: 1 },
          	{ t: '0900', x: 0 },
          	{ t: '1000', x: 0 },
          	{ t: '1100', x: 1 },
          	{ t: '1200', x: 1 },
          	{ t: '1300', x: 0 },
          	{ t: '1400', x: 0 },
          	{...