diff --git a/apps/schoolCalendar/custom.html b/apps/schoolCalendar/custom.html
index 9a9abcbd3..e1c2d0c03 100644
--- a/apps/schoolCalendar/custom.html
+++ b/apps/schoolCalendar/custom.html
@@ -1,15 +1,79 @@
 <html>
 <head>
+    <style>
+      body {
+        padding: 0;
+        margin: 0;
+      }
+      html, body, #map {
+        height: 100%;
+        width: 100%;
+      }
+      #controls {
+        padding: 10px;
+        margin: 10px;
+        border: 1px solid black;
+        position:absolute;
+        right:0px;bottom:0px;
+        background-color: rgb(255, 255, 255);
+        z-index: 100;
+      }
+    </style>
+    <meta charset='utf-8' />
+    <link href='fullcalendar/main.css' rel='stylesheet' />
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    
+    <div id="controls">
+      <p>Create your events on the current week. Keep in note that your events repeat weekly.</p>
+      <p>One you have created your events, Click <button id="upload" class="btn btn-primary">Upload</button></p>
+      <p>All day events are not supported. A feature that lets you get the calendar from your watch will be added in a future update.</p>
+    </div>
 </head>
 <body>
 
-    <p>Some text: <input type="text" id="mytext" class="form-input" value="http://espruino.com"></p>
-    <p>Click <button id="upload" class="btn btn-primary">Upload</button></p>
-
     <script src="../../core/lib/customize.js"></script>
 
     <script>
+        document.addEventListener('DOMContentLoaded', function() {
+        var calendarEl = document.getElementById('calendar');
+        var calendar = new FullCalendar.Calendar(calendarEl, {
+          initialView: 'timeGridWeek',
+          headerToolbar: {
+            left: '',
+            center: 'title',
+            right: 'timeGridWeek,listWeek'
+          },
+        navLinks: true, // can click day/week names to navigate views
+        editable: true,
+        selectable: true,
+        selectMirror: true,
+        nowIndicator: true,
+        editable: true,
+        height: 600,
+        select: function(arg) {
+          var title = prompt('Event Title:');
+          if (title) {
+            calendar.addEvent({
+              title: title,
+              start: arg.start,
+              end: arg.end,
+              allDay: arg.allDay
+            })
+          }
+          calendar.unselect()
+        },
+        eventClick: function(arg) {
+          if (confirm('Are you sure you want to delete this event?')) {
+            arg.event.remove()
+          }
+        },
+        });
+        calendar.render();
+      });
+        
+      var calendarEvents = calendar.getEvents();
+      let schedule = []
+        
         // When the 'upload' button is clicked...
         document.getElementById("upload").addEventListener("click", function () {
             // get the text to add
@@ -426,5 +490,6 @@ draw();
         });
 
     </script>
-</body>
+    <div id='calendar'></div>
+  </body>
 </html>
