Made a fair bit of progress with the calendar editor.

cal/index.js

@@ -1,16 +1,71 @@
 Vue.createApp({
   data: function() {
           return { 'events': null
-                 , 'tabs': [ 'Events', 'Create' ]
-                 , 'frm': { 'tab': 0, 'e': 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}$' ]
+                               }
                  }
         },
+  methods: { formatDate: function(dt) {
+                           var fmt = 'DD MMM YYYY';
+                           var m = moment(dt);
+                           var t = m.hour() * 3600 + m.minute() * 60 + m.second();
+                           if ( t > 0 ) {
+                             fmt = 'DD MMM YYYY, HH:mm:ss';
+                           }
+                           var ret = moment(dt).format(fmt);
+                           return ret;
+                         },
+             deleteEvent: function() {
+                            this.events.splice(this.frm.e, 1);
+                            this.frm.e = null;
+                            this.validateEvents();
+                          },
+             validateEvents: function() {
+                               var faults = [];
+                               for ( var e in this.events ) {
+                                 for ( var k in this.patterns ) {
+                                   var value = this.events[e][k];
+                                   value = ( value == undefined ? '' : value );
+                                   var patterns = this.patterns[k];
+                                   var match = false;
+                                   for ( var p in patterns ) {
+                                     var pattern = new RegExp(this.patterns[k][p]);
+                                     match = match || pattern.test(value);
+                                   }
+                                   console.log(e, k, value, match);
+                                   if ( ! match ) {
+                                     var fault = {};
+                                     fault.e = e;
+                                     fault.k = k;
+                                     fault.v = value;
+                                     faults.push(fault);
+                                   }
+                                 }
+                               }
+                               this.faults = ( faults.length == 0 ? null : faults );
+                             },
+             modal: function(property) {
+                      var d = {};
+                      d.property = property;
+                      d.value = this.events[this.frm.e][property];
+                      this.frm.modal = d;
+                    }
+           },
   mounted: function() {
              var app = this;
              jQuery.get( 'api.php'
                        , { 'cmd': 'get' }
                        , function(data) {
                            app.events = data;
+                           app.validateEvents();
+                           $('body').fadeIn();
                          }
                        );
            }