Set config params in new calendar

README.md

@@ -4,7 +4,7 @@
 <img src="./static/assets/logo_app.png" alt="drawing" width="400"/>
 <a href="https://richionline-portfolio.nw.r.appspot.com"><img src="https://richionline-portfolio.nw.r.appspot.com/static/assets/falken_logo.ico" width=40 alt="Personal Portfolio web"></a>
 
-![Version](https://img.shields.io/badge/version-1.2.0-blue) ![GitHub language count](https://img.shields.io/github/languages/count/falken20/falken_teleworking) ![GitHub Top languaje](https://img.shields.io/github/languages/top/falken20/falken_teleworking) ![Test coverage](https://img.shields.io/badge/test%20coverage-81%25-green) ![GitHub License](https://img.shields.io/github/license/falken20/falken_teleworking)[![Python used version](https://img.shields.io/static/v1?label=python&message=3.8&color=blue&logo=python&logoColor=white)
+![Version](https://img.shields.io/badge/version-1.4.0-blue) ![GitHub language count](https://img.shields.io/github/languages/count/falken20/falken_teleworking) ![GitHub Top languaje](https://img.shields.io/github/languages/top/falken20/falken_teleworking) ![Test coverage](https://img.shields.io/badge/test%20coverage-81%25-green) ![GitHub License](https://img.shields.io/github/license/falken20/falken_teleworking)[![Python used version](https://img.shields.io/static/v1?label=python&message=3.8&color=blue&logo=python&logoColor=white)
 
 
 [![Richi web](https://img.shields.io/badge/web-richionline-blue)](https://richionline-portfolio.nw.r.appspot.com) [![Twitter](https://img.shields.io/twitter/follow/richionline?style=social)](https://twitter.com/richionline)
@@ -53,6 +53,7 @@ LEVEL_LOG = ["DEBUG", "INFO", "WARNING", "ERROR"]
 ---
 
 ##### Versions
+- 1.4.0 Adding new calendar component
 - 1.3.0 Adding calendar
 - 1.2.0 Include login module and new design
 - 1.0.1 Including tests
@@ -66,4 +67,5 @@ LEVEL_LOG = ["DEBUG", "INFO", "WARNING", "ERROR"]
 - @login-required: Decorator to protect a page when using Flask-Login.
 - current_user: Object that represents the user from the database and provides access all of the attributes of that user with dot notation.
 - Bulma: CSS framework (https://bulma.io/)
-- Help to apply Flask-Login (https://www.digitalocean.com/community/tutorials/how-to-add-authentication-to-your-app-with-flask-login)
+- Help to apply Flask-Login (https://www.digitalocean.com/community/tutorials/how-to-add-authentication-to-your-app-with-flask-login)
+- Calendar component (https://fullcalendar.io/)

static/main.css

@@ -33,6 +33,12 @@
     width:100%;
     display: flex;
     justify-content: center;
-  }
+}
 
+.calendar {
+    font-size: 50% !important;
+    color: black;
+    background-color: white;
+    opacity: .70;
+}
 

templates/calendar.html

@@ -2,31 +2,68 @@
 
 {% block content %}
 
-<!-- Mobiscroll JS and CSS Includes -->
+<!-- Mobiscroll JS and CSS Includes
 <link rel="stylesheet" href="{{ url_for('static', filename='mobiscroll.javascript.min.css') }}">
 <script src="{{ url_for('static', filename='js/mobiscroll.javascript.min.js') }}"></script>
+-->
 
-<style type="text/css">
-        body {
-    margin: 0;
-    padding: 0;
-}
+<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.4/index.global.min.js'></script>
+<script>
 
-body,
-html {
-    height: 100%;
-}
+  document.addEventListener('DOMContentLoaded', function() {
+    var calendarEl = document.getElementById('calendar');
+    var calendar = new FullCalendar.Calendar(calendarEl, {
+        initialView: 'dayGridMonth',
+        navLinks: false, // default false
+        weekends: false, 
+        headerToolbar: {
+            left: 'prev,next',
+            center: 'title',
+            right: 'today'
+        },        
+        firstDay : 1,
+        eventSources: [
+            {
+                events: [ 
+                    {
+                        title  : 'Home',
+                        start  : '2023-02-01',
+                        color  : 'green'                    },
+                    {
+                        title  : 'Office',
+                        start  : '2023-02-05',
+                        end    : '2023-02-07',
+                        color  : 'blue'
+                    }
+                ],
+                color: 'black',
+                textColor: 'white',
+            }
+        ]  
+    });
+    calendar.setOption('aspectRatio', 0.7);
+    calendar.render();
+  });
 
+</script>
+<style type="text/css">
+    body {
+        margin: 0;
+        padding: 0;
+    }
+    body, html {
+        height: 100%;
+    }    
 </style>
 
 <div mbsc-page class="demo-dots-colors-labels">
     <div style="height:100%">
             <div class="mbsc-grid">
     <div class="mbsc-row">
         <div class="mbsc-col-sm-12 mbsc-col-md-4">
-            <div class="mbsc-form-group">
+            <div class="mbsc-form-group calendar">
                 <div class="mbsc-form-group-title">Home 🟩 / Office 🟦</div>
-                <div id="demo-colored"></div>
+                <div id='calendar'></div>
             </div>
         </div>
     </div>
@@ -35,7 +72,7 @@
 </div>
 
 <script>
-    var array = []
+    var dates = []
     var elem = []
 </script>
 
@@ -46,52 +83,31 @@
         </script>
     {% endfor %}
     <script>
-        array.push(elem)
+        dates.push(elem)
         elem = []
     </script>
 {% endfor %}
 
 <script>    
-    mobiscroll.setOptions({
-        locale: mobiscroll.localeEs,  // Specify language like: locale: mobiscroll.localePl or omit setting to use default
-        theme: 'ios',                 // Specify theme like: theme: 'ios' or omit setting to use default
-        themeVariant: 'light'         // More info about themeVariant: https://docs.mobiscroll.com/5-22-0/javascript/calendar#opt-themeVariant
-    });
-
     var now = new Date();
 
     var color_office = '#357EC7';
     var color_home = 'green';
     //var all_dates = '{{ all_dates }}';
 
-    var colors = []
+    var events = []
     var color_bg 
-    array.forEach(function (item, index) {
+    dates.forEach(function (item, index) {
         if (item[1] == "True") {color_bg = color_home} else {color_bg = color_office}
         var obj = {
-            date: item[0],
-            background: color_bg
+            start: item[0],
+            color: color_bg
         }
-        colors.push(obj)
+        events.push(obj)
     });
 
-    mobiscroll.datepicker('#demo-colored', {
-        controls: ['calendar'],       // More info about controls: https://docs.mobiscroll.com/5-22-0/javascript/calendar#opt-controls
-        display: 'inline',            // Specify display mode like: display: 'bottom' or omit setting to use default
-        colors: colors                // More info about colors: https://docs.mobiscroll.com/5-22-0/javascript/calendar#opt-colors
-        /*
-        colors: [                     // More info about colors: https://docs.mobiscroll.com/5-22-0/javascript/calendar#opt-colors
-            //{ recurring: { repeat: 'yearly', month: 12, day: 8 }, background: '#9ccc65' },
-            // { start: new Date(now.getFullYear(), now.getMonth() + 1, 15), end: new Date(now.getFullYear(), now.getMonth() + 1, 18), text: 'Conference', background: '#f4511e' }
-            // { date: new Date(now.getFullYear(), now.getMonth() + 1, 4), background: '#cfd8dc' },
-            { date: new Date(now.getFullYear(), now.getMonth(), 2), background: color_office },
-            { date: new Date(now.getFullYear(), now.getMonth(), 3), background: color_office },
-            { date: new Date(now.getFullYear(), now.getMonth(), 11), background: color_office },
-            { date: new Date(now.getFullYear(), now.getMonth(), 19), background: color_home },
-            { date: new Date(now.getFullYear(), now.getMonth(), 28), background: color_home },
-        ]
-        */
-    });
+    console.log(calendar)
+    calendar.setOption('events', events)
 
 </script>