Calendar style and click event test

static/css/calendar.css

@@ -120,7 +120,7 @@ html[xmlns] .clearfix {
 .calendar .clndr .clndr-table .header-days {
   height: 30px;
   font-size: 10px;
-  background: #0D70A6;
+  background: #506EE4;
 }
 .calendar .clndr .clndr-table .header-days .header-day {
   vertical-align: middle;
@@ -139,8 +139,7 @@ html[xmlns] .clearfix {
   vertical-align: top;
 }
 .calendar .clndr .clndr-table tr .day {
-  border-left: 1px solid #000000;
+  border: 1px solid #000000;
-  border-top: 1px solid #000000;
   width: 100%;
   height: inherit;
 }
@@ -149,23 +148,15 @@ html[xmlns] .clearfix {
 }
 .calendar .clndr .clndr-table tr .day.today,
 .calendar .clndr .clndr-table tr .day.my-today {
-  background: #9AD6E3;
+	box-shadow: inset 0 0 0 2px black;
-}
-.calendar .clndr .clndr-table tr .day.today:hover,
-.calendar .clndr .clndr-table tr .day.my-today:hover {
-  background: #72c6d8;
-}
-.calendar .clndr .clndr-table tr .day.today.event,
-.calendar .clndr .clndr-table tr .day.my-today.event {
-  background: #a7dbc1;
 }
 .calendar .clndr .clndr-table tr .day.event,
 .calendar .clndr .clndr-table tr .day.my-event {
-  background: #B4E09F;
+  background: #a0b3ff;
 }
 .calendar .clndr .clndr-table tr .day.event:hover,
 .calendar .clndr .clndr-table tr .day.my-event:hover {
-  background: #96d478;
+  background: #91a3eb;
 }
 .calendar .clndr .clndr-table tr .day.inactive,
 .calendar .clndr .clndr-table tr .day.my-inactive {
@@ -228,3 +219,28 @@ html[xmlns] .clearfix {
   opacity: 0.5;
   cursor: default;
 }
+
+/*
+.calendar .clndr .clndr-table tr .day.selected {
+	outline: 2px dotted black;
+	outline-offset: -4px;
+}
+*/
+
+.calendar {
+	height: 578px;
+	overflow: hidden;
+}
+
+.clndr > .clndr-main > .events {
+	display: none;
+
+	position: relative;
+	top: -541px;
+	height: 541px;
+	background: #fff;
+}
+
+.clndr > .clndr-main.show-event-menu > .events {
+	display: block;
+}

static/css/custom.css

@@ -12,3 +12,12 @@ html, body {
 	padding: 8px;
 }
 
+.content {
+	display: grid;
+	grid-template-columns: repeat(4, 25%);
+	grid-template-rows: repeat(4, 25%);
+	grid-column-gap: 8px;
+	grid-row-gap: 8px;
+	margin-right: 20px;
+}
+

templates/layout/dash.html

@@ -17,10 +17,12 @@
             </div>
             <div class="col p-2">
 {% include 'layout/includes/top_nav.html' %}
+				<div class="content">
 {% block content %}{% endblock %}
 				</div>
             </div>
         </div>
+    </div>
 {% include 'layout/includes/boot-body.html' %}
 <script src="{{ url_for('static', filename='js/interact.js') }}"></script>
 </body>

templates/modules/calendar.html

@@ -1,21 +1,89 @@
 <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/calendar.css') }}">
 
-<div class="calendar"></div>
+<div class="calendar">
+	<script type="text/template" id="tmplt-clndr">
+		<div class='clndr-controls'>
+            <div class='clndr-control-button'>
+                <span class='clndr-previous-button'>&lsaquo; previous</span>
+            </div>
+            <div class='month'><%= month %> <%= year %></div>
+            <div class='clndr-control-button rightalign'>
+                <span class='clndr-next-button'>next &rsaquo;</span>
+            </div>
+        </div>
+		<div class="clndr-main">
+			<table class='clndr-table' border='0' cellspacing='0' cellpadding='0'>
+				<thead>
+					<tr class='header-days'>
+					<% for(var i = 0; i < daysOfTheWeek.length; i++) { %>
+						<td class='header-day'><%= daysOfTheWeek[i] %></td>
+					<% } %>
+					</tr>
+				</thead>
+				<tbody>
+				<% for(var i = 0; i < numberOfRows; i++){ %>
+					<tr>
+					<% for(var j = 0; j < 7; j++){ %>
+					<% var d = j + i * 7; %>
+						<td class='<%= days[d].classes %>'>
+							<div class='day-contents'><%= days[d].day %></div>
+						</td>
+					<% } %>
+					</tr>
+				<% } %>
+				</tbody>
+			</table>
+		</div>
+	</script>
+	<script type="text/template" id="tmplt-clndr-events">
+		<div class='clndr-controls'>
+            <div class='clndr-control-button'>
+                <span class='clndr-previous-button'>&lsaquo; previous</span>
+            </div>
+            <div class='month'><%= extras.selected.format("LL") %></div>
+            <div class='clndr-control-button rightalign'>
+                <span class='clndr-next-button'>next &rsaquo;</span>
+            </div>
+        </div>
+		<div class="clndr-main">
+			<table class='clndr-table' border='0' cellspacing='0' cellpadding='0'>
+				<thead>
+					<tr class='header-days'>
+					<% for(var i = 0; i < daysOfTheWeek.length; i++) { %>
+						<td class='header-day'><%= daysOfTheWeek[i] %></td>
+					<% } %>
+					</tr>
+				</thead>
+				<tbody>
+				<% for(var i = 0; i < numberOfRows; i++){ %>
+					<tr>
+					<% for(var j = 0; j < 7; j++){ %>
+					<% var d = j + i * 7; %>
+						<td class='<%= days[d].classes %>'>
+							<div class='day-contents'><%= days[d].day %></div>
+						</td>
+					<% } %>
+					</tr>
+				<% } %>
+				</tbody>
+			</table>
+		</div>
+	</script>
+</div>
 
 <script src="{{ url_for('static', filename='js/moment.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/underscore.min.js') }}"></script>
 <script src="{{ url_for('static', filename='modules/clndr.min.js') }}"></script>
 <script>
 var calendars = {};
+var tmplts = {};
+var a;
 
 $(document).ready( function() {
-    // Assuming you've got the appropriate language files,
+	tmplts.clndr = $('#tmplt-clndr').html();
-    // clndr will respect whatever moment's language is set to.
+	tmplts.clndrEvents = $('#tmplt-clndr-events').html();
-    // moment.locale('ru');
 
-    // Here's some magic to make sure the dates are happening this month.
     var thisMonth = moment().format('YYYY-MM');
-    // Events to load into calendar
     var eventArray = [ // TODO: Get events from database
         {
             title: 'Multi-Day Event',
@@ -28,19 +96,28 @@ $(document).ready( function() {
         }, {
             date: thisMonth + '-27',
             title: 'Single Day Event'
+        }, {
+			date: thisMonth + '-6',
+			title: 'Test'
 		}
     ];
 
-    // The order of the click handlers is predictable. Direct click action
-    // callbacks come first: click, nextMonth, previousMonth, nextYear,
-    // previousYear, nextInterval, previousInterval, or today. Then
-    // onMonthChange (if the month changed), inIntervalChange if the interval
-    // has changed, and finally onYearChange (if the year changed).
     calendars.clndr = $('.calendar').clndr({
         events: eventArray,
         clickEvents: {
             click: function (target) {
-                console.log('Cal-1 clicked: ', target);
+				a = target;
+				console.log(target.date.day());
+				this.options.extras.selected = target.date;
+				this.compiledClndrTemplate = _.template(tmplts.clndrEvents);
+				this.render();
+				/*
+                var clndrContainer = $('.calendar').find('.clndr-main');
+				clndrContainer.toggleClass('show-event-menu', true);
+				$('.calendar').find('.x-button').click( function() {
+					clndrContainer.toggleClass('show-event-menu', false);
+				});
+				*/
             },
             today: function () {
                 console.log('Cal-1 today');
@@ -62,17 +139,18 @@ $(document).ready( function() {
         },
         showAdjacentMonths: true,
         adjacentDaysChangeMonth: false,
-		weekOffset: 1
+		weekOffset: 1,
+		forceSixRows: true,
+		template: tmplts.clndr,
+		extras: {
+			selected: null
+		}
     });
 
-    // Bind all clndrs to the left and right arrow keys
     $(document).keydown( function(e) {
-        // Left arrow
         if (e.keyCode == 37) {
             calendars.clndr.back();
         }
-
-        // Right arrow
         if (e.keyCode == 39) {
             calendars.clndr.forward();
         }

templates/pages/bills.html

@@ -4,6 +4,12 @@
 
 {% block content %}
 
+<style id="grid">
+.container.module:nth-child(1n) {
+	grid-area: 1 / 1 / 5 / 5;
+}
+</style>
+
 <div class="container module">
 
 <button type="button" class="btn btn-primary" style="margin:10px;" data-toggle="modal" data-target="#myModal">Add</button>

templates/pages/dashboard.html

@@ -5,7 +5,27 @@
 {% block content %}
 
 <div class="container module">
+<h4>Reminders</h4>
+</div>
+
+<div class="container module">
+<h4>Calendar</h4>
 {% include "modules/calendar.html" %}
 </div>
 
+<style id="grid">
+.container.module:nth-child(1n) {
+	grid-area: 1 / 1 / 5 / 2;
+}
+.container.module:nth-child(2n) {
+	grid-area: 1 / 2 / 5 / 5;
+}
+</style>
+
+<script>
+function onDaySelect() {
+	
+}
+</script>
+
 {% endblock %}