add bootstrap styling, add recommended extension

Liturgical-Calendar · Jan 5, 2025 · 52054fe · 52054fe
1 parent 1effc44
commit 52054fe
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 88 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+	"recommendations": [
+		"ms-vscode.live-server"
+	]
+}
diff --git a/fullcalendar/examples/messages.html b/fullcalendar/examples/messages.html
@@ -1,26 +1,26 @@
+<!--
+  Liturgical Calendar display script using Javascript and Fullcalendar
+  Author: John Romano D'Orazio
+  Email: [email protected]
+  Licensed under the Apache 2.0 License
+  Version 2.3
+  Date Created: 27 December 2017
+-->
 <!DOCTYPE html>
 <html>
 
 <head>
     <meta charset='utf-8' />
     <title>{TITLE PLACEHOLDER}</title>
     <meta charset="UTF-8">
-    <link rel="icon" type="image/x-icon" href="../../../favicon.ico">
     <meta name="msapplication-TileColor" content="#ffffff" />
-    <meta name="msapplication-TileImage" content="../../../assets/easter-egg-5-144-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../../assets/easter-egg-5-152-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../../assets/easter-egg-5-144-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../../assets/easter-egg-5-120-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../../assets/easter-egg-5-114-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../../assets/easter-egg-5-72-279148.png">
-    <link rel="apple-touch-icon-precomposed" href="../../../assets/easter-egg-5-57-279148.png">
-    <link rel="icon" href="../../../assets/easter-egg-5-32-279148.png" sizes="32x32">
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link href='https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css' rel='stylesheet'>
     <link href="styles.css" rel="stylesheet" />
 </head>
 
-<body>
+<body class="p-4">
     <div id="spinnerWrapper">
         <div class="lds-roller">
             <div></div>
@@ -46,21 +46,23 @@
     <div id='calendar'></div>
 
     <script type='importmap'>
-        {
-          "imports": {
-            "@fullcalendar/core": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
-            "@fullcalendar/core/": "https://cdn.skypack.dev/@fullcalendar/[email protected]/",
-            "@fullcalendar/daygrid": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
-            "@fullcalendar/list": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
-            "@fullcalendar/bootstrap5": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
-            "@liturgical-calendar/components-js": "https://cdn.jsdelivr.net/npm/@liturgical-calendar/[email protected]/+esm"
-          }
-        }
+            {
+            "imports": {
+                "@fullcalendar/core": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
+                "@fullcalendar/core/": "https://cdn.skypack.dev/@fullcalendar/[email protected]/",
+                "@fullcalendar/daygrid": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
+                "@fullcalendar/list": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
+                "@fullcalendar/bootstrap5": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
+                "@liturgical-calendar/components-js": "https://cdn.jsdelivr.net/npm/@liturgical-calendar/[email protected]/+esm"
+            }
+            }
     </script>
     <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js'></script>
     <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/tooltip.min.js"></script> -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/latest/js.cookie.min.js" integrity="sha512-iewyUmLNmAZBOOtFnG+GlGeGudYzwDjE1SX3l9SWpGUs0qJTzdeVgGFeBeU7/BIyOZdDy6DpILikEBBvixqO9Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/latest/js.cookie.min.js"
+        integrity="sha512-iewyUmLNmAZBOOtFnG+GlGeGudYzwDjE1SX3l9SWpGUs0qJTzdeVgGFeBeU7/BIyOZdDy6DpILikEBBvixqO9Q=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script type="module" src="script.js"></script>
 
 </body>

diff --git a/fullcalendar/examples/month-view.html b/fullcalendar/examples/month-view.html
@@ -1,26 +1,26 @@
+<!--
+  Liturgical Calendar display script using Javascript and Fullcalendar
+  Author: John Romano D'Orazio
+  Email: [email protected]
+  Licensed under the Apache 2.0 License
+  Version 2.3
+  Date Created: 27 December 2017
+-->
 <!DOCTYPE html>
 <html>
 
 <head>
     <meta charset='utf-8' />
     <title>{TITLE PLACEHOLDER}</title>
     <meta charset="UTF-8">
-    <link rel="icon" type="image/x-icon" href="../../../favicon.ico">
     <meta name="msapplication-TileColor" content="#ffffff" />
-    <meta name="msapplication-TileImage" content="../../../assets/easter-egg-5-144-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../../assets/easter-egg-5-152-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../../assets/easter-egg-5-144-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../../assets/easter-egg-5-120-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../../assets/easter-egg-5-114-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../../assets/easter-egg-5-72-279148.png">
-    <link rel="apple-touch-icon-precomposed" href="../../../assets/easter-egg-5-57-279148.png">
-    <link rel="icon" href="../../../assets/easter-egg-5-32-279148.png" sizes="32x32">
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link href='https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css' rel='stylesheet'>
     <link href="styles.css" rel="stylesheet" />
 </head>
 
-<body>
+<body class="p-4">
     <div id="spinnerWrapper">
         <div class="lds-roller">
             <div></div>
@@ -33,36 +33,36 @@
             <div></div>
         </div>
     </div>
+
     <header>
-      <div id="calendarOptions" class="row mb-4"></div>
+        <div id="calendarOptions" class="row mb-4"></div>
     </header>
 
     <div id='calendar'></div>
 
