Fixed loading problem + added some spans for themes

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-google-calendar",
 	"name": "Obsidian Google Calendar",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"minAppVersion": "0.12.0",
 	"description": "Interact with your Google Calendar from Inside Obsidian",
 	"author": "YukiGasai",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-sample-plugin",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"description": "Interact with your Google Calendar from Inside Obsidian",
 	"main": "main.js",
 	"scripts": {

src/svelte/ScheduleComp.svelte

@@ -8,17 +8,22 @@
     import { onDestroy } from "svelte";
     
     
-    export let timeSpan = 4;
+    export let timeSpan = 7;
     export let date = window.moment();
     let interval;
     let days: Map<string, GoogleEvent[]> = new Map();
     let loading = false;
+    let events = [];
 
     const getEvents = async () => {
-        days.clear();
-        loading = true;
-        const events = await googleListEvents(date, date.clone().add(timeSpan, "day"));
+        const newEvents = await googleListEvents(date, date.clone().add(timeSpan, "day"));
 
+        //only reload if events change
+        if(JSON.stringify(newEvents) == JSON.stringify(events)){
+            return;
+        }
+        days.clear();
+        events = newEvents;
         events.forEach(event => {
             const key = event.start.date ? 
                 window.moment(event.start.date).format("DD MMM, ddd") :
@@ -40,7 +45,7 @@
         }else{
             const start = window.moment(event.start.dateTime).format("hh:mma"); 
             const end = window.moment(event.end.dateTime).format("hh:mma"); 
-            return `${start} - ${end}`
+            return `${start}-${end}`
         }
     }
 
@@ -106,12 +111,14 @@
                     <div class="dayEvents">
                         {#each events as event}
                             <div class="dayEvent" on:click="{(e) => goToEvent(event,e)}">
-                                <div class="{event.recurringEventId ? "recurringCircle" : "circle"}" style:background="{getColorFromEvent(event)}"></div>
+                                <div class="{event.recurringEventId ? "recurringCircleContainer" : "circleContainer"}">
+                                    <div  class="circle" style:background="{getColorFromEvent(event)}"></div>
+                                </div>
                                 <div class="timeContainer">
-                                    {getDateString(event)}
+                                    <span>{getDateString(event)}</span>
                                 </div>
                                 <div class="eventTitleContainer">
-                                    {event.summary}
+                                    <span>{event.summary}</span>
                                 </div>
 
                             </div>
@@ -129,6 +136,7 @@
             padding: 10px;
         }
 
+
         .scheduleContent{
             display: flex;
             flex-direction: column;
@@ -194,33 +202,34 @@
             background-color: rgba(128, 128, 128, 0.129);
         }
     
-        .circle{
-            width: 10px;
-            min-width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            margin-right: 10px;
-        }
-
-        .recurringCircle{
+        .recurringCircleContainer,
+        .circleContainer{
             position: relative;
-            width: 10px;
-            min-width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            margin-right: 10px;
+            display: flex;
+            width: 30px;
+            min-width: 30px;
+            height: 30px;
+            align-items: center;
+            justify-content: center;
         }
 
-        .recurringCircle::after{
+        .recurringCircleContainer::after{
             content: "↺";
             position: absolute;
             width: 30px;
             height: 30px;
-            left:-100%;
+            text-align: center;
             line-height: 30px;
             font-size: 30px;
-            top:-11px;
             color:white;
+            white-space: nowrap;
+        }
+
+        .circle{
+            width: 10px;
+            min-width: 10px;
+            height: 10px;
+            border-radius: 50%;
         }
     
         .timeContainer{