Add a calendar to schedule a recipe to a chosen date (WIP)

backend/scss/calendar.scss

@@ -0,0 +1,46 @@
+.calendar {
+    .month-selector {
+        width: 100%;
+        text-align: center;
+
+        .prev {
+            float: left;
+        }
+
+        .next {
+            float: right;
+        }
+
+        .month {
+            display: none;
+        }
+
+        .month.current {
+            display: inline;
+        }
+    }
+
+    ul.weekdays {
+        margin: 0;
+        padding: 20px 0;
+
+        li {
+            display: inline-block;
+            width: 14%;
+            text-align: center;
+            margin: 0;
+        }
+    }
+
+    ul.days {
+        margin: 0;
+        padding: 20px 0;
+
+        li {
+            display: inline-block;
+            width: 14%;
+            text-align: center;
+            margin: 0;
+        }
+    }
+}

backend/scss/modal-dialog.scss

@@ -1,8 +1,8 @@
 #modal-dialog {
     // visibility: hidden;
     color: white;
-    max-width: 300px;
-    margin-left: -125px;
+    width: 500px;
+    margin-left: -250px;
     background-color: black;
     text-align: center;
     border-radius: 2px;

backend/scss/style.scss

@@ -1,5 +1,6 @@
 @use 'toast.scss';
 @use 'modal-dialog.scss';
+@use 'calendar.scss';
 
 $color-1: #B29B89;
 $color-2: #89B29B;
@@ -123,6 +124,10 @@ body {
             h1 {
                 text-align: center;
             }
+
+            #hidden-templates {
+                display: none;
+            }
         }
 
         #recipe-edit {
@@ -163,10 +168,6 @@ body {
                     background-color: red;
                 }
             }
-
-            #hidden-templates {
-                display: none;
-            }
         }
 
         form {