diff --git a/skolehjem/app/Console/Kernel.php b/skolehjem/app/Console/Kernel.php
index 69914e9..b8bb32c 100644
--- a/skolehjem/app/Console/Kernel.php
+++ b/skolehjem/app/Console/Kernel.php
@@ -2,6 +2,7 @@
 
 namespace App\Console;
 
+use App\Console\Commands\GenerateRoutesForJavascript;
 use Illuminate\Console\Scheduling\Schedule;
 use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
 
@@ -13,7 +14,7 @@ class Kernel extends ConsoleKernel
      * @var array
      */
     protected $commands = [
-        //
+
     ];
 
     /**
diff --git a/skolehjem/app/Http/Controllers/WashingReservationController.php b/skolehjem/app/Http/Controllers/WashingReservationController.php
index 8557c4f..29f5881 100644
--- a/skolehjem/app/Http/Controllers/WashingReservationController.php
+++ b/skolehjem/app/Http/Controllers/WashingReservationController.php
@@ -153,5 +153,16 @@ class WashingReservationController extends Controller
 
         return redirect()->route("washing-reservations.index", [ "reservations" => $reservations]);
     }
+
+    public function api(Request $request){
+        if($request->ajax()){
+            $date = $request->date;
+
+            $machines = WashingMachine::all();
+
+            $output = json_encode(['date' => $date, 'washingmachines' => $machines]);
+            return Response($output);
+        }
+    }
 }
 
diff --git a/skolehjem/resources/js/app.js b/skolehjem/resources/js/app.js
index 4dd2dd9..76dab0a 100644
--- a/skolehjem/resources/js/app.js
+++ b/skolehjem/resources/js/app.js
@@ -1,8 +1,3 @@
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
 //Bootstrap
 require('./bootstrap');
 
@@ -17,58 +12,6 @@ require('./sites/menuplan');
 //Webapp hamburger menu
 import { toggleMenu } from './navmenu/menu';
 
-// require("./calendar/calendar");
-
-// import { nextMonth, previousMonth, countDays, createCalendar, months, month, currentMonth, days, calendar } from "./calendar/calendar";
-
-// window.Vue = require('vue');
-
-import { generateCalendar } from "./calendar/calendar";
-
-// createCalendar();
-//
-// document.getElementById("month-next").onclick = nextMonth;
-// document.getElementById("month-previous").onclick = previousMonth;
-
-/**
- * The following block of code may be used to automatically register your
- * Vue components. It will recursively scan this directory for the Vue
- * components and automatically register them with their "basename".
- *
- * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
- */
-
-// const files = require.context('./', true, /\.vue$/i)
-// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
-
-// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
-
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
-
-// const app = new Vue({
-//     el: '#app',
-// });
-
-let weekOffset = 0;
-
-if(document.getElementById("calendar")) {
-    generateCalendar();
-
-    document.getElementById("week-previous").onclick = function () {
-        weekOffset--;
-        generateCalendar(weekOffset);
-    }
-
-    document.getElementById("week-next").onclick = function () {
-        weekOffset++;
-        generateCalendar(weekOffset);
-    }
-}
-
 if(document.getElementById("toggle"))
     document.getElementById("toggle").onclick = function () {
         toggleMenu('menu');
diff --git a/skolehjem/resources/js/calendar/calendar.js b/skolehjem/resources/js/calendar/calendar.js
index f76dff7..767f96e 100644
--- a/skolehjem/resources/js/calendar/calendar.js
+++ b/skolehjem/resources/js/calendar/calendar.js
@@ -1,34 +1,5 @@
-// class Calendar {
-//     constructor() {
-//
-//     }
-//
-//     nextMonth() {
-//
-//     }
-//
-//     previousMonth() {
-//
-//     }
-//
-//     addEvent() {
-//
-//     }
-//
-//     removeEvent() {
-//
-//     }
-// }
-
 const moment = require("moment");
 
-// const calendar = document.getElementById("calendar");
-// const title = document.getElementById("month");
-
-
-
-// calendar.innerHTML = "";
-
 function generateCalendar(weekOffset = 0) {
     const week = (moment().week() + weekOffset);
 
@@ -107,73 +78,96 @@ function onDateSelect(date, dayHolder) {
 
     dayHolder.classList.add("selected");
 
-    if(document.getElementById("washing-machines") != undefined)
-        machinez = document.getElementById("washing-machines");
-    else {
-        let span = document.createElement("span");
-        span.classList.add("events__title");
-        span.innerText = "Maskiner";
 
-        let select = document.createElement("select");
-        select.classList.add("events__title");
-        select.id = "washing-machines";
+    axios({
+        method: 'get',
+        url: '/washing-reservationsapi',
+        data: { date: date }
+    }).then(function (response) {
+        var data = response.data();
+        console.log(data);
+    });
 
-        container.appendChild(span);
-        container.appendChild(select);
+    $.ajax({
+        type: 'get',
+        url: "/washing-reservationsapi",
+        data: {'date': date},
+        success:function (data) {
+            console.log(data);
 
-        machinez = document.getElementById("washing-machines");
-    }
-    if(document.getElementById("events") != undefined)
-        events = document.getElementById("events");
-    else {
-        let span = document.createElement("span");
-        span.classList.add("events__title");
-        span.innerText = "Tider";
+            /*if(document.getElementById("washing-machines") != undefined)
+                machinez = document.getElementById("washing-machines");
+            else {
+                let span = document.createElement("span");
+                span.classList.add("events__title");
+                span.innerText = "Maskiner";
 
-        let select = document.createElement("select");
-        select.classList.add("events__title");
-        select.id = "events";
+                let select = document.createElement("select");
+                select.classList.add("events__title");
+                select.id = "washing-machines";
 
-        container.appendChild(span);
-        container.appendChild(select);
+                container.appendChild(span);
+                container.appendChild(select);
 
-        events = document.getElementById("events");
-    }
-    if(document.getElementById("create-reservation") != undefined)
-        buttonz = document.getElementById("create-reservation");
-    else {
-        let button = document.createElement("button");
+                machinez = document.getElementById("washing-machines");
+            }
+            if(document.getElementById("events") != undefined)
+                events = document.getElementById("events");
+            else {
+                let span = document.createElement("span");
+                span.classList.add("events__title");
+                span.innerText = "Tider";
 
-        button.id = "create-reservation";
-        button.innerText = "Reserver";
+                let select = document.createElement("select");
+                select.classList.add("events__title");
+                select.id = "events";
 
-        container.appendChild(button);
+                container.appendChild(span);
+                container.appendChild(select);
 
-        buttonz = document.getElementById("events");
-    }
+                events = document.getElementById("events");
+            }
+            if(document.getElementById("create-reservation") != undefined)
+                buttonz = document.getElementById("create-reservation");
+            else {
+                let button = document.createElement("button");
 
-    const machines = [
-        "Maskine 1",
-        "Maskine 2"
-    ]
+                button.id = "create-reservation";
+                button.innerText = "Reserver";
 
-    machinez.innerHTML = "";
-    for (let i = 0; i < machines.length; i++) {
-        let option = document.createElement("option");
-        option.text = machines[i];
+                container.appendChild(button);
 
-        machinez.appendChild(option);
-    }
+                buttonz = document.getElementById("events");
+            }
+
+            const machines = [
+                "Maskine 1",
+                "Maskine 2"
+            ]
+
+            machinez.innerHTML = "";
+            for (let i = 0; i < machines.length; i++) {
+                let option = document.createElement("option");
+                option.text = machines[i];
+
+                machinez.appendChild(option);
+            }
 
 
-    events.innerHTML = "";
-    for (let hour = 8; hour <= 20; hour++) {
+            events.innerHTML = "";
+            for (let hour = 8; hour <= 20; hour++) {
 
-        let option = document.createElement("option");
-        option.text = prependZero(hour);
+                let option = document.createElement("option");
+                option.text = prependZero(hour);
 
-        events.appendChild(option);
-    }
+                events.appendChild(option);
+            }*/
+        },
+        error:function (data) {
+            console.log("FEJL");
+            console.log(data);
+        }
+    });
 }
 
 function prependZero(value) {
@@ -181,7 +175,3 @@ function prependZero(value) {
         return "0" + value;
     return value;
 }
-
-module.exports = {
-    generateCalendar
-};
diff --git a/skolehjem/resources/views/app/layout/base.blade.php b/skolehjem/resources/views/app/layout/base.blade.php
index ed3c8fa..741c04b 100644
--- a/skolehjem/resources/views/app/layout/base.blade.php
+++ b/skolehjem/resources/views/app/layout/base.blade.php
@@ -4,6 +4,7 @@
     <title>@yield("title")</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 {{--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">--}}
+{{--    <script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>--}}
     <link type="text/css" rel="stylesheet" href="{{ mix("/css/webapp.css") }}">
 </head>
 <body>
diff --git a/skolehjem/resources/views/app/washing-reservations/index.blade.php b/skolehjem/resources/views/app/washing-reservations/index.blade.php
index 46d803f..d8b22a9 100644
--- a/skolehjem/resources/views/app/washing-reservations/index.blade.php
+++ b/skolehjem/resources/views/app/washing-reservations/index.blade.php
@@ -34,3 +34,176 @@
         </div>
     </main>
 @endsection
+
+@section("scripts")
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment-with-locales.min.js" integrity="sha512-qSnlnyh7EcD3vTqRoSP4LYsy2yVuqqmnkM9tW4dWo6xvAoxuVXyM36qZK54fyCmHoY1iKi9FJAUZrlPqmGNXFw==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/locale/da.min.js" integrity="sha512-rybyYvSnwg3zAZ/vjTTMoh8tOK0Z6tC2XCzr9e27M0xr8WU40IGo6SOP7FXXCyWgMyd3wZ8ln2nY4ce1ysYUfw==" crossorigin="anonymous"></script>
+    <script>
+        function generateCalendar(weekOffset = 0) {
+            const week = (moment().week() + weekOffset);
+
+            let weekDays = Array.apply(null, Array(7)).map((value, index) => {
+                return moment(index, "e").locale("da").startOf("week").weekday(index).format("ddd");
+            });
+
+            document.getElementById("title").innerText = moment().locale("da").day(weekDays[0]).week(week).isoWeek().toString();
+
+            const calendar = document.getElementById("calendar");
+
+            let header = document.createElement("div");
+            header.classList.add("calendar-table__header", "calendar-table__row");
+
+            let calendarBody = document.createElement("div");
+            calendarBody.classList.add("calendar-table__body");
+
+            let calendarRow = document.createElement("div");
+            calendarRow.classList.add("calendar-table__row")
+            calendarRow.id = "calenderRow";
+
+            weekDays.forEach(function (weekDay) {
+                let headerDay = document.createElement("div");
+                headerDay.classList.add("calendar-table__col");
+
+                headerDay.innerText = weekDay;
+
+                header.appendChild(headerDay);
+
+                let date = moment().locale("da").day(weekDay).week(week);
+
+                let dayHolder = document.createElement("div");
+                dayHolder.classList.add("calendar-table__col");
+
+                let day = document.createElement("div");
+                day.classList.add("calendar-table__item");
+                day.innerText = date.date();
+
+                dayHolder.appendChild(day);
+
+                dayHolder.onclick = function() {
+                    onDateSelect(date, dayHolder);
+                }
+
+                calendarRow.appendChild(dayHolder);
+            });
+
+            calendarBody.appendChild(calendarRow);
+
+            calendar.innerHTML = "";
+
+            calendar.appendChild(header);
+            calendar.appendChild(calendarBody);
+        }
+
+        function onDateSelect(date, dayHolder) {
+            let events;
+            let machinez;
+            let buttonz;
+
+            let container = document.getElementById("event-container");
+
+            NodeList.prototype.forEach = Array.prototype.forEach
+            var children = document.getElementById("calenderRow").childNodes;
+
+            children.forEach(function(item){
+                item.classList.remove("selected");
+            });
+
+            dayHolder.classList.add("selected");
+
+            axios({
+                method: 'get',
+                url: '/washing-reservationsapi',
+                params: { 'date': date }
+            }).then(function (response) {
+                var data = response.data;
+                //console.log(data);
+
+                if(document.getElementById("washing-machines") != undefined)
+                    machinez = document.getElementById("washing-machines");
+                else {
+                    let span = document.createElement("span");
+                    span.classList.add("events__title");
+                    span.innerText = "Maskiner";
+
+                    let select = document.createElement("select");
+                    select.classList.add("events__title");
+                    select.id = "washing-machines";
+
+                    container.appendChild(span);
+                    container.appendChild(select);
+
+                    machinez = document.getElementById("washing-machines");
+                }
+                if(document.getElementById("events") != undefined)
+                    events = document.getElementById("events");
+                else {
+                    let span = document.createElement("span");
+                    span.classList.add("events__title");
+                    span.innerText = "Tider";
+
+                    let select = document.createElement("select");
+                    select.classList.add("events__title");
+                    select.id = "events";
+
+                    container.appendChild(span);
+                    container.appendChild(select);
+
+                    events = document.getElementById("events");
+                }
+                if(document.getElementById("create-reservation") != undefined)
+                    buttonz = document.getElementById("create-reservation");
+                else {
+                    let button = document.createElement("button");
+
+                    button.id = "create-reservation";
+                    button.innerText = "Reserver";
+
+                    container.appendChild(button);
+
+                    buttonz = document.getElementById("events");
+                }
+
+                let machines = data["washingmachines"];
+
+                machinez.innerHTML = "";
+                for (let i = 0; i < machines.length; i++) {
+                    let option = document.createElement("option");
+                    option.text = machines[i]["name"];
+
+                    machinez.appendChild(option);
+                }
+
+                events.innerHTML = "";
+                for (let hour = 8; hour <= 20; hour++) {
+
+                    let option = document.createElement("option");
+                    option.text = prependZero(hour);
+
+                    events.appendChild(option);
+                }
+            });
+        }
+
+        function prependZero(value) {
+            if(value < 10)
+                return "0" + value;
+            return value;
+        }
+
+        let weekOffset = 0;
+
+        if(document.getElementById("calendar")) {
+            generateCalendar();
+
+            document.getElementById("week-previous").onclick = function () {
+                weekOffset--;
+                generateCalendar(weekOffset);
+            }
+
+            document.getElementById("week-next").onclick = function () {
+                weekOffset++;
+                generateCalendar(weekOffset);
+            }
+        }
+    </script>
+@endsection
diff --git a/skolehjem/routes/web.php b/skolehjem/routes/web.php
index 00e6079..9c3f1be 100644
--- a/skolehjem/routes/web.php
+++ b/skolehjem/routes/web.php
@@ -35,7 +35,7 @@ Route::get("/eventsapi", "EventController@search")->name("events.search");
 Route::get("/menuplansapi", "MenuPlanController@search")->name("menu-plans.search");
 Route::get("/rolesapi", "RolesController@search")->name("roles.search");
 Route::get("/userapi", "UserController@search")->name("users.search");
-
+Route::get("/washing-reservationsapi", "WashingReservationController@api")->name("washing-reservations.api");
 
 
 
diff --git a/skolehjem/webpack.mix.js b/skolehjem/webpack.mix.js
index 1d8fe53..5216944 100644
--- a/skolehjem/webpack.mix.js
+++ b/skolehjem/webpack.mix.js
@@ -14,6 +14,7 @@ const mix = require('laravel-mix');
 //JS
 mix.js('resources/js/app.js', 'public/js');
 
+
 //SCSS
 mix.sass('resources/sass/app/app.scss', 'public/css');
 mix.sass('resources/sass/webapp/webapp.scss', 'public/css');