<iframe><!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" />
<title>CodePen - Event Calendar Widget</title>
<style>
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body {
overflow: hidden;
font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: 100;
color: rgba(255, 255, 255, 1);
margin: 0;
padding: 0;
background: #4A4A4A;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#calendar {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 420px;
margin: 0 auto;
height: 570px;
overflow: hidden;
}
.header {
height: 50px;
width: 420px;
background: rgba(66, 66, 66, 1);
text-align: center;
position:relative;
z-index: 100;
}
.header h1 {
margin: 0;
padding: 0;
font-size: 20px;
line-height: 50px;
font-weight: 100;
letter-spacing: 1px;
}
.left, .right {
position: absolute;
width: 0px;
height: 0px;
border-style: solid;
top: 50%;
margin-top: -7.5px;
cursor: pointer;
}
.left {
border-width: 7.5px 10px 7.5px 0;
border-color: transparent rgba(160, 159, 160, 1) transparent transparent;
left: 20px;
}
.right {
border-width: 7.5px 0 7.5px 10px;
border-color: transparent transparent transparent rgba(160, 159, 160, 1);
right: 20px;
}
.month {
/*overflow: hidden;*/
opacity: 0;
}
.month.new {
-webkit-animation: fadeIn 1s ease-out;
opacity: 1;
}
.month.in.next {
-webkit-animation: moveFromTopFadeMonth .4s ease-out;
-moz-animation: moveFromTopFadeMonth .4s ease-out;
animation: moveFromTopFadeMonth .4s ease-out;
opacity: 1;
}
.month.out.next {
-webkit-animation: moveToTopFadeMonth .4s ease-in;
-moz-animation: moveToTopFadeMonth .4s ease-in;
animation: moveToTopFadeMonth .4s ease-in;
opacity: 1;
}
.month.in.prev {
-webkit-animation: moveFromBottomFadeMonth .4s ease-out;
-moz-animation: moveFromBottomFadeMonth .4s ease-out;
animation: moveFromBottomFadeMonth .4s ease-out;
opacity: 1;
}
.month.out.prev {
-webkit-animation: moveToBottomFadeMonth .4s ease-in;
-moz-animation: moveToBottomFadeMonth .4s ease-in;
animation: moveToBottomFadeMonth .4s ease-in;
opacity: 1;
}
.week {
background: #4A4A4A;
}
.day {
display: inline-block;
width: 60px;
padding: 10px;
text-align: center;
vertical-align: top;
cursor: pointer;
background: #4A4A4A;
position: relative;
z-index: 100;
}
.day.other {
color: rgba(255, 255, 255, .3);
}
.day.today {
color: rgba(156, 202, 235, 1);
}
.day-name {
font-size: 9px;
text-transform: uppercase;
margin-bottom: 5px;
color: rgba(255, 255, 255, .5);
letter-spacing: .7px;
}
.day-number {
font-size: 24px;
letter-spacing: 1.5px;
}
.day .day-events {
list-style: none;
margin-top: 3px;
text-align: center;
height: 12px;
line-height: 6px;
overflow: hidden;
}
.day .day-events span {
vertical-align: top;
display: inline-block;
padding: 0;
margin: 0;
width: 5px;
height: 5px;
line-height: 5px;
margin: 0 1px;
}
.blue { background: rgba(156, 202, 235, 1); }
.orange { background: rgba(247, 167, 0, 1); }
.green { background: rgba(153, 198, 109, 1); }
.yellow { background: rgba(249, 233, 0, 1); }
.details {
position: relative;
width: 420px;
height: 75px;
background: rgba(164, 164, 164, 1);
margin-top: 5px;
border-radius: 4px;
}
.details.in {
-webkit-animation: moveFromTopFade .5s ease both;
-moz-animation: moveFromTopFade .5s ease both;
animation: moveFromTopFade .5s ease both;
}
.details.out {
-webkit-animation: moveToTopFade .5s ease both;
-moz-animation: moveToTopFade .5s ease both;
animation: moveToTopFade .5s ease both;
}
.arrow {
position: absolute;
top: -5px;
left: 50%;
margin-left: -2px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent rgba(164, 164, 164, 1) transparent;
transition: all 0.7s ease;
}
.events {
height: 75px;
padding: 7px 0;
overflow-y: auto;
overflow-x: hidden;
}
.events.in {
-webkit-animation: fadeIn .3s ease both;
-moz-animation: fadeIn .3s ease both;
animation: fadeIn .3s ease both;
}
.events.in {
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
animation-delay: .3s;
}
.details.out .events {
-webkit-animation: fadeOutShrink .4s ease both;
-moz-animation: fadeOutShink .4s ease both;
animation: fadeOutShink .4s ease both;
}
.events.out {
-webkit-animation: fadeOut .3s ease both;
-moz-animation: fadeOut .3s ease both;
animation: fadeOut .3s ease both;
}
.event {
font-size: 16px;
line-height: 22px;
letter-spacing: .5px;
padding: 2px 16px;
vertical-align: top;
}
.event.empty {
color: #eee;
}
.event-category {
height: 10px;
width: 10px;
display: inline-block;
margin: 6px 0 0;
vertical-align: top;
}
.event span {
display: inline-block;
padding: 0 0 0 7px;
}
.legend {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: rgba(60, 60, 60, 1);
line-height: 30px;
}
.entry {
position: relative;
padding: 0 0 0 25px;
font-size: 13px;
display: inline-block;
line-height: 30px;
background: transparent;
}
.entry:after {
position: absolute;
content: '';
height: 5px;
width: 5px;
top: 12px;
left: 14px;
}
.entry.blue:after { background: rgba(156, 202, 235, 1); }
.entry.orange:after { background: rgba(247, 167, 0, 1); }
.entry.green:after { background: rgba(153, 198, 109, 1); }
.entry.yellow:after { background: rgba(249, 233, 0, 1); }
/* Animations are cool! */
@-webkit-keyframes moveFromTopFade {
from { opacity: .3; height:0px; margin-top:0px; -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveFromTopFade {
from { height:0px; margin-top:0px; -moz-transform: translateY(-100%); }
}
@keyframes moveFromTopFade {
from { height:0px; margin-top:0px; transform: translateY(-100%); }
}
@-webkit-keyframes moveToTopFade {
to { opacity: .3; height:0px; margin-top:0px; opacity: 0.3; -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveToTopFade {
to { height:0px; -moz-transform: translateY(-100%); }
}
@keyframes moveToTopFade {
to { height:0px; transform: translateY(-100%); }
}
@-webkit-keyframes moveToTopFadeMonth {
to { opacity: 0; -webkit-transform: translateY(-30%) scale(.95); }
}
@-moz-keyframes moveToTopFadeMonth {
to { opacity: 0; -moz-transform: translateY(-30%); }
}
@keyframes moveToTopFadeMonth {
to { opacity: 0; -moz-transform: translateY(-30%); }
}
@-webkit-keyframes moveFromTopFadeMonth {
from { opacity: 0; -webkit-transform: translateY(30%) scale(.95); }
}
@-moz-keyframes moveFromTopFadeMonth {
from { opacity: 0; -moz-transform: translateY(30%); }
}
@keyframes moveFromTopFadeMonth {
from { opacity: 0; -moz-transform: translateY(30%); }
}
@-webkit-keyframes moveToBottomFadeMonth {
to { opacity: 0; -webkit-transform: translateY(30%) scale(.95); }
}
@-moz-keyframes moveToBottomFadeMonth {
to { opacity: 0; -webkit-transform: translateY(30%); }
}
@keyframes moveToBottomFadeMonth {
to { opacity: 0; -webkit-transform: translateY(30%); }
}
@-webkit-keyframes moveFromBottomFadeMonth {
from { opacity: 0; -webkit-transform: translateY(-30%) scale(.95); }
}
@-moz-keyframes moveFromBottomFadeMonth {
from { opacity: 0; -webkit-transform: translateY(-30%); }
}
@keyframes moveFromBottomFadeMonth {
from { opacity: 0; -webkit-transform: translateY(-30%); }
}
@-webkit-keyframes fadeIn {
from { opacity: 0; }
}
@-moz-keyframes fadeIn {
from { opacity: 0; }
}
@keyframes fadeIn {
from { opacity: 0; }
}
@-webkit-keyframes fadeOut {
to { opacity: 0; }
}
@-moz-keyframes fadeOut {
to { opacity: 0; }
}
@keyframes fadeOut {
to { opacity: 0; }
}
@-webkit-keyframes fadeOutShink {
to { opacity: 0; padding: 0px; height: 0px; }
}
@-moz-keyframes fadeOutShink {
to { opacity: 0; padding: 0px; height: 0px; }
}
@keyframes fadeOutShink {
to { opacity: 0; padding: 0px; height: 0px; }
}
</style>
</head>
<body translate="no">
<div id="calendar"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<script id="rendered-js" >
!function () {
var today = moment();
function Calendar(selector, events) {
this.el = document.querySelector(selector);
this.events = events;
this.current = moment().date(1);
this.draw();
var current = document.querySelector('.today');
if (current) {
var self = this;
window.setTimeout(function () {
self.openDay(current);
}, 500);
}
}
Calendar.prototype.draw = function () {
//Create Header
this.drawHeader();
//Draw Month
this.drawMonth();
this.drawLegend();
};
Calendar.prototype.drawHeader = function () {
var self = this;
if (!this.header) {
//Create the header elements
this.header = createElement('div', 'header');
this.header.className = 'header';
this.title = createElement('h1');
var right = createElement('div', 'right');
right.addEventListener('click', function () {self.nextMonth();});
var left = createElement('div', 'left');
left.addEventListener('click', function () {self.prevMonth();});
//Append the Elements
this.header.appendChild(this.title);
this.header.appendChild(right);
this.header.appendChild(left);
this.el.appendChild(this.header);
}
this.title.innerHTML = this.current.format('MMMM YYYY');
};
Calendar.prototype.drawMonth = function () {
var self = this;
this.events.forEach(function (ev) {
ev.date = self.current.clone().date(Math.random() * (29 - 1) + 1);
});
if (this.month) {
this.oldMonth = this.month;
this.oldMonth.className = 'month out ' + (self.next ? 'next' : 'prev');
this.oldMonth.addEventListener('webkitAnimationEnd', function () {
self.oldMonth.parentNode.removeChild(self.oldMonth);
self.month = createElement('div', 'month');
self.backFill();
self.currentMonth();
self.fowardFill();
self.el.appendChild(self.month);
window.setTimeout(function () {
self.month.className = 'month in ' + (self.next ? 'next' : 'prev');
}, 16);
});
} else {
this.month = createElement('div', 'month');
this.el.appendChild(this.month);
this.backFill();
this.currentMonth();
this.fowardFill();
this.month.className = 'month new';
}
};
Calendar.prototype.backFill = function () {
var clone = this.current.clone();
var dayOfWeek = clone.day();
if (!dayOfWeek) {return;}
clone.subtract('days', dayOfWeek + 1);
for (var i = dayOfWeek; i > 0; i--) {if (window.CP.shouldStopExecution(0)) break;
this.drawDay(clone.add('days', 1));
}window.CP.exitedLoop(0);
};
Calendar.prototype.fowardFill = function () {
var clone = this.current.clone().add('months', 1).subtract('days', 1);
var dayOfWeek = clone.day();
if (dayOfWeek === 6) {return;}
for (var i = dayOfWeek; i < 6; i++) {if (window.CP.shouldStopExecution(1)) break;
this.drawDay(clone.add('days', 1));
}window.CP.exitedLoop(1);
};
Calendar.prototype.currentMonth = function () {
var clone = this.current.clone();
while (clone.month() === this.current.month()) {if (window.CP.shouldStopExecution(2)) break;
this.drawDay(clone);
clone.add('days', 1);
}window.CP.exitedLoop(2);
};
Calendar.prototype.getWeek = function (day) {
if (!this.week || day.day() === 0) {
this.week = createElement('div', 'week');
this.month.appendChild(this.week);
}
};
Calendar.prototype.drawDay = function (day) {
var self = this;
this.getWeek(day);
//Outer Day
var outer = createElement('div', this.getDayClass(day));
outer.addEventListener('click', function () {
self.openDay(this);
});
//Day Name
var name = createElement('div', 'day-name', day.format('ddd'));
//Day Number
var number = createElement('div', 'day-number', day.format('DD'));
//Events
var events = createElement('div', 'day-events');
this.drawEvents(day, events);
outer.appendChild(name);
outer.appendChild(number);
outer.appendChild(events);
this.week.appendChild(outer);
};
Calendar.prototype.drawEvents = function (day, element) {
if (day.month() === this.current.month()) {
var todaysEvents = this.events.reduce(function (memo, ev) {
if (ev.date.isSame(day, 'day')) {
memo.push(ev);
}
return memo;
}, []);
todaysEvents.forEach(function (ev) {
var evSpan = createElement('span', ev.color);
element.appendChild(evSpan);
});
}
};
Calendar.prototype.getDayClass = function (day) {
classes = ['day'];
if (day.month() !== this.current.month()) {
classes.push('other');
} else if (today.isSame(day, 'day')) {
classes.push('today');
}
return classes.join(' ');
};
Calendar.prototype.openDay = function (el) {
var details, arrow;
var dayNumber = +el.querySelectorAll('.day-number')[0].innerText || +el.querySelectorAll('.day-number')[0].textContent;
var day = this.current.clone().date(dayNumber);
var currentOpened = document.querySelector('.details');
//Check to see if there is an open detais box on the current row
if (currentOpened && currentOpened.parentNode === el.parentNode) {
details = currentOpened;
arrow = document.querySelector('.arrow');
} else {
//Close the open events on differnt week row
//currentOpened && currentOpened.parentNode.removeChild(currentOpened);
if (currentOpened) {
currentOpened.addEventListener('webkitAnimationEnd', function () {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.addEventListener('oanimationend', function () {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.addEventListener('msAnimationEnd', function () {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.addEventListener('animationend', function () {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.className = 'details out';
}
//Create the Details Container
details = createElement('div', 'details in');
//Create the arrow
var arrow = createElement('div', 'arrow');
//Create the event wrapper
details.appendChild(arrow);
el.parentNode.appendChild(details);
}
var todaysEvents = this.events.reduce(function (memo, ev) {
if (ev.date.isSame(day, 'day')) {
memo.push(ev);
}
return memo;
}, []);
this.renderEvents(todaysEvents, details);
arrow.style.left = el.offsetLeft - el.parentNode.offsetLeft + 27 + 'px';
};
Calendar.prototype.renderEvents = function (events, ele) {
//Remove any events in the current details element
var currentWrapper = ele.querySelector('.events');
var wrapper = createElement('div', 'events in' + (currentWrapper ? ' new' : ''));
events.forEach(function (ev) {
var div = createElement('div', 'event');
var square = createElement('div', 'event-category ' + ev.color);
var span = createElement('span', '', ev.eventName);
div.appendChild(square);
div.appendChild(span);
wrapper.appendChild(div);
});
if (!events.length) {
var div = createElement('div', 'event empty');
var span = createElement('span', '', 'No Events');
div.appendChild(span);
wrapper.appendChild(div);
}
if (currentWrapper) {
currentWrapper.className = 'events out';
currentWrapper.addEventListener('webkitAnimationEnd', function () {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
currentWrapper.addEventListener('oanimationend', function () {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
currentWrapper.addEventListener('msAnimationEnd', function () {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
currentWrapper.addEventListener('animationend', function () {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
} else {
ele.appendChild(wrapper);
}
};
Calendar.prototype.drawLegend = function () {
var legend = createElement('div', 'legend');
var calendars = this.events.map(function (e) {
return e.calendar + '|' + e.color;
}).reduce(function (memo, e) {
if (memo.indexOf(e) === -1) {
memo.push(e);
}
return memo;
}, []).forEach(function (e) {
var parts = e.split('|');
var entry = createElement('span', 'entry ' + parts[1], parts[0]);
legend.appendChild(entry);
});
this.el.appendChild(legend);
};
Calendar.prototype.nextMonth = function () {
this.current.add('months', 1);
this.next = true;
this.draw();
};
Calendar.prototype.prevMonth = function () {
this.current.subtract('months', 1);
this.next = false;
this.draw();
};
window.Calendar = Calendar;
function createElement(tagName, className, innerText) {
var ele = document.createElement(tagName);
if (className) {
ele.className = className;
}
if (innerText) {
ele.innderText = ele.textContent = innerText;
}
return ele;
}
}();
!function () {
var data = [
{ eventName: 'Lunch Meeting w/ Mark', calendar: 'Work', color: 'orange' },
{ eventName: 'Interview - Jr. Web Developer', calendar: 'Work', color: 'orange' },
{ eventName: 'Demo New App to the Board', calendar: 'Work', color: 'orange' },
{ eventName: 'Dinner w/ Marketing', calendar: 'Work', color: 'orange' },
{ eventName: 'Game vs Portalnd', calendar: 'Sports', color: 'blue' },
{ eventName: 'Game vs Houston', calendar: 'Sports', color: 'blue' },
{ eventName: 'Game vs Denver', calendar: 'Sports', color: 'blue' },
{ eventName: 'Game vs San Degio', calendar: 'Sports', color: 'blue' },
{ eventName: 'School Play', calendar: 'Kids', color: 'yellow' },
{ eventName: 'Parent/Teacher Conference', calendar: 'Kids', color: 'yellow' },
{ eventName: 'Pick up from Soccer Practice', calendar: 'Kids', color: 'yellow' },
{ eventName: 'Ice Cream Night', calendar: 'Kids', color: 'yellow' },
{ eventName: 'Free Tamale Night', calendar: 'Other', color: 'green' },
{ eventName: 'Bowling Team', calendar: 'Other', color: 'green' },
{ eventName: 'Teach Kids to Code', calendar: 'Other', color: 'green' },
{ eventName: 'Startup Weekend', calendar: 'Other', color: 'green' }];
function addDate(ev) {
}
var calendar = new Calendar('#calendar', data);
}();
//# sourceURL=pen.js
</script>
<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js"></script>
</body>
</html></iframe>
