How do I adjust Islamic hijri date using moment-hijri.js? I'm using this calendar and added moment-hijri.js to add Islamic hijri date.
However, I want to give the users the option to change/modify/adjust the date.
If I add the following line to drawDay
function, the webpage crashes:
day = day.add(-1, 'iDate');
! 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'));
var hnumber = createElement('div', 'day-number', day.format('iD'));
//Events
var events = createElement('div', 'day-events');
this.drawEvents(day, events);
outer.appendChild(name);
outer.appendChild(number);
outer.appendChild(hnumber);
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 {
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;
}
.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.25.3/moment.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/moment-hijri.min.js"></script>
I think you need to use 'iDays' instead of 'iDate' to add/subtract days. Which is probably why your code is crashing.
One way to resolve this issue is to clone moment object in drawDay function, add/subtract days then format in hijri. See this example below (you can change adjust variable to see changes):
! function() {
var today = moment();
// Chnage value here
let adjust = -1;
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'));
// For hijri date clone momnet object, add or subtract days then format in hijri
var hnumber = createElement('div', 'day-number', day.clone().add(adjust, 'days').format('iD'));
//Events
var events = createElement('div', 'day-events');
this.drawEvents(day, events);
outer.appendChild(name);
outer.appendChild(number);
outer.appendChild(hnumber);
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 {
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;
}
.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.25.3/moment.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/moment-hijri.min.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With