Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SANDBOX</title>

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</head>
<body>

<div class="row">
    <form class="col s12">
        <div class="row">
            <div class="input-field col s3">
                <input id="last_name" type="text" class="datepicker">

                <label for="last_name">Date</label>
            </div>
            <div class="input-field col s6">
                <input placeholder="Placeholder" id="title" type="text" class="validate">
                <label for="first_name">Event Title</label>
            </div>
            <div class="input-field col s12">
                <input placeholder="Placeholder" id="body" type="text" class="validate">
                <label for="first_name">Event body</label>
            </div>

        </div>
        <a class="waves-effect waves-light btn" onclick="sustractDay()">Create Event</a>

    </form>

</div>


<a class="waves-effect waves-light btn" onclick="sustractDay()"><</a>
<a class="waves-effect waves-light btn" onclick="sumDay()">></a>
<a class="waves-effect waves-light btn" onclick="getCurrentWeek()">Today</a>

<table>
    <thead>
    <tr>
        <th id="current"></th>
        <th id="current+1"></th>
        <th id="current+2"></th>
        <th id="current+3"></th>
        <th id="current+4"></th>


    </tr>
    </thead>

    <tbody>

    </tbody>
</table>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.datepicker');
        var instances = M.Datepicker.init(elems, {autoClose:true, format:"mmmm dd, DD"});
    });

    Date.prototype.getCurrentDayMonthDateShort = function (days) {
        let date = new Date();

        if (days !== undefined) {
            date.setDate(date.getDate() + days);
            return date.toString().slice(0, 11)
        } else {
            return date.toString().slice(0, 11)
        }


    }
    let date = new Date()
    console.log(date.getCurrentDayMonthDateShort())
    let daySum = 0;
    let eventArr = [];


    document.getElementById("current").innerHTML = date.getCurrentDayMonthDateShort(daySum);
    document.getElementById("current+1").innerHTML = date.getCurrentDayMonthDateShort(1);
    document.getElementById("current+2").innerHTML = date.getCurrentDayMonthDateShort(2);
    document.getElementById("current+3").innerHTML = date.getCurrentDayMonthDateShort(3);
    document.getElementById("current+4").innerHTML = date.getCurrentDayMonthDateShort(4);


    function Event(date,title, body) {
        this.date = date;
        this.title = title;
        this.body = body;
    }

    let createEvent = () =>{


    };

    let sumDay = () => {
        daySum += 5;
        console.log(daySum)
        document.getElementById("current").innerHTML = date.getCurrentDayMonthDateShort(daySum);
        document.getElementById("current+1").innerHTML = date.getCurrentDayMonthDateShort(1 + daySum);
        document.getElementById("current+2").innerHTML = date.getCurrentDayMonthDateShort(2 + daySum);
        document.getElementById("current+3").innerHTML = date.getCurrentDayMonthDateShort(3 + daySum);
        document.getElementById("current+4").innerHTML = date.getCurrentDayMonthDateShort(4 + daySum);
    }
    let sustractDay = () => {
        daySum -= 5;
        console.log(daySum);
        document.getElementById("current").innerHTML = date.getCurrentDayMonthDateShort(daySum);
        document.getElementById("current+1").innerHTML = date.getCurrentDayMonthDateShort(1 + daySum);
        document.getElementById("current+2").innerHTML = date.getCurrentDayMonthDateShort(2 + daySum);
        document.getElementById("current+3").innerHTML = date.getCurrentDayMonthDateShort(3 + daySum);
        document.getElementById("current+4").innerHTML = date.getCurrentDayMonthDateShort(4 + daySum);
    }

    function getCurrentWeek() {
        document.getElementById("current").innerHTML = date.getCurrentDayMonthDateShort();
        document.getElementById("current+1").innerHTML = date.getCurrentDayMonthDateShort(1);
        document.getElementById("current+2").innerHTML = date.getCurrentDayMonthDateShort(2);
        document.getElementById("current+3").innerHTML = date.getCurrentDayMonthDateShort(3);
        document.getElementById("current+4").innerHTML = date.getCurrentDayMonthDateShort(4);

    }


</script>
</body>
</html>