diff --git a/cal/api.php b/cal/api.php
index a91f318..f33f02d 100644
--- a/cal/api.php
+++ b/cal/api.php
@@ -2,7 +2,11 @@
 header("Content-Type: application/json");
 include('lib.php');
 $ret = array( "err" => "unknown command" );
-if ( $_GET["cmd"] == "get" ) {
+if ( in_array("cmd", array_keys($_GET)) and $_GET["cmd"] == "get" ) {
+  $ret = getEvents();
+} elseif ( $_POST["cmd"] == "put" ) {
+  $json = base64_decode($_POST["payload"]);
+  file_put_contents("dat/events.json", $json);
   $ret = getEvents();
 }
 print(json_encode($ret));
diff --git a/cal/index.css b/cal/index.css
index 8073252..957d9a4 100644
--- a/cal/index.css
+++ b/cal/index.css
@@ -8,10 +8,28 @@ body { display: none; }
   overflow-y:                                scroll;
   overflow-x:                                  clip;
 }
+.events td.dt {
+  text-align: right;
+  font-family: monospace;
+}
+.events tr:hover td {
+  background: lightgrey;
+}
+.events td {
+  border: none;
+}
 .selection td {
   background-color: darkgrey;
   color: white;
 }
+.events td:first-child {
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+.events td:last-child {
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
 .tt {
   font-family: monospace;
 }
diff --git a/cal/index.js b/cal/index.js
index 130dc33..a5361d4 100755
--- a/cal/index.js
+++ b/cal/index.js
@@ -3,13 +3,13 @@ Vue.createApp({
           return { 'events': null
                  , 'frm': { 'e': null, 'modal': null }
                  , 'faults': null
-                 , 'patterns': { 'coordinates': [ '^$', '^-?\\d{1,3}(?:\\.\\d+)?,-?\\d{1,3}(?:\\.\\d+)?$' ]
-                               , 'start':       [ '^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}$' ]
-                               , 'end':         [ '^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}$' ]
-                               , 'title':       [ '^.{20,50}$' ]
-                               , 'description': [ '^.{20,}$' ]
-                               , 'location':    [ '^.{5,100}$' ]
-                               }
+                 , 'fields': { 'coordinates': { 'patterns': [ '^$', '^-?\\d{1,3}(?:\\.\\d+)?,-?\\d{1,3}(?:\\.\\d+)?$' ], 'default': '-27.38621539644283,153.0351689206467' }
+                             , 'start':       { 'patterns': [ '^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}$' ], 'default': '' }
+                             , 'end':         { 'patterns': [ '^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}$' ], 'default': '' }
+                             , 'title':       { 'patterns': [ '^.{20,50}$' ], 'default': 'Event Title' }
+                             , 'description': { 'patterns': [ '^.{20,}$' ], 'default': 'Event Description' }
+                             , 'location':    { 'patterns': [ '^.{5,100}$' ], 'default': 'Event Location' }
+                             }
                  }
         },
   methods: { formatDate: function(dt) {
@@ -22,6 +22,35 @@ Vue.createApp({
                            var ret = moment(dt).format(fmt);
                            return ret;
                          },
+             createEvent: function() {
+                            var event = {};
+                            for ( var k in this.fields ) {
+                              event[k] = this.fields[k].default;
+                            }
+                            const now = moment();
+                            let next7pm = moment().hour(19).minute(0).second(0);
+                            if (now.isSameOrAfter(next7pm)) {
+                              next7pm.add(1, 'day');
+                            }
+                            const twoHoursLater = moment(next7pm).add(2, 'hours');
+                            event.start = next7pm.format('YYYY-MM-DDTHH:mm:ss');
+                            event.end = twoHoursLater.format('YYYY-MM-DDTHH:mm:ss');
+                            this.events.unshift(event);
+                            this.frm.e = 0;
+                          },
+             saveEvents: function() {
+                           console.log(this.events);
+                           var app = this;
+                           jQuery.post( 'api.php'
+                                      , { 'cmd': 'put'
+                                        , 'payload': btoa(JSON.stringify(this.events))
+                                        }
+                                      , function(data) {
+                                          app.events = data;
+                                          app.validateEvents();
+                                        }
+                                      );
+                         },
              deleteEvent: function() {
                             this.events.splice(this.frm.e, 1);
                             this.frm.e = null;
@@ -30,16 +59,15 @@ Vue.createApp({
              validateEvents: function() {
                                var faults = [];
                                for ( var e in this.events ) {
-                                 for ( var k in this.patterns ) {
+                                 for ( var k in this.fields ) {
                                    var value = this.events[e][k];
                                    value = ( value == undefined ? '' : value );
-                                   var patterns = this.patterns[k];
+                                   var patterns = this.fields[k].patterns;
                                    var match = false;
                                    for ( var p in patterns ) {
-                                     var pattern = new RegExp(this.patterns[k][p]);
+                                     var pattern = new RegExp(patterns[p]);
                                      match = match || pattern.test(value);
                                    }
-                                   console.log(e, k, value, match);
                                    if ( ! match ) {
                                      var fault = {};
                                      fault.e = e;
@@ -51,6 +79,17 @@ Vue.createApp({
                                }
                                this.faults = ( faults.length == 0 ? null : faults );
                              },
+             load: function() {
+                     var app = this;
+                     jQuery.get( 'api.php'
+                               , { 'cmd': 'get' }
+                               , function(data) {
+                                   app.events = data;
+                                   app.validateEvents();
+                                   $('body').fadeIn();
+                                 }
+                               );
+                   },
              modal: function(property) {
                       var d = {};
                       d.property = property;
@@ -59,14 +98,6 @@ Vue.createApp({
                     }
            },
   mounted: function() {
-             var app = this;
-             jQuery.get( 'api.php'
-                       , { 'cmd': 'get' }
-                       , function(data) {
-                           app.events = data;
-                           app.validateEvents();
-                           $('body').fadeIn();
-                         }
-                       );
+             this.load();
            }
 }).mount('#app')
diff --git a/cal/index.php b/cal/index.php
index 9043286..b66e3e3 100755
--- a/cal/index.php
+++ b/cal/index.php
@@ -29,16 +29,17 @@
       <div class="bounding-box">
         <div class="row">
           <div class="col-4">
-            <table class="table">
+            <table class="table events mb-2">
               <tbody>
                 <tr v-for="event, e in events" v-on:click="frm.e = e" :class="{ 'selection': frm.e == e }">
                   <td><span class="badge text-bg-info">{{ e + 1 }}</span></td>
-                  <td>{{ formatDate(event.start) }}</td>
-                  <td>{{ formatDate(event.end) }}</td>
+                  <td class="dt">{{ formatDate(event.start) }}</td>
+                  <td class="dt">{{ formatDate(event.end) }}</td>
                 </tr>
               </tbody>
             </table>
-            <button v-if="faults == null" class="btn btn-primary form-control">Save</button>
+            <button class="btn btn-success form-control mb-2" v-on:click="createEvent">Create</button>
+            <button v-if="faults == null" class="btn btn-primary form-control" v-on:click="saveEvents">Save</button>
             <ul v-else>
               <li v-for="fault, f in faults">
                 <span class="badge text-bg-info">{{ parseInt(fault.e) + 1 }}</span> <span class="tt">{{fault.k}}</span></span>
@@ -48,12 +49,12 @@
           <div class="col-8" v-if="frm.e != null">
             <div class="input-group mb-1">
               <span class="input-group-text">Start</span>
-              <input type="text" disabled class="form-control" v-model="events[frm.e].start" v-on:keyup="validateEvents">
+              <input type="text" disabled class="form-control" :value="formatDate(events[frm.e].start)" v-on:keyup="validateEvents">
               <button class="btn btn-outline-secondary" type="button" v-on:click="modal('start')">...</button>
             </div>
             <div class="input-group mb-1">
               <span class="input-group-text">End</span>
-              <input type="text" disabled class="form-control" v-model="events[frm.e].end" v-on:keyup="validateEvents">
+              <input type="text" disabled class="form-control" :value="formatDate(events[frm.e].end)" v-on:keyup="validateEvents">
               <button class="btn btn-outline-secondary" type="button" v-on:click="modal('end')">...</button>
             </div>
             <div class="input-group mb-1">