Add bootstrap theme

package.json

@@ -25,15 +25,20 @@
     "rollup-plugin-terser": "^7.0.0",
     "svelte": "^3.0.0",
     "svelte-fullcalendar": "^1.1.1",
-    "svelte-reactive-preprocessor": "^0.8.0"
+    "svelte-reactive-preprocessor": "^0.8.0",
+    "sveltestrap": "^5.9.0"
   },
   "dependencies": {
     "@fullcalendar/adaptive": "^5.10.1",
+    "@fullcalendar/bootstrap5": "^5.10.2",
     "@fullcalendar/list": "^5.10.1",
     "@fullcalendar/rrule": "^5.10.1",
     "@nextcloud/cdav-library": "^1.0.0",
+    "bootstrap": "^5.1.3",
+    "bootstrap-icons": "^1.8.1",
     "ical.js": "^1.5.0",
     "lodash": "^4.17.21",
+    "rollup-plugin-copy": "^3.4.0",
     "rrule": "^2.6.8",
     "sirv-cli": "^1.0.0",
     "svelte-simple-modal": "^1.3.1"

rollup.config.js

@@ -1,13 +1,14 @@
-import svelte from 'rollup-plugin-svelte';
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import livereload from 'rollup-plugin-livereload';
-import { terser } from 'rollup-plugin-terser';
-import css from 'rollup-plugin-css-only';
-import postcss from 'rollup-plugin-postcss';
-import dev from 'rollup-plugin-dev';
+import svelte from 'rollup-plugin-svelte'
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import livereload from 'rollup-plugin-livereload'
+import { terser } from 'rollup-plugin-terser'
+import css from 'rollup-plugin-css-only'
+import postcss from 'rollup-plugin-postcss'
+import dev from 'rollup-plugin-dev'
+import copy from 'rollup-plugin-copy'
 
-const production = !process.env.ROLLUP_WATCH;
+const production = !process.env.ROLLUP_WATCH
 
 /*
 function serve() {
@@ -44,8 +45,22 @@ export default {
       compilerOptions: {
         // enable run-time checks when not in production
         dev: !production
-			},
+      }
     }),
+
+    // Copy font files
+    copy({
+      targets: [
+        {
+          src: [
+            'node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff',
+            'node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2'
+          ],
+          dest: 'public/build/fonts'
+        }
+      ]
+    }),
+
     // we'll extract any component CSS out into
     // a separate file - better for performance
     css({ output: 'bundle.css' }),
@@ -66,11 +81,18 @@ export default {
 
     // In dev mode, call `npm run start` once
     // the bundle has been generated
-		!production && dev({
+    !production &&
+      dev({
         dirs: ['public'],
         proxy: [
-				{ from: '/cal/klub-reseau', to: 'https://nuage.beta.rz.ens.wtf/remote.php/dav/public-calendars/' },
-				{ from: '/cal/eleves-ens', to: 'https://cloud.eleves.ens.fr/remote.php/dav/public-calendars/' }
+          {
+            from: '/cal/klub-reseau',
+            to: 'https://nuage.beta.rz.ens.wtf/remote.php/dav/public-calendars/'
+          },
+          {
+            from: '/cal/eleves-ens',
+            to: 'https://cloud.eleves.ens.fr/remote.php/dav/public-calendars/'
+          }
         ],
         port: 5000
       }),
@@ -86,4 +108,4 @@ export default {
   watch: {
     clearScreen: false
   }
-};
+}

src/App.svelte

@@ -14,26 +14,38 @@
   import { refreshEvents, calendarTree } from './calendar';
   import { debounce } from 'lodash';
 
+  import 'bootstrap/dist/css/bootstrap.css';
+  import 'bootstrap-icons/font/bootstrap-icons.css';
+  import bootstrap5Plugin from '@fullcalendar/bootstrap5';
+
   const modal = writable(null);
   let calendar;
 
   let options = writable({
     initialView: 'timeGridWeek',
-    plugins: [timeGridPlugin, dayGridPlugin, rrulePlugin, listPlugin, adaptivePlugin],
+    plugins: [
+      timeGridPlugin,
+      dayGridPlugin,
+      rrulePlugin,
+      listPlugin,
+      adaptivePlugin,
+      bootstrap5Plugin
+    ],
     locale: frLocale,
     headerToolbar: {
       left: 'prev,next today',
       center: 'title',
       right: 'dayGridMonth,timeGridWeek,listWeek'
     },
-    height: "100%",
+    height: '100%',
     schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
     nowIndicator: true,
     now: new Date(),
     eventClick: info => {
       modal.set(bind(EventDetails, { event: info.event }));
     },
-    events: []
+    events: [],
+    themeSystem: 'bootstrap5'
   });
 
   let selectedCalendars;
@@ -53,7 +65,6 @@
     });
   }, 300);
 
-
   onMount(async () => {
     const events = await reloadEvents(selectedCalendars);
     options.update(opts => ({