-    <footer></footer>
-
     <table id="LitCalMessages">
         <thead></thead>
         <tbody></tbody>
     </table>
 
-
     <script type='importmap'>
-        {
-          "imports": {
-            "@fullcalendar/core": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
-            "@fullcalendar/core/": "https://cdn.skypack.dev/@fullcalendar/[email protected]/",
-            "@fullcalendar/daygrid": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
-            "@fullcalendar/list": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
-            "@fullcalendar/bootstrap5": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
-            "@liturgical-calendar/components-js": "https://cdn.jsdelivr.net/npm/@liturgical-calendar/[email protected]/+esm"
-          }
-        }
+            {
+            "imports": {
+                "@fullcalendar/core": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
+                "@fullcalendar/core/": "https://cdn.skypack.dev/@fullcalendar/[email protected]/",
+                "@fullcalendar/daygrid": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
+                "@fullcalendar/list": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
+                "@fullcalendar/bootstrap5": "https://cdn.skypack.dev/@fullcalendar/[email protected]",
+                "@liturgical-calendar/components-js": "https://cdn.jsdelivr.net/npm/@liturgical-calendar/[email protected]/+esm"
+            }
+            }
     </script>
     <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js'></script>
     <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/tooltip.min.js"></script> -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/latest/js.cookie.min.js" integrity="sha512-iewyUmLNmAZBOOtFnG+GlGeGudYzwDjE1SX3l9SWpGUs0qJTzdeVgGFeBeU7/BIyOZdDy6DpILikEBBvixqO9Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/latest/js.cookie.min.js"
+        integrity="sha512-iewyUmLNmAZBOOtFnG+GlGeGudYzwDjE1SX3l9SWpGUs0qJTzdeVgGFeBeU7/BIyOZdDy6DpILikEBBvixqO9Q=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script type="module" src="script.js"></script>
 
 </body>

diff --git a/fullcalendar/index.php b/fullcalendar/index.php
diff --git a/javascript/index.html b/javascript/index.html
@@ -1,5 +1,5 @@
 <!--
-  Liturgical Calendar display script using AJAX and Javascript
+  Liturgical Calendar display script using Javascript
   Author: John Romano D'Orazio
   Email: [email protected]
   Licensed under the Apache 2.0 License
@@ -12,35 +12,27 @@
 <head>
     <title>{TITLE PLACEHOLDER}</title>
     <meta charset="UTF-8">
-    <link rel="icon" type="image/x-icon" href="../../favicon.ico">
     <meta name="msapplication-TileColor" content="#ffffff" />
-    <meta name="msapplication-TileImage" content="../../assets/easter-egg-5-144-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../assets/easter-egg-5-152-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../assets/easter-egg-5-144-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../assets/easter-egg-5-120-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../assets/easter-egg-5-114-279148.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../assets/easter-egg-5-72-279148.png">
-    <link rel="apple-touch-icon-precomposed" href="../../assets/easter-egg-5-57-279148.png">
-    <link rel="icon" href="../../assets/easter-egg-5-32-279148.png" sizes="32x32">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css"
+        integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg=="
+        crossorigin="anonymous"
+        referrerpolicy="no-referrer" />
     <link href="styles.css" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
-
 </head>
 
-<body>
-    <span class="material-icons" id="openSettings">settings</span>
-    <header>
-    </header>
+<body class="p-4">
+    <form id="litcalForm">
+        <div class="row mb-4" id="calendarOptions">
+            <h2>Liturgical Calendar as an HTML table produced by Javascript</h2>
+        </div>
+    </form>
+
     <div id="litcalWebcalendar"></div>
-    <div style="text-align:center;border:3px ridge Green;background-color:LightBlue;width:75%;margin:10px auto;padding:10px;"><span id="dayCnt"></span> event days created</div>
+
     <table id="LitCalMessages">
         <thead></thead>
         <tbody></tbody>
     </table>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
 
     <script type="module" src="main.js"></script>
 </body>
diff --git a/javascript/main.js b/javascript/main.js
@@ -22,6 +22,16 @@ ApiClient.init().then( (apiClient) => {
     apiOptions.linkToCalendarSelect( calendarSelect ).appendTo( '#calendarOptions' );
 
     apiClient.listenTo( calendarSelect ).listenTo( apiOptions );
+    apiClient._eventBus.on( 'calendarFetched', (LitCalData) => {
+        if (LitCalData.hasOwnProperty('messages')) {
+            const messagesHtml = LitCalData.messages.map((message, idx) => {
+                const tr = document.createElement('tr');
+                tr.innerHTML = `<td>${idx}</td><td>${message}</td>`;
+                return tr;
+            });
+            document.querySelector('#LitCalMessages tbody').replaceChildren(...messagesHtml);
+        }
+    });
 
     const webCalendar = new WebCalendar();
     webCalendar.id('LitCalTable')

diff --git a/php/index.php b/php/index.php
@@ -1,7 +1,7 @@
 <?php
 
 /**
- * Liturgical Calendar display script using CURL and PHP
+ * Liturgical Calendar display script using cURL and PHP
  * Author: John Romano D'Orazio
  * Email: [email protected]
  * Licensed under the Apache 2.0 License