如何使用js日历点击特定日期获取活动名称..？ [英] How to get event name on click particular date using moment js calendar..?

查看：140 发布时间：2018/6/21 14:06:13 javascript html date calendar momentjs

本文介绍了如何使用js日历点击特定日期获取活动名称..？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 momentjs 将日历集成到其中一个项目中。

我想根据日期选择显示活动名称。

让我举一个例子：如果我选择日期（ 2018-04-01 ）当时我想显示自定义事件名称。

这是我的JavaScript代码，

/ *在你的代码中有这个地方* var allowedDates = ['2018-04-01'，'2018-04-02 '，'2018-04-03'，'2018-04-11'，'2018-04-12'];！ function（）{var today = moment（）;函数日历（选择器，事件）{this.el = document.querySelector（selector）; this.events = events; this.current = moment（）。date（1）; this.draw（）; var current = document.querySelector（'。today'）;如果（当前）{var self = this; window.setTimeout（function（）{self.openDay（current）;}，500）; }} Calendar.prototype.draw = function（）{//创建标题this.drawHeader（）; //绘制月份this.drawMonth（）; this.drawLegend（）; } Calendar.prototype.drawHeader = function（）{var self = this; if（！this.header）{//创建头文件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（）;}）; //追加元素this.header.appendChild（this.title）; this.header.appendChild（右）; this.header.appendChild（左）; 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'）; （）; self.backFill（）; self。（）; self.fontardFill（）; 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 ='月新'; }} Calendar.prototype.backFill = function（）{var clone = this.current.clone（）; var dayOfWeek = clone.day（）;如果（！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（）;如果（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（天）; //外层空间var outer = createElement（'div'，this.getDayClass（day））; outer.addEventListener（'click'，function（）{//只有当元素未被禁用时才打开if（！this.classList.contains（'disabled'））{self.openDay（this）;}}）; // Day Name var name = createElement（'div'，'day-name'，day.format（'ddd'））; //日编号var number = createElement（'div'，'day-number'，day.format（'DD'））; // Events var events = createElement（'div'，'day-events'）; this.drawEvents（day，events）; outer.appendChild（名称）; outer.appendChild（数）; outer.appendChild（事件）; this.week.appendChild（外）; } 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'）; } //这里，添加一个类以禁用不允许的日期，如果（allowedDates.indexOf（day.format（'YYYY-MM-DD'））< 0）{classes.push（'disabled'）; } return classes.join（''）; } Calendar.prototype.openDay = function（el）{var details，arrow; var dayNumber = + el.querySelectorAll（'。day-number'）[0] .innerText || + el.querySelectorAll（天数。）[0] .textContent; var day = this.current.clone（）。date（dayNumber）; var currentOpened = document.querySelector（'。details'）; //检查当前行是否有打开的detais框if（currentOpened&& currentOpened.parentNode === el.parentNode）{details = currentOpened; arrow = document.querySelector（'。arrow'）; } else {//关闭不同星期行上的打开事件// 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'; } //创建Details容器细节= createElement（'div'，'details in'）; //创建箭头var arrow = createElement（'div'，'arrow'）; //创建事件包装器details.appendChild（arrow）; el.parentNode.appendChild（细节）; } 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）{//删除当前细节元素中的所有事件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（跨度）; 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（图例）; } 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;函数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'，颜色：'orange'}，{eventName：'演示新的应用程序到董事会'，日历：'工作'，颜色：'orange'}，{eventName：'Dinner w / Marketing'，日历：'工作'，颜色： '橙色'}，{eventName：'游戏vs Portalnd'，日历：'体育'，颜色：'蓝色'}，{eventName：'游戏vs休斯顿'，日历：'体育'，颜色：'蓝色'}，活动名称：'比赛对丹佛'，日历：'体育'，颜色：'蓝色'}，{事件名称：'比赛对圣地牙哥'，日历：'体育'，颜色：'蓝色'}，{eventName：'School Play '，日历：'孩子'，颜色：'黄色'}，{eventName：'Par教师会议'，日历：'孩子'，颜色：'黄色'}，{eventName：'从足球练习中选择'，日历：'孩子'，颜色：'黄色'}，{eventName：'冰淇淋之夜'，日历：'孩子'，颜色：'黄色'}，{eventName：'免费Tamale之夜'，日历：'其他'，颜色：'绿色'}，{eventName：'保龄球队' ，颜色：'green'}，{eventName：'教孩子们代码'，日历：'其他'，颜色：'green'}，{eventName：'Startup Weekend'，日历：'其他'，颜色：'green' }];函数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：hidden; font-family：'HelveticaNeue-UltraLight'，'Helvetica Neue UltraLight'，'Helvetica Neue'，Arial，Helvetica，sans-serif; font-weight：100;颜色：rgba（255,255,255,1）;保证金：0;填充：0;背景：＃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;保证金：0汽车; height：570px; overflow：hidden;}。header {height：50px; width：420px;背景：rgba（66，66，66，1）; text-align：center;位置：相对; z-index：100;}。header h1 {margin：0;填充：0; font-size：20px; line-height：50px; font-weight：100; letter-spacing：1px;}。left，.right {position：absolute; width：0px; height：0px; border-style：solid;顶部：50％; margin-top：-7.5px; cursor：pointer;}。left {border-width：7.5px 10px 7.5px 0;边框颜色：透明rgba（160,159,160,1）透明透明; left：20px;}。right {border-width：7.5px 0 7.5px 10px; border-color：透明透明透明rgba（160,159,160,1）; month：/ * * overflow：hidden; * / opacity：0;}。month.new {-webkit-animation：fadeIn 1s缓解; opacity：1;}。month.in.next {-webkit-animation：moveFromTopFadeMonth .4s缓解; -moz-animation：moveFromTopFadeMonth.4s缓解;动画：moveFromTopFadeMonth.4s缓解; opacity：1;}。month.out.next {-webkit-animation：moveToTopFadeMonth .4s ease-in; -moz-animation：moveToTopFadeMonth .4s ease-in;动画：moveToTopFadeMonth .4s缓入; opacity：1;}。month.in.prev {-webkit-animation：moveFromBottomFadeMonth .4s缓解; -moz-animation：moveFromBottomFadeMonth.4s缓解;动画：moveFromBottomFadeMonth.4s缓解; opacity：1;}。month.out.prev {-webkit-animation：moveToBottomFadeMonth .4s ease-in; -moz-animation：moveToBottomFadeMonth .4s ease-in;动画：moveToBottomFadeMonth .4s缓入; opacity：1;}。week {background：＃4A4A4A;}。day {display：inline-block;宽度：60px;填充：10px; text-align：center; vertical-align：top;光标：指针;背景：＃4A4A4A;位置：相对; day.other {color：rgba（255，255，255，.3）;}。day.today {color：rgba（156，202，235，1）;}。day-name {font-size：9px;文字转换：大写; margin-bottom：5px;颜色：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;身高：12px; line-height：6px; overflow：hidden;} .day .day-events span {vertical-align：top;显示：inline-block;填充：0;保证金：0;宽度：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 {背景：rgba（249,233,0,1）; } .details {position：relative; width：420px;身高：75px;背景：rgba（164,164,164,1）; margin-top：5px; border-radius：4px;}。details.in {-webkit-animation：moveFromTopFade .5s同时缓解; -moz-animation：moveFromTopFade .5s同时缓解;动画：moveFromTopFade .5s缓解两者;}。details.out {-webkit-animation：moveToTopFade .5s缓解两者; -moz-animation：moveToTopFade .5s同时缓解;动画：moveToTopFade .5s缓解两者;}。arrow {position：absolute;顶部：-5px;剩下：50％; margin-left：-2px; width：0px; height：0px; border-style：solid; border-width：0 5px 5px 5px;边框颜色：透明透明rgba（164,164,164,1）透明;过渡：全部0.7s缓解;}。events {height：75px;填充：7px 0;溢出-y：auto; overflow-x：hidden;}。events.in {-webkit-animation：fadeIn .3s同时缓解; -moz-animation：fadeIn .3s同时缓解; animation：fadeIn .3s ease both;}。events.in {-webkit-animation-delay：.3s; -moz-animation-delay：.3s;动画延迟：.3s;}。details.out .events {-webkit-animation：fadeOutShrink .4s同时缓解; -moz-animation：fadeOutShink .4s同时缓解;动画：fadeOutShink .4s缓解两者;}。events.out {-webkit-animation：fadeout .3s缓解两者; -moz-animation：fadeout .3s缓解两者; animation：fadeout .3s ease两者;}。event {font-size：16px; line-height：22px; letter-spacing：.5px; padding：2px 16px; vertical-align：top;}。event.empty {color：#eee;}。event-category {height：10px;宽度：10px;显示：inline-block; margin：6px 0 0; vertical-align：top;}。event span {display：inline-block; padding：0 0 0 7px;}。legend {position：absolute;底部：0;宽度：100％; height：30px;背景：rgba（60，60，60，1）; line-height：30px;}。entry {position：relative;填充：0 0 0 25px; font-size：13px;显示：inline-block; line-height：30px; background：transparent;}。entry：after {position：absolute;内容：''; height：5px;宽度：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：{background：rgba（153，198，109，1）; } .entry.yellow：在{background：rgba（249，233，0，1）; } / *动画很酷！ * / @@ - webkit-keyframes moveFromTopFade {from {opacity：.3;高度：0像素;边距：0像素; -webkit-transform：translateY（-100％）; }} @ - moz-keyframes moveFromTopFade {from {height：0px;边距：0像素; -moz-transform：translateY（-100％）; }} @ keyframes moveFromTopFade {from {height：0px;边距：0像素; transform：translateY（-100％）; }} @ - webkit-keyframes moveToTopFade {{{opacity：.3;高度：0像素;边距：0像素;不透明度：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％）（.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％）（.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 {{{opacity：0; padding：0px; height：0px; }} @ - moz-keyframes fadeOutShink {{{opacity：0; padding：0px; height：0px; }} @ keyframes fadeOutShink {{{opacity：0; padding：0px; height：0px; }}。day.disabled {color：＃888; cursor：default;}

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

请你帮我解决这个问题。 >

解决方案
您好！， K系列！

由于您想在某些日期添加活动，因此您需要对之前的代码进行以下调整。

第1步

现在，在代码底部定义了一组事件。但它们没有任何日期，并且它们随机分布在日历中。

在Calendar.prototype.drawMonth

  this.events.forEach（function（ev）{
 ev.date = self.current.clone（）。date（Math.random（）*（29  -  1）+ 1）; 
}）;

由于你的事件有日期（以字符串格式），你可以用下面的代替：

  this.events.forEach（function（ev）{
 //转换日期字符串到时间日期
 ev。 date = moment（ev.date）; 
}）;

第2步

在我之前的回答中，我建议你可以在代码顶部定义 allowedDates 。删除它，因为我们现在将使用您的事件来确定这些日期。相反，我们将前往 Calendar 函数的开头，并以此方式声明：

 函数Calendar（selector，events）{
 this.el = document.querySelector（selector）; 
 this.events = events; 
 //声明允许的日期
 this.allowedDates = this.events.map（function（ev）{
 return ev.date; 
}）;

第3步

现在，您可以用文件底部的文本底部（现在用日期）替换给定的事件：

  var data = [
 {
 date：'2018-04-01'，
 eventName：'Interview  -  Jr. Web Developer'，
 calendar：'Work'，
颜色：'orange'
}，
 {
日期：'2018-04-01'，
 eventName：'Demo New App to the Board'，
日历：'工作'，
颜色：'orange'
}，
 / * ... * / 
];

第4步

在 Calendar.prototype.getDayClass 中，你有这样的代码（我在之前的回答中提到过）：

  //这里，添加一个类来禁用不允许的日期
 if（allowedDates.indexOf（day.format（'YYYY-MM-DD'））< 0）{ 
 classes.push（'disabled'）;由于 allowedDates  >

<变量现在是Calendar实例的一部分，您可以用 this.allowedDates 替换它。

 
 
  完整code   
 
 
 
 
 
 ！ function（）{var today = moment（）;函数日历（选择器，事件）{this.el = document.querySelector（selector）; this.events = events; //声明允许的日期this.allowedDates = this.events.map（function（ev）{return ev.date;}）; this.current = moment（）。date（1）; this.draw（）; var current = document.querySelector（'。today'）;如果（当前）{var self = this; window.setTimeout（function（）{self.openDay（current）;}，500）; }} Calendar.prototype.draw = function（）{//创建标题this.drawHeader（）; //绘制月份this.drawMonth（）; this.drawLegend（）; } Calendar.prototype.drawHeader = function（）{var self = this; if（！this.header）{//创建头文件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（）;}）; //追加元素this.header.appendChild（this.title）; this.header.appendChild（右）; this.header.appendChild（左）; 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 = moment（ev.date）;}）; if（this.month）{this.oldMonth = this.month; this.oldMonth.className ='month out'+（self.next？'next'：'prev'）; （）; self.backFill（）; self。 （）; self.fontardFill（）; 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 ='月新'; }} Calendar.prototype.backFill = function（）{var clone = this.current.clone（）; var dayOfWeek = clone.day（）;如果（！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（）;如果（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（天）; //外层空间var outer = createElement（'div'，this.getDayClass（day））; outer.addEventListener（'click'，function（）{//只有当元素未被禁用时才打开if（！this.classList.contains（'disabled'））{self.openDay（this）;}}）; // Day Name var name = createElement（'div'，'day-name'，day.format（'ddd'））; //日编号var number = createElement（'div'，'day-number'，day.format（'DD'））; // Events var events = createElement（'div'，'day-events'）; this.drawEvents（day，events）; outer.appendChild（名称）; outer.appendChild（数）; outer.appendChild（事件）; this.week.appendChild（外）; } 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'）;这里，添加一个类来禁用不允许的日期，如果（this.allowedDates.indexOf（day.format（'YYYY-MM-DD'））< 0）{classes.push（'disabled'）; } return classes.join（''）; } Calendar.prototype.openDay = function（el）{var details，arrow; var dayNumber = + el.querySelectorAll（'。day-number'）[0] .innerText || + el.querySelectorAll（天数。）[0] .textContent; var day = this.current.clone（）。date（dayNumber）; var currentOpened = document.querySelector（'。details'）; //检查当前行是否有打开的detais框if（currentOpened&& currentOpened.parentNode === el.parentNode）{details = currentOpened; arrow = document.querySelector（'。arrow'）; } else {//关闭不同星期行上的打开事件// 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'; } //创建Details容器细节= createElement（'div'，'details in'）; //创建箭头var arrow = createElement（'div'，'arrow'）; //创建事件包装器details.appendChild（arrow）; el.parentNode.appendChild（细节）; } 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）{//删除当前细节元素中的所有事件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（跨度）; 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（图例）; } 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;函数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 = [{date：'2018-04-01'，eventName：'Interview  -  Jr. Web Developer'，calendar：'Work'，color：'orange'}，{date：'2018-04 -01'，eventName：'Demo New App to the Board'，calendar：'Work'，color：'orange'}，{date：'2018-04-02'，eventName：'Setup continuous integration'，calendar：' Work',        color: 'orange'      },      {        date: '2018-04-03',        eventName: 'Doctor\'s appointpment',        calendar: 'Personal',        color: 'blue'      },      {        date: '2018 -04-11',        eventName: 'Deploy app',        calendar: 'Work',        color: 'orange'      }    ]; var calendar = new Calendar(’#calendar’, data);}();
*, *: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);保证金：0;填充：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;保证金：0汽车; height: 570px; overflow: hidden;}.header {  height: 50px; width：420px; background: rgba(66, 66, 66, 1); text-align：center;位置：相对; z-index: 100;}.header h1 {  margin: 0;填充：0; font-size：20px; line-height: 50px; font-weight：100; letter-spacing: 1px;}.left, .right {  position: absolute; width: 0px; height：0px; border-style：solid;顶部：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;宽度：60px;填充：10px; text-align：center; vertical-align：top;光标：指针; background: #4A4A4A;位置：相对; z-index: 100;}.day.other { color: rgba(255, 255, 255, .3);}.day.today {  color: rgba(156, 202, 235, 1);}.day-name {  font-size: 9px;文字转换：大写; 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;身高：12px; line-height: 6px; overflow: hidden;}.day .day-events span {  vertical-align: top;显示：inline-block;填充：0;保证金：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;剩下：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;溢出-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;宽度：10px;显示：inline-block; margin：6px 0 0; vertical-align: top;}.event span {  display: inline-block; padding: 0 0 0 7px;}.legend {  position: absolute;底部：0;宽度：100％; height：30px; background: rgba(60, 60, 60, 1); line-height: 30px;}.entry {  position: relative; padding: 0 0 0 25px; font-size：13px;显示：inline-block; line-height：30px; background: transparent;}.entry:after {  position: absolute;内容：''; 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;高度：0像素; 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;高度：0像素; 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; }}.day.disabled {  color: #888; cursor: default;}
<div id=\"calendar\"></div><script src=\"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js\"></script>
 
I'm integrating calendar in one of project using momentjs. 

I want to display event name based on date selection.

let me take one example: if I choose date(2018-04-01) at that time I want to display custom event name. 

  Here is my JavaScript code, 


/* Have this, somewhere in your code */

var allowedDates = [
  '2018-04-01',
  '2018-04-02',
  '2018-04-03',
  '2018-04-11',
  '2018-04-12'
];

! 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() {
      // Only open if the element is not disabled
      if (!this.classList.contains('disabled')) {
        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');
    }
    // Here, add a class to disable disallowed dates
    if (allowedDates.indexOf(day.format('YYYY-MM-DD')) < 0) {
      classes.push('disabled');
    }
    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: 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; }
}

.day.disabled {
  color: #888;
  cursor: default;
}

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





Could you please help me to solve this issue.?
 解决方案 
Hello again, @K-Series!

Since you want to add events on certain dates, you'll need to make the following adjustments to your previous code.

Step 1

Right now, there is an array of events defined at the bottom of the code. But these don't have any date, and they are distributed randomly on the calendar.

In Calendar.prototype.drawMonth, you'll find the code that does this:
this.events.forEach(function(ev) {
  ev.date = self.current.clone().date(Math.random() * (29 - 1) + 1);
});
Since your events will have dates (in String format), you can replace this with:
this.events.forEach(function(ev) {
  // Convert date Strings to Moment dates
  ev.date = moment(ev.date);
});
Step 2

In my previous answer, I suggested you could define allowedDates at the top of your code. Remove it, since we'll now use your events to determine these dates. Instead, we'll go to the start of the Calendar function, and declare it this way:
function Calendar(selector, events) {
  this.el = document.querySelector(selector);
  this.events = events;
  // Declare allowed dates
  this.allowedDates = this.events.map(function(ev) {
    return ev.date;
  });
Step 3

Now, you can replace the given events with yours, at the bottom of the file (with dates, now):
var data = [
  {
    date: '2018-04-01',
    eventName: 'Interview - Jr. Web Developer',
    calendar: 'Work',
    color: 'orange'
  },
  {
    date: '2018-04-01',
    eventName: 'Demo New App to the Board',
    calendar: 'Work',
    color: 'orange'
  },
  /* ... */
];
Step 4

In Calendar.prototype.getDayClass, you have this code (that I suggested in my previous answer):
// Here, add a class to disable disallowed dates
if (allowedDates.indexOf(day.format('YYYY-MM-DD')) < 0) {
  classes.push('disabled');
}
Since the allowedDates variable is now part of the Calendar instance, you can replace it with this.allowedDates.

Full code



! function() {

  var today = moment();

  function Calendar(selector, events) {
    this.el = document.querySelector(selector);
    this.events = events;
    // Declare allowed dates
    this.allowedDates = this.events.map(function(ev) {
      return ev.date;
    });
    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) {
      // Convert date Strings to Moment dates
      ev.date = moment(ev.date);
    });


    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() {
      // Only open if the element is not disabled
      if (!this.classList.contains('disabled')) {
        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');
    }
    // Here, add a class to disable disallowed dates
    if (this.allowedDates.indexOf(day.format('YYYY-MM-DD')) < 0) {
      classes.push('disabled');
    }
    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 = [
      {
        date: '2018-04-01',
        eventName: 'Interview - Jr. Web Developer',
        calendar: 'Work',
        color: 'orange'
      },
      {
        date: '2018-04-01',
        eventName: 'Demo New App to the Board',
        calendar: 'Work',
        color: 'orange'
      },
      {
        date: '2018-04-02',
        eventName: 'Setup continuous integration',
        calendar: 'Work',
        color: 'orange'
      },
      {
        date: '2018-04-03',
        eventName: 'Doctor\'s appointpment',
        calendar: 'Personal',
        color: 'blue'
      },
      {
        date: '2018-04-11',
        eventName: 'Deploy app',
        calendar: 'Work',
        color: 'orange'
      }
    ];

  var calendar = new Calendar('#calendar', data);

}();

*, *: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; }
}

.day.disabled {
  color: #888;
  cursor: default;
}

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





                        这篇关于如何使用js日历点击特定日期获取活动名称..？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

如何使用js日历点击特定日期获取活动名称..？ [英] How to get event name on click particular date using moment js calendar..?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何使用js日历点击特定日期获取活动名称..？ [英] How to get event name on click particular date using moment js calendar..?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