Google Calendar Embed

by joshuatz

HTML

<input type="email" placeholder="[email protected]" id="email"/>
<button onclick="showCal()">Load</button>

<h3>Your calendar:</h3>
<div id="calendarEmbedWrapper">
    <iframe id="calendarEmbed"></iframe>
    <div id="calendarEmbedBlocker">
        <p>Please enter email and click load</p>
    </div>
</div>

CSS

#calendarEmbedWrapper {
    width: 80%;
    min-height: 300px;
    margin-left: 10%;
    position: relative;
}
#calendarEmbed,#calendarEmbedBlocker {
    width: 100%;
    height: 100%;
    position: absolute;
}
#calendarEmbedBlocker {
    background-color: #e15151;
}
#calendarEmbedBlocker p {
    width: 50%;
    margin-left: 25%;
    margin-top: 19%;
    text-align: center;
    font-size: x-large;
}

JavaScript

function showCal(){
    var iframe = document.getElementById('calendarEmbed');
    var email = document.getElementById('email').value;
    var blocker = document.getElementById('calendarEmbedBlocker');
    if (email && /.+\@.+/.test(email)){
        iframe.src = 'https://calendar.google.com/calendar/embed?src=' + encodeURI(email);
        blocker.style.display = 'none';
    }
    else {
        alert("That doesn't look like a valid email...");
        blocker.style.display = 'block';
    }
}