JSFiddle - React, Tailwind, and code Playground

HTML

<div class="calendar">
    Your calendar would be here and for every entry you can generate a div 'calendar-entry' as shown in the html
    <div class="calendar-entry">
        <button id="popupButton" class="calendar-entry-button">15.05.2015</button>
        <div class="popup">
            <h2>15.05.2015</h2>
            Activity: 
            <form action="somesite.php" method="post">
                <select id="activity">
                    <option class="placeholder" selected disabled>Select</option>
                    <option>work</option>
                    <option>youth leave</option>
                </select>
                <input type="submit" value="save">
            </form>
        </div>
    </div>
        <div class="calendar-entry">
        <button id="popupButton" class="calendar-entry-button">16.05.2015</button>
        <div class="popup">
            <h2>16.05.2015</h2>
            Activity: 
            <form action="somesite.php" method="post">
                <select id="activity">
                    <option class="placeholder" selected disabled>Select</option>
                    <option>work</option>
                    <option>youth leave</option>
                </select>
                <input type="submit" value="save">
            </form>
        </div>
    </div>
    and so on...
</div>

CSS

.calendar {
    width: 500px;
    height: 500px;
    background: green;
}
.popup {
    width: 500px;
    height: 500px;
    background: grey;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    padding: 5px;
}

JavaScript

var buttons = document.getElementsByClassName("calendar-entry-button");
for (var i = 0; i < buttons.length; i++) {
     buttons[i].onclick = function() {
         this.parentNode.getElementsByClassName("popup")[0].style.display = "block";
     }    
}