Events in the calendar by dates from an external file

!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--) { this.drawDay(clone.add('days', 1)); } } 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++) { this.drawDay(clone.add('days', 1)); } } Calendar.prototype.currentMonth = function() { var clone = this.current.clone(); while(clone.month() === this.current.month()) { this.drawDay(clone); clone.add('days', 1); } } 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); }(); 

 *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { overflow-x: 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; } } 

 <div id="calendar"></div> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>