Merge remote-tracking branch 'origin/master'

skolehjem/public/css/webapp.css

@@ -503,3 +503,303 @@ main {
   }
 }
 
+.mock-up-link {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .mock-up-link {
+    display: block;
+  }
+}
+
+.main-container-wrapper {
+  background-color: #F8FAFA;
+  min-width: 320px;
+  min-height: 568px;
+  max-width: 414px;
+  overflow-y: auto;
+}
+
+@media (min-width: 415px) {
+  .main-container-wrapper {
+    box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
+    margin: 24px auto;
+  }
+}
+
+.header__btn {
+  background-color: #00788a;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  height: 80px;
+  padding-top: 18px;
+  position: absolute;
+  top: -25px;
+  width: 80px;
+}
+
+.header__btn:hover,
+.header__btn:focus {
+  background: #005561;
+  transition: all 0.3s ease-in;
+  outline: none;
+}
+
+.header__btn .icon {
+  display: inline-block;
+}
+
+.header__btn--left {
+  left: -25px;
+  padding-left: 38px;
+  text-align: left;
+}
+
+.header__btn--right {
+  padding-right: 32px;
+  right: -25px;
+  text-align: right;
+}
+
+.calendar-container {
+  background-color: #fff;
+  padding: 16px;
+  margin-bottom: 24px;
+}
+
+.calendar-container__header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.calendar-container__btn {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font-size: 16px;
+  outline: none;
+  color: #E9E8E8;
+}
+
+.calendar-container__btn:hover,
+.calendar-container__btn:focus {
+  color: #9FAAB7;
+  transition: all 0.3s ease-in;
+}
+
+.calendar-container__title {
+  color: #222741;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.calendar-table {
+  margin-top: 12px;
+  width: 100%;
+}
+
+.calendar-table__item {
+  border: 2px solid transparent;
+  border-radius: 50%;
+  color: #424588;
+  font-size: 12px;
+  font-weight: 700;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.calendar-table__item:hover {
+  background: RGBA(0, 120, 138, 0.6);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+  transition: 0.2s all ease-in;
+}
+
+.calendar-table__item:hover > span {
+  color: white;
+}
+
+.calendar-table__row {
+  display: flex;
+  justify-content: center;
+}
+
+.calendar-table__header {
+  border-bottom: 2px solid #F2F6F8;
+  margin-bottom: 4px;
+}
+
+.calendar-table__header .calendar-table__col {
+  display: inline-block;
+  color: #99A4AE;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 12px 3px;
+  text-align: center;
+  text-transform: uppercase;
+  width: 40px;
+  height: 38px;
+}
+
+@media (min-width: 360px) {
+  .calendar-table__header .calendar-table__col {
+    width: 46px;
+  }
+}
+
+@media (min-width: 410px) {
+  .calendar-table__header .calendar-table__col {
+    width: 54px;
+  }
+}
+
+.calendar-table__body .calendar-table__col {
+  width: 40px;
+  height: 42px;
+  padding-bottom: 2px;
+}
+
+@media (min-width: 360px) {
+  .calendar-table__body .calendar-table__col {
+    width: 46px;
+    height: 48px;
+  }
+}
+
+@media (min-width: 410px) {
+  .calendar-table__body .calendar-table__col {
+    width: 54px;
+    height: 56px;
+  }
+}
+
+.calendar-table__today .calendar-table__item {
+  border-color: #FEFEFE;
+  background-color: #00788a;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+}
+
+.calendar-table__event .calendar-table__item {
+  background-color: #00788a;
+  border-color: #FEFEFE;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+  color: #fff;
+}
+
+.calendar-table__event--long {
+  overflow-x: hidden;
+}
+
+.calendar-table__event--long .calendar-table__item {
+  border-radius: 0;
+  border-width: 2px 0;
+}
+
+.calendar-table__event--start .calendar-table__item {
+  border-left: 2px solid #fff;
+  border-radius: 50% 0 0 50%;
+}
+
+.calendar-table__event--start.calendar-table__col:last-child .calendar-table__item {
+  border-width: 2px;
+}
+
+.calendar-table__event--end .calendar-table__item {
+  border-right: 2px solid #fff;
+  border-radius: 0 50% 50% 0;
+}
+
+.calendar-table__event--end.calendar-table__col:first-child .calendar-table__item {
+  border-width: 2px;
+}
+
+.calendar-table__inactive .calendar-table__item {
+  color: #DCDCE3;
+  cursor: default;
+}
+
+.calendar-table__inactive .calendar-table__item:hover {
+  background: transparent;
+  box-shadow: none;
+}
+
+.calendar-table__inactive.calendar-table__event .calendar-table__item {
+  color: #fff;
+  opacity: 0.25;
+}
+
+.calendar-table__inactive.calendar-table__event .calendar-table__item:hover {
+  background: #00788a;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+}
+
+.calendar-table__today > .calendar-table__item > span {
+  color: white;
+}
+
+.events-container {
+  padding: 0 15px;
+}
+
+.events__title {
+  color: #BEC1CA;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+
+.events__tag {
+  background: #00788a;
+  border: 2px solid #FEFEFE;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  width: 60px;
+  margin-left: 16px;
+  padding: 5px 2px;
+  text-align: center;
+}
+
+.events__tag--highlighted {
+  background: #FDCA40;
+}
+
+.events__item {
+  background: #fff;
+  border-left: 8px solid #00788a;
+  border-radius: 2px;
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
+  padding: 15px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.events__item--left {
+  width: calc(100% - 76px);
+}
+
+.events__name {
+  font-size: 12px;
+  font-weight: 700;
+  color: #222741;
+  display: block;
+  margin-bottom: 6px;
+}
+
+.events__date {
+  font-size: 12px;
+  color: #9FAAB7;
+  display: inline-block;
+}
+

skolehjem/resources/js/navmenu/menu.js

@@ -12,6 +12,8 @@ function toggleMenu() {
     var buttonElement = document.getElementById('menuIcon');
 
     var htmlElement = document.getElementsByTagName('html')[0];
+    var headerElement = document.getElementsByTagName('header')[0];
+    var bodyElement = document.getElementsByTagName('body')[0];
     var logoElement = document.getElementById('sdeLogo');
     var mainElement = document.getElementsByTagName('main')[0];
 
@@ -20,6 +22,8 @@ function toggleMenu() {
     if(buttonElement.alt === '-')
     {
         htmlElement.style.backgroundColor = 'rgb(0, 120, 138)';
+        bodyElement.style.backgroundColor = 'rgb(0, 120, 138)';
+        headerElement.style.backgroundColor = 'rgb(0, 120, 138)';
         logoElement.src = '/images/logos/Logo-hvid.svg';
         menu.classList.remove('d-none');
         mainElement.classList.add('d-none');
@@ -29,6 +33,8 @@ function toggleMenu() {
     else
     {
         htmlElement.style.backgroundColor = 'rgb(255, 255, 255)';
+        bodyElement.style.backgroundColor = 'rgb(255, 255, 255)';
+        headerElement.style.backgroundColor = 'rgb(255, 255, 255)';
         logoElement.src = '/images/logos/Logo-normal.svg';
         menu.classList.add('d-none');
         mainElement.classList.remove('d-none');

skolehjem/resources/sass/webapp/_default.scss

@@ -63,3 +63,411 @@ and (max-width : 900px)
         font-size: 4vw;
     }
 }
+
+
+//Don't mind me
+//Text
+$base__font-size: 16px;
+
+$font-family--montserrat: 'Montserrat', sans-serif;
+$font-family--primary : $font-family--montserrat;
+
+//Colors
+$white: #fff;
+$black: #222741;
+$gray: #99A4AE;
+$blue: #00788a;
+$yellow: #FDCA40;
+$green: #86D8C9;
+
+//Color Palette
+$palettes:  (
+    gray-shades: (
+        darker: #9FAAB7,
+        base: #99A4AE,
+        light: #DCDCE3,
+        lighter: #BEC1CA,
+        lightest: #F2F6F8
+    )
+);
+
+// Color usages
+$main-background-color: #F8FAFA;
+$calendar-item-border: #FEFEFE;
+$calendar-item-text: #424588;
+$calendar-button-color: #E9E8E8;
+
+//Font size variables
+$lg-font-size: 20px;
+$default-font-size: 14px;
+$sm-font-size: 12px;
+$xsm-font-size: 10px;
+
+//Font weight variables
+$font-weight--bold: 700;
+$font-weight--semi-bold: 600;
+$font-weight--regular: 400;
+
+//Color Usage
+$primary-color: $blue;
+
+@function palette($palette, $shade: base){
+    @return map-get(map-get($palettes, $palette), $shade);
+}
+// Retrieved from https://github.com/sshikhrakar/Sass-Starter/
+// BEM(Block Element Modifier) Naming Convention
+// For Element
+// $element  - Just the element name for the parent block (doesn't require the parent Block name)
+// @usage    - `.Nav {@include e(item){...}}`
+@mixin e($element){
+    &__#{$element}{
+        @content;
+    }
+}
+
+// For Modifier
+// $modifier  - Just the modifier name for the parent block or element
+// @usage     - `.Nav {@include e(item) {@include m(active) {...}}}`
+@mixin m($modifier){
+    &--#{$modifier}{
+        @content;
+    }
+}
+
+// Media Query
+@mixin mq($break){
+    @if type-of($break) == 'number' {
+        @media(min-width: $break + 'px') {
+            @content;
+        }
+    }
+    @else {
+        @error "No value could be retrieved for '#{$break}'";
+    }
+}
+
+.mock-up-link {
+    display: none;
+
+    @include mq(768) {
+        display: block;
+    }
+}
+
+.main-container-wrapper {
+    background-color: $main-background-color;
+    min-width: 320px;
+    min-height: 568px;
+    max-width: 414px;
+    overflow-y: auto;
+
+    @include mq(415) {
+        -moz-box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
+        -webkit-box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
+        box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
+        margin: 24px auto;
+    }
+}
+
+.header {
+    @include e(btn) {
+        background-color: $primary-color;
+        border: 2px solid $white;
+        border-radius: 50%;
+        -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+        -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+        height: 80px;
+        padding-top: 18px;
+        position: absolute;
+        top: -25px;
+        width: 80px;
+
+        &:hover,
+        &:focus {
+            background: darken($primary-color, 8%);
+            transition: all 0.3s ease-in;
+            outline: none;
+        }
+
+        .icon {
+            display: inline-block;
+        }
+
+        @include m(left) {
+            left: -25px;
+            padding-left: 38px;
+            text-align: left;
+        }
+
+        @include m(right) {
+            padding-right: 32px;
+            right: -25px;
+            text-align: right;
+        }
+    }
+}
+
+.calendar-container {
+    background-color: $white;
+    padding: 16px;
+    margin-bottom: 24px;
+
+    @include e(header) {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    @include e(btn) {
+        background: transparent;
+        border: 0;
+        cursor: pointer;
+        font-size: 16px;
+        outline: none;
+        color: $calendar-button-color;
+
+        &:hover,
+        &:focus {
+            color: palette(gray-shades, darker);
+            transition: all 0.3s ease-in;
+        }
+    }
+
+    @include e(title) {
+        color: $black;
+        font-size: $lg-font-size;
+        font-weight: $font-weight--bold;
+    }
+}
+
+.calendar-table {
+    margin-top: 12px;
+    width: 100%;
+
+    @include e(item) {
+        border: 2px solid transparent;
+        border-radius: 50%;
+        color: $calendar-item-text;
+        font-size: $sm-font-size;
+        font-weight: $font-weight--bold;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        &:hover {
+            background: RGBA(0, 120, 138, 0.6);
+            -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+            -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+            transition: 0.2s all ease-in;
+        }
+
+        &:hover > span {
+            color: white;
+        }
+    }
+
+    @include e(row) {
+        display: flex;
+        justify-content: center;
+    }
+
+    @include e(header) {
+        border-bottom: 2px solid palette(gray-shades, lightest);
+        margin-bottom: 4px;
+
+        .calendar-table__col {
+            display: inline-block;
+            color: $gray;
+            font-size: $sm-font-size;
+            font-weight: $font-weight--bold;
+            padding: 12px 3px;
+            text-align: center;
+            text-transform: uppercase;
+            width: 40px;
+            height: 38px;
+
+            @include mq(360) {
+                width: 46px;
+            }
+
+            @include mq(410) {
+                width: 54px;
+            }
+        }
+    }
+
+    @include e(body) {
+        .calendar-table__col {
+            width: 40px;
+            height: 42px;
+            padding-bottom: 2px;
+
+            @include mq(360) {
+                width: 46px;
+                height: 48px;
+            }
+
+            @include mq(410) {
+                width: 54px;
+                height: 56px;
+            }
+        }
+    }
+
+    @include e(today) {
+        .calendar-table__item {
+            border-color: $calendar-item-border;
+            background-color: $blue;
+            -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+            -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+        }
+    }
+
+    @include e(event)  {
+        .calendar-table__item {
+            background-color: $blue;
+            border-color: $calendar-item-border;
+            -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+            -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+            color: $white;
+        }
+
+        @include m(long) {
+            overflow-x: hidden;
+
+            .calendar-table__item {
+                border-radius: 0;
+                border-width: 2px 0;
+            }
+        }
+
+        @include m(start) {
+            .calendar-table__item {
+                border-left: 2px solid $white;
+                border-radius: 50% 0 0 50%;
+            }
+
+            &.calendar-table__col:last-child {
+                .calendar-table__item {
+                    border-width: 2px;
+                }
+            }
+        }
+
+        @include m(end) {
+            .calendar-table__item {
+                border-right: 2px solid $white;
+                border-radius: 0 50% 50% 0;
+            }
+
+            &.calendar-table__col:first-child {
+                .calendar-table__item {
+                    border-width: 2px;
+                }
+            }
+        }
+    }
+
+    @include e(inactive) {
+        .calendar-table__item {
+            color: palette(gray-shades, light);
+            cursor: default;
+
+            &:hover {
+                background: transparent;
+                box-shadow: none;
+            }
+        }
+
+        &.calendar-table__event {
+            .calendar-table__item {
+                color: $white;
+                opacity: 0.25;
+
+                &:hover {
+                    background: $blue;
+                    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+                    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+                    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+                }
+            }
+        }
+    }
+}
+
+.calendar-table__today > .calendar-table__item > span {
+    color: white;
+}
+
+.events-container {
+    padding: 0 15px;
+}
+
+.events {
+    @include e(title) {
+        color: palette(gray-shades, lighter);
+        display: inline-block;
+        font-size: $default-font-size;
+        font-weight: $font-weight--semi-bold;
+        margin-bottom: 16px;
+    }
+
+    @include e(tag) {
+        background: $blue;
+        border: 2px solid $calendar-item-border;
+        -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+        -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+        border-radius: 20px;
+        color: $white;
+        font-size: $xsm-font-size;
+        font-weight: $font-weight--semi-bold;
+        width: 60px;
+        margin-left: 16px;
+        padding: 5px 2px;
+        text-align: center;
+
+        @include m(highlighted) {
+            background: $yellow;
+        }
+    }
+
+    @include e(item) {
+        background: $white;
+        border-left: 8px solid $primary-color;
+        border-radius: 2px;
+        -moz-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
+        -webkit-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
+        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
+        padding: 15px 16px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+
+        @include m(left) {
+            width: calc(100% - 76px);
+        }
+    }
+
+    @include e(name) {
+        font-size: $sm-font-size;
+        font-weight: $font-weight--bold;
+        color: $black;
+        display: block;
+        margin-bottom: 6px;
+    }
+
+    @include e(date) {
+        font-size: $sm-font-size;
+        color: palette(gray-shades, darker);
+        display: inline-block;
+    }
+}

skolehjem/resources/views/index.blade.php

@@ -12,12 +12,15 @@
 {{--Vagttelefon--}}
 {{--@extends("webapp.vagttelefon.index")--}}
 
+{{--Booking Liste--}}
+{{----}}@extends("webapp.booking.index")
+
 {{----}}
 {{------Admin Panel
 {{----}}
 
 {{--Index--}}
-{{----}}@extends("admin.index")
+{{--@extends("admin.index")--}}
 
 {{--Create User--}}
 {{--@extends("admin.users.create")--}}

skolehjem/resources/views/webapp/booking/index.blade.php

@@ -0,0 +1,245 @@
+@extends("webapp.layout.base")
+@extends("webapp.layout.header")
+@section("title")
+    Booking Liste
+@endsection
+
+@section("content")
+    <main>
+        <h1 class="text-center sde-blue mb-0">Booking Liste</h1>
+        <div class="col w-100 mt-auto">
+            <div class="calendar-container">
+                <div class="calendar-container__header">
+                    <button class="calendar-container__btn calendar-container__btn--left" title="Previous">
+                        <i class="icon ion-ios-arrow-back"></i>
+                    </button>
+                    <h2 class="calendar-container__title">{Måned} {År}</h2>
+                    <button class="calendar-container__btn calendar-container__btn--right" title="Next">
+                        <i class="icon ion-ios-arrow-forward"></i>
+                    </button>
+                </div>
+                <div class="calendar-container__body">
+                    <div class="calendar-table">
+                        <div class="calendar-table__header">
+                            <div class="calendar-table__row">
+                                <div class="calendar-table__col">Man</div>
+                                <div class="calendar-table__col">Tir</div>
+                                <div class="calendar-table__col">Ons</div>
+                                <div class="calendar-table__col">Tor</div>
+                                <div class="calendar-table__col">Fre</div>
+                                <div class="calendar-table__col">Lør</div>
+                                <div class="calendar-table__col">Søn</div>
+                            </div>
+                        </div>
+                        <div class="calendar-table__body">
+                            <div class="calendar-table__row">
+                                <div class="calendar-table__col calendar-table__inactive">
+                                    <div class="calendar-table__item">
+                                        <span>30</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col calendar-table__today">
+                                    <div class="calendar-table__item">
+                                        <span>1</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>2</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>3</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>4</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>5</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>6</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="calendar-table__row">
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>7</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>8</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>9</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>10</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>11</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>12</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>13</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="calendar-table__row">
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>14</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>15</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>16</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>17</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>18</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>19</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>20</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="calendar-table__row">
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>21</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>22</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>23</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>24</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>25</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>26</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>27</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="calendar-table__row">
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>28</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>29</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>30</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col">
+                                    <div class="calendar-table__item">
+                                        <span>31</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col calendar-table__inactive">
+                                    <div class="calendar-table__item">
+                                        <span>1</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col calendar-table__inactive">
+                                    <div class="calendar-table__item">
+                                        <span>2</span>
+                                    </div>
+                                </div>
+                                <div class="calendar-table__col calendar-table__inactive">
+                                    <div class="calendar-table__item">
+                                        <span>3</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="events-container">
+                <span class="events__title">Tider</span>
+                <ul class="events__list">
+                    <li class="events__item">
+                        <div class="events__item--left">
+                            <span class="events__name">Vaskemaskine Tid</span>
+                            <span class="events__date">{Dato}</span>
+                        </div>
+                        <span class="events__tag">Book</span>
+                    </li>
+                    <li class="events__item">
+                        <div class="events__item--left">
+                            <span class="events__name">Vaskemaskine Tid</span>
+                            <span class="events__date">{Dato}</span>
+                        </div>
+                        <span class="events__tag">Book</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </main>
+@endsection