add global.css and some config

2 files changed, 77 insertions, 0 deletions

diff --git a/calendar/global.css b/calendar/global.css
new file mode 100644
index 0000000..2dd4b7e
--- /dev/null
+++ b/calendar/global.css
@@ -0,0 +1,74 @@
+body {
+	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+	padding: 0 40px;
+}
+@media (max-width: 575.98px) {
+	body {
+		padding: 0;
+	}
+	html {
+		font-size: 12px;
+	}
+	h4 {
+		margin-top: 0;
+	}
+}
+.row {
+	display: flex;
+}
+.col {
+	flex: 1 1 0%;
+	min-width: 0;
+	max-width: 100%;
+}
+
+.ec {
+	height: 640px;
+}
+.ec.ec-day-grid {
+	height: 400px;
+}
+@media (min-width: 576px) {
+	.ec {
+		height: 700px;
+	}
+	.ec.ec-day-grid {
+		height: 500px;
+	}
+}
+@media (min-width: 992px) {
+	.ec {
+		height: 800px;
+	}
+	.ec.ec-day-grid {
+		height: 700px;
+	}
+}
+@media (min-width: 1200px) {
+	.ec.ec-day-grid {
+		height: 800px;
+	}
+}
+
+/* Dark theme */
+body.ec-dark {
+	background: #22272e;
+	color: #adbac7;
+}
+body:not(.ec-dark) svg.dark {
+	display: none;
+}
+body.ec-dark svg.light {
+	display: none;
+}
+.toggle-dark-button {
+	color: inherit;
+	border: 0;
+	background: 0 0;
+	opacity: .8;
+	cursor: pointer;
+}
+.toggle-dark-button svg {
+	width: 1.25rem;
+	height: 1.25rem;
+}
diff --git a/calendar/index.html b/calendar/index.html
index 801e31b..d81a8d7 100644
--- a/calendar/index.html
+++ b/calendar/index.html
@@ -7,6 +7,7 @@
     <title>Event Calendar</title>
 
     <link rel="stylesheet" href="event-calendar.min.css">
+    <link rel="stylesheet" href="global.css">
     <script src="event-calendar.min.js"></script>
 
     <style>
@@ -74,6 +75,8 @@
         },
         dayMaxEvents: true,
         nowIndicator: true,
+        firstDay: 1,
+        hiddenDays: [0,6],
         selectable: true
     });