svg.svg-icon__sprite
defs
symbol#dot(viewbox='0 0 32 32')
title Dit icon.
desc For interactions.
circle(cx='16' cy='16' r='14' fill='none' stroke-width='3')
circle(cx='16' cy='16' r='4' fill='none' stroke-width='3')
symbol#arrow(viewbox='0 0 32 32')
title Arrow icon.
desc For interactions.
path(d='M12.8 3c.4 0 .8.2 1.1.5s.5.7.5 1.1c0 .5-.2.8-.5 1.1l-8.5 8.5h24.9c.4 0 .8.2 1.1.5.3.3.5.7.5 1.1s-.2.8-.5 1.1c-.3.3-.7.5-1.1.5H5.5l8.5 8.5c.3.3.5.7.5 1.1 0 .4-.2.8-.5 1.1s-.7.5-1.1.5c-.4 0-.8-.2-1.1-.5L.5 17c-.3-.3-.5-.7-.5-1.1s.2-.8.5-1.1L11.7 3.5c.3-.3.7-.5 1.1-.5z')
symbol#eye(viewbox='0 0 32 32')
title Eye icon.
desc For toggleable elements.
path(d='M16 4c1.5 0 2.9.2 4.2.7 1.4.4 2.6 1 3.6 1.7s2 1.5 2.9 2.3 1.7 1.7 2.3 2.6 1.2 1.6 1.6 2.3c.5.7.8 1.3 1 1.7l.4.7c0 .1-.1.2-.2.4s-.3.5-.6 1.1-.6 1.1-1 1.6-.8 1.2-1.4 1.9c-.6.7-1.2 1.4-1.8 2s-1.3 1.2-2.2 1.9c-.8.6-1.7 1.2-2.6 1.6s-1.9.8-3 1.1c-.9.3-2.1.4-3.2.4-1.5 0-2.9-.2-4.2-.7s-2.6-1-3.6-1.7-2-1.5-2.9-2.3-1.7-1.7-2.3-2.5-1.2-1.6-1.6-2.3-.8-1.3-1-1.7l-.4-.7c0-.1.1-.2.2-.4s.3-.5.6-1.1.6-1.1 1-1.6.8-1.2 1.4-1.9 1.2-1.4 1.8-2 1.3-1.2 2.2-1.9S8.8 6 9.7 5.5c.9-.4 1.9-.8 3-1.1S14.9 4 16 4zm0 2.7c-1 0-1.9.1-2.9.4s-1.8.6-2.5 1c-.8.4-1.5.8-2.2 1.4-.7.6-1.3 1.1-1.9 1.7S5.5 12.4 5 13s-.9 1.2-1.2 1.7c-.3.5-.6.9-.8 1.4.3.5.5.9.8 1.4s.7 1 1.2 1.6l1.5 1.8s1.1 1.1 1.9 1.7c.7.6 1.5 1.1 2.2 1.5.8.4 1.6.7 2.5 1s1.9.4 2.9.4 1.9-.1 2.9-.4c.9-.3 1.8-.6 2.5-1s1.5-.9 2.2-1.5c.7-.6 1.3-1.1 1.9-1.7l1.5-1.8 1.2-1.6c.3-.5.6-.9.8-1.4-.3-.5-.5-.9-.8-1.4-.3-.5-.7-1-1.2-1.6l-1.5-1.8c-.5-.6-1.1-1.1-1.9-1.7-.7-.6-1.5-1.1-2.2-1.5-.8-.4-1.6-.7-2.5-1S17 6.7 16 6.7zm0 4c1.5 0 2.7.5 3.8 1.6 1 1 1.6 2.3 1.6 3.8s-.5 2.7-1.6 3.8c-1 1-2.3 1.6-3.8 1.6s-2.7-.5-3.8-1.6c-1-1-1.6-2.3-1.6-3.8s.5-2.7 1.6-3.8 2.3-1.6 3.8-1.6zm0 2.6c-.7 0-1.4.3-1.9.8s-.8 1.1-.8 1.9.3 1.4.8 1.9 1.1.8 1.9.8 1.4-.3 1.9-.8.8-1.1.8-1.9-.3-1.4-.8-1.9-1.2-.8-1.9-.8z')
symbol#firefox(viewbox='0 0 32 32')
title Firefox icon.
desc Support for this browser.
path(d='M31.8 10.6l-.4 2.4s-.5-4.4-1.2-6c-1-2.5-1.4-2.5-1.4-2.5.7 1.7.5 2.6.5 2.6S28.1 3.9 25 2.9c-3.4-1.1-5.3-.8-5.5-.8h-.1.1s3.8.7 4.5 1.6c0 0-1.6 0-3.2.5-.1 0 5.9.7 7.1 6.7 0 0-.7-1.4-1.5-1.6.5 1.6.4 4.7-.1 6.2-.1.2-.1-.8-1.1-1.3.3 2.3 0 5.9-1.6 6.9-.1.1 1-3.6.2-2.2-4.4 6.8-9.6 3.1-12 1.5 1.2.3 3.5 0 4.5-.8 1.1-.8 1.7-1.3 2.3-1.2.6.1 1-.5.5-1s-1.6-1.2-3-.8c-1.1.3-2.4 1.4-4.3.3-1.5-.9-1.7-1.7-1.7-2.2 0-.2.1-.4.1-.5.2-.5.7-.6 1-.8.5.1.9.2 1.4.5v-.6c0-.1 0-.3-.1-.7 0-.3-.1-.6-.2-.9 0-.1.4-.4.8-.7.4-.3.8-.5 1.2-.8.5-.2.7-.3.7-.4l.1-.1c.2-.1.4-.4.5-.9v-.1-.2-.1c-.1-.1-.3-.2-1.1-.2h-1.4c-1 0-1.6-1-1.8-1.4.2-1.4 1-2.4 2.1-3 .2-.1-2.8 0-4.2 1.8-1.1-.4-2.2-.4-3.1-.2-.2 0-.4 0-.7-.1-.6-.5-1.5-1.6-1.6-2.8 0 0-1.9 1.4-1.6 5.4v.2c-.5.6-.7 1.2-.7 1.3-.5.9-.9 2.3-1.3 4.4 0 0 .3-.8.8-1.8-.4 1.2-.7 3-.5 5.8 0 0 0-.6.2-1.5.1 1.7.7 3.8 2.1 6.3 2.8 4.7 7 7.1 11.7 7.5.8.1 1.7.1 2.5 0h.2c1-.1 1.9-.2 2.9-.4 13.1-3.2 11.7-19.1 11.7-19.1z')
symbol#chrome(viewbox='0 0 32 32')
title Chrome icon.
desc Support for this browser.
path(d='M8.2 14.1L3.7 6.3c2.9-3.6 7.4-6 12.4-6C21.9.3 27 3.4 29.7 8.1H16.1c-3.8 0-7 2.5-7.9 6zm13.6-3.7h9.1c.7 1.8 1.1 3.7 1.1 5.8 0 8.7-7 15.7-15.7 15.8l6.5-11.2c.9-1.3 1.4-2.9 1.4-4.6 0-2.3-.9-4.3-2.4-5.8zm-11.5 5.8c0-3.2 2.6-5.8 5.8-5.8s5.8 2.6 5.8 5.8-2.6 5.8-5.8 5.8-5.8-2.7-5.8-5.8zm8 7.8l-4.5 7.9C6.1 30.7.2 24.1.2 16.2c0-2.8.7-5.5 2-7.8l6.5 11.2c1.3 2.8 4.1 4.7 7.3 4.7.8 0 1.6-.1 2.3-.3z')
symbol#safari(viewbox='0 0 32 32')
title Safari icon.
desc Support for this browser.
path(d='M16.1.3C7.3.3.2 7.4.2 16.2S7.3 32 16.1 32s15.8-7.1 15.8-15.8S24.8.3 16.1.3zM29.9 15v-.3.3zm-2.2-6.4l-.2-.3c.1.1.2.2.2.3zm-.8-1.1l-.1-.2s0 .1.1.2zm-2-2l-.2-.1c.1 0 .2.1.2.1zm-1-.8l-.3-.2c.1.1.2.2.3.2zm-6.3-2.3h-.3.3zm-2.7 0h-.3.3zM8.6 4.5l-.4.2c.1 0 .2-.1.4-.2zm-1.2.9l-.2.1c.1 0 .1-.1.2-.1zm-2 1.9l-.1.2c0-.1.1-.1.1-.2zm-.7 1l-.3.3.3-.3zm-2.4 6.3v0zm0 2.8v0zm2.1 6.3l.3.3-.3-.3zm.3.4l2.5-1.7-.3-.4-2.5 1.7C3.3 22 2.5 20 2.3 17.8l1.5-.1v-.5l-1.5.1v-.9h3v-.5h-3V15l1.5.1v-.5l-1.5-.1c.2-2.2 1-4.2 2.1-5.9l2.5 1.7.3-.4-2.5-1.6c.2-.3.3-.5.5-.7l1.1.9.3-.4-1.1-.9c.2-.2.4-.5.6-.7l2.1 2.1.4-.4-2.1-2 .6-.6.9 1.2.4-.3-.9-1.2c.2-.2.5-.4.7-.5l1.7 2.5.3-.3-1.6-2.5c1.7-1.1 3.7-1.9 5.9-2.1l.1 1.5h.5L15 2.3h.9v3h.5v-3h.9l-.1 1.5h.5l.1-1.5c2.2.2 4.2 1 5.9 2.1L21.9 7l.4.3L24 4.8c.2.2.5.3.7.5l-.9 1.1.4.3.9-1.1.6.6-.8.8-10.8 7.2L6.9 25l-.8.8-.6-.6 1.1-.9-.3-.4-1.1.9c-.2-.3-.3-.5-.5-.7zm.7.9c0-.1-.1-.1-.1-.2l.1.2zm1.8 1.8l.2.2-.2-.2zm1 .8l.3.2c-.1-.1-.2-.1-.3-.2zm6.3 2.3h.3c0 .1-.2.1-.3 0zm2.8.1h.3-.3zm6.3-2.2l.3-.2c-.1.1-.2.1-.3.2zm1.2-.8l.2-.1c-.1 0-.2 0-.2.1zm1.1-1zm.8-1l.1-.2c0 .1 0 .2-.1.2zm.3-.2l-1.1-.9-.3.4 1.1.9-.6.6-2.1-2.1-.4.4 2.1 2.1-.6.6-.9-1.2-.4.3.9 1.1c-.2.2-.5.4-.7.5L22.3 25l-.4.3 1.7 2.5c-1.7 1.1-3.7 1.9-5.9 2.1l-.1-1.5h-.5l.1 1.5h-.9v-3h-.5v3h-.9l.1-1.5h-.5l-.1 1.5c-2.2-.2-4.2-1-5.9-2.1l1.7-2.5-.4-.3-1.6 2.5c-.2-.2-.5-.3-.7-.5l.9-1.1-.4-.3-.9 1.1-.6-.6.8-.8 10.8-7.2 7.2-10.8.8-.8.6.6-1.1.9.3.4 1.1-.8c.2.2.4.5.5.7L25 9.9l.3.4 2.5-1.7c1.1 1.7 1.9 3.7 2.1 5.9l-1.5.1v.5l1.5-.1v.9h-3v.5h3v.9l-1.5-.1v.5l1.5.1c-.2 2.2-1 4.2-2.1 5.9L25.3 22l-.3.4 2.5 1.7c-.2.2-.4.4-.5.7zm2.9-7.4v.3-.3zm-2.2 6.3c-.1.1-.1.2-.2.3l.2-.3z')
symbol#edge(viewbox='0 0 32 32')
title Edge icon.
desc Support for this browser.
path(d='M1.7 13.9C2.7 6.7 7.6.1 16.5 0c5.4.1 9.8 2.5 12.4 7.2 1.3 2.4 1.7 5 1.8 7.8v3.3H11c.1 8.1 12 7.8 17.1 4.3v6.6c-3 1.8-9.8 3.4-15 1.3-4.5-1.7-7.7-6.4-7.6-10.9-.3-5.9 2.8-9.8 7.5-12-1 1.2-1.8 2.6-2.2 5H22S22.7 6 15.7 6c-6.6.2-11.3 4-14 7.9z')
symbol#explorer(viewbox='0 0 32 32')
title iExplorer icon.
desc Support for this browser.
path(d='M23.8 17.5H31c.1-.5.1-1 .1-1.5 0-2.5-.7-4.8-1.8-6.8 1.2-3.2 1.1-5.9-.4-7.5-1.5-1.5-5.6-1.3-10.2.8h-1C11.3 2.5 6 6.9 4.6 12.7c2-2.5 4.1-4.4 6.9-5.7-.3.2-1.7 1.7-2 2-7.3 7.3-9.7 16.9-7.2 19.4 1.9 1.9 5.3 1.6 9.3-.4 1.8.9 3.9 1.5 6.1 1.5 5.9 0 10.9-3.8 12.8-9.1h-7.3c-1 1.9-3 3.1-5.2 3.1s-4.2-1.3-5.2-3.1c-.4-.8-.7-1.8-.7-2.8l11.7-.1zM12 14c.2-3 2.6-5.4 5.7-5.4s5.5 2.4 5.7 5.4H12zM28.8 3.3c1 1 1 3 .1 5.3-1.5-2.3-3.7-4.1-6.3-5.1 2.8-1.2 5.1-1.4 6.2-.2zM4.2 27.9c-1.3-1.3-.9-4.1.8-7.4 1.1 3 3.1 5.4 5.7 7-2.9 1.4-5.3 1.6-6.5.4z')
main.flexy__item.flexy--items-center.flexy--justify-center.flexy--column
section.section.flexy__item.flexy--column.flexy--items-center
header.header.accessible-hide
h2 Infinite Calendar
article.section__article.flexy__item.flexy--column.flexy--items-center
header.header.accessible-hide
h3 A liquid & 'light-weight' calendar without any library.
.calendar
.calendar__month
ul#CALENDAR__CONTROLS.calendar__controls.flexy__item.flexy--between.space--small
table#CALENDAR__TABLE.calendar__table.flexy__item.flexy--column(width='100%' height='100%')
thead#CALENDAR__THEAD.calendar__thead
tbody#CALENDAR__TBODY.calendar__tbody
header.header
h1
a(href='http://tadaima.studio' title='Go to Tadaima')
svg.logo-tadaima.fill--white(xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 80 80')
title Tadaima Studio.
desc A group of digital interface crafters.
g
rect.st5(y='0', width='80', height='80')
lineargradient#SVGID_1_(gradientunits='userSpaceOnUse', x1='27.7468', y1='18.248', x2='52.244', y2='42.7452')
stop(offset='0', style='stop-color:#FF5572')
stop(offset='1', style='stop-color:#FF7555')
polyline.logo-tadaima--animated(style='fill:none;stroke:url(#SVGID_1_);stroke-width:2;stroke-miterlimit:10;', points='52,27 25,27 25,23 55,23 55,31 40,31 40,54 ')
lineargradient#SVGID_2_(gradientunits='userSpaceOnUse', x1='23.9948', y1='30.0043', x2='48.4901', y2='54.4996')
stop(offset='0', style='stop-color:#FF5572')
stop(offset='1', style='stop-color:#FF7555')
polyline.logo-tadaima--animated(style='fill:none;stroke:url(#SVGID_2_);stroke-width:2;stroke-miterlimit:10;', points='24,31 36,31 36,57 44,57 44,34 ')
svg.svg-bg(xmlns='http://www.w3.org/2000/svg')
defs
circle#a(cx='1468', cy='133', r='35')
mask#h(x='0', y='0', width='70', height='70', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#a')
circle#b(cx='236.5', cy='732.5', r='23.5')
mask#i(x='0', y='0', width='47', height='47', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#b')
circle#c(cx='1120.5', cy='945.5', r='28.5')
mask#j(x='0', y='0', width='57', height='57', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#c')
path#d(d='M1193.375 302.875l44.6 77.25h-89.2z')
mask#k(x='0', y='0', width='89.201', height='77.25', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#d')
path#e(d='M1610.8 513.3l34.14 59.128h-68.278z')
mask#l(x='0', y='0', width='68.277', height='59.13', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#e')
path#f(d='M51.045 967.864l38.314 66.362H12.73z')
mask#m(x='0', y='0', width='76.629', height='66.362', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#f')
path#g(d='M46.045 311.097l26.5 45.897H19.546z')
mask#n(x='0', y='0', width='52.997', height='45.897', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#g')
g(style='mix-blend-mode:overlay', fill='none', fill-rule='evenodd', opacity='.35', stroke='#FFF')
use.svg-bg_element(mask='url(#h)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#a')
use.svg-bg_element(mask='url(#i)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#b')
use.svg-bg_element.opacity-anim(mask='url(#j)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#c')
path.stroke-anim(d='M657.5 848.5l46 46', stroke-width='3', stroke-linecap='square')
path(d='M1360.5 1206.5l89-89M761.5 42.5l42-42', stroke-width='3', stroke-linecap='square')
use.svg-bg_element(mask='url(#k)', stroke-width='6', transform='rotate(90 1193.375 341.5)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#d')
use.svg-bg_element(mask='url(#l)', stroke-width='6', transform='rotate(45 1610.8 542.863)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#e')
use.svg-bg_element.rotate-anim(mask='url(#m)', stroke-width='6', transform='rotate(45 51.045 1001.045)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#f')
use.svg-bg_element(mask='url(#n)', stroke-width='6', transform='rotate(20 46.045 334.045)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#g')
@keyframes changeMonth {
50% {
transform: translate(0,120%);
}
}
.calendar {
width: 35em;
@media (max-width: 40em) {
width: 100%;
}
height: 26.75em;
position: relative;
&__table {
width: 100%;
height: 21.875em;
tr {
width: 100%;
}
}
&__tbody,
&__thead {
display: inline-block;
position: relative;
box-sizing: border-box;
width: 100%;
}
&__thead {
height: 3.813em;
padding: ($baseSize / 2);
z-index: 2;
background-color: $gray;
color: $white;
box-shadow: 0 .1em 1em 0 rgba($black, .25),
0 .1em .5em 1px rgba($black, .35),
0 1em 2em 1px rgba($black, .15);
.calendar__month__day {
font-size: .75em;
text-transform: uppercase;
}
}
&__tbody {
height: 19.438em;
background-color: $white;
padding: $baseSize ($baseSize / 2);
transform: translateY(0);
z-index: 1;
box-shadow: 0 .1em 1em 0 rgba($black, .25),
0 .1em .5em 1px rgba($black, .35),
0 1em 2em 1px rgba($black, .15);
&--animate
{
animation: changeMonth $slowDuration ease-in-out forwards;
}
}
&__month {
width: 100%;
box-sizing: border-box;
padding: 0 ($baseSize * 2);
overflow: hidden;
position: relative;
&:after {
content: '';
width: 100%;
height: 3em;
border-radius: 10%;
position: absolute;
z-index: 3;
bottom: -3em;
left: 0;
box-shadow: 0 -1em 1em -1em rgba($black, .6),
0 0 4em -1em rgba($black, .2);
}
&__day {
display: inline-block;
padding: ($baseSize / 2) 0;
text-align: center;
box-sizing: border-box;
flex-basis: (100% / 7);
background-image: radial-gradient($orange 50%, transparent 53%);
background-size: 0 0;
background-repeat: no-repeat;
background-position: 50% 50%;
transition: all $fastDuration $bezier;
transition-delay: $fastDuration;
time {
display: inline-block;
}
&.today {
color: $white;
background-size: 3.5em 3.5em;
@media (max-width: 40em) {
background-size: 3em 3em;
}
}
}
&__week {
flex-wrap: wrap;
}
}
&__controls {
color: $white;
&__button {
padding: ($baseSize / 2) ($baseSize / 4);
cursor: pointer;
&__year {
top: -.5em;
position: relative;
opacity: .6;
font-size: .85em;
padding-right: ($baseSize / 5);
}
}
}
}var date = new Date(),
year = date.getFullYear(),
month = date.getMonth(),
yearCounter = year,
monthCounter = month,
calendarThead = document.getElementById('CALENDAR__THEAD'),
calendarTbody = document.getElementById('CALENDAR__TBODY'),
calendarControls = document.getElementById('CALENDAR__CONTROLS'),
monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
dayNames = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
formatMonth;
var getDaysInMonth = function(month, year) {
return new Date(year, month + 1, 0).getDate();
};
function monthStartDay(thisYear, thisMonth) {
var date = new Date(thisYear, thisMonth, 1);
var startDay = date.getDay();
if (startDay == 0) {
startDay = 7;
}
return startDay;
}
function renderControls(target, year, month) {
var controlLi = document.createElement('li'),
prevBtn = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
prevIcn = document.createElementNS('http://www.w3.org/2000/svg', 'use'),
nextLi = document.createElement('li'),
nextBtn = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
nextIcn = document.createElementNS('http://www.w3.org/2000/svg', 'use'),
todayBtn = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
todayIcn = document.createElementNS('http://www.w3.org/2000/svg', 'use'),
titleLi = document.createElement('li'),
heading = document.createElement('header'),
title = document.createElement('h3');
prevIcn.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#arrow');
nextIcn.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#arrow');
todayIcn.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#dot');
titleLi.setAttribute('class', 'flexy__child');
prevBtn.setAttribute('id', 'CALENDAR__CONTROLS__PREV');
nextBtn.setAttribute('id', 'CALENDAR__CONTROLS__NEXT');
controlLi.setAttribute('class', 'flexy__item flexy--items-center');
nextLi.setAttribute('class', 'flexy__item flexy--items-center');
prevBtn.setAttribute('class', 'calendar__controls__button svg-icon fill--white');
todayBtn.setAttribute('class', 'calendar__controls__button svg-icon stroke--white');
nextBtn.setAttribute('class', 'calendar__controls__button svg-icon fill--white svg-icon--rotated-180');
prevBtn.appendChild(prevIcn);
nextBtn.appendChild(nextIcn);
todayBtn.appendChild(todayIcn);
controlLi.appendChild(prevBtn);
controlLi.appendChild(todayBtn);
controlLi.appendChild(nextBtn);
// title.innerHTML = monthNames[month];
title.innerHTML = '<span class="calendar__controls__button__year">' + year + ' .</span>' + monthNames[month];
heading.appendChild(title);
titleLi.appendChild(heading);
target.appendChild(titleLi);
target.appendChild(controlLi);
prevBtn.addEventListener('click', changeMonth);
nextBtn.addEventListener('click', changeMonth);
todayBtn.addEventListener('click', goToday);
}
function renderDayNames(namesArray) {
var namesRow = document.createElement('tr');
namesRow.setAttribute('class', 'calendar__month__week flexy__item');
for (var i = 0; i < namesArray.length; i++) {
var thDay = document.createElement('th');
thDay.setAttribute('class', 'calendar__month__day');
thDay.innerHTML = namesArray[i];
namesRow.appendChild(thDay);
}
calendarThead.appendChild(namesRow);
}
renderDayNames(dayNames);
function goToday() {
calendarTbody.setAttribute('class', 'calendar__tbody calendar__tbody--animate');
setTimeout(function(){
newMonth(year, month);
}, 450);
setTimeout(function(){
calendarTbody.setAttribute('class', 'calendar__tbody');
}, 900);
yearCounter = year;
monthCounter = month;
}
function changeMonth() {
if (this.id.split('NEXT').length > 1) {
if (monthCounter < 11) {
monthCounter++;
} else {
monthCounter = 0;
yearCounter++;
}
} else if (this.id.split('PREV').length > 1) {
if (monthCounter > 0) {
monthCounter--;
} else {
monthCounter = 11;
yearCounter--;
}
}
calendarTbody.setAttribute('class', 'calendar__tbody calendar__tbody--animate');
setTimeout(function(){
newMonth(yearCounter, monthCounter);
}, 450);
setTimeout(function(){
calendarTbody.setAttribute('class', 'calendar__tbody');
}, 900);
}
function renderMonth(thisYear, thisMonth) {
var days = getDaysInMonth(thisMonth, thisYear),
startDay = monthStartDay(thisYear, thisMonth),
monthRow = document.createElement('tr');
monthRow.setAttribute('id', 'CALENDAR__ROW');
monthRow.setAttribute('class', 'calendar__month__week flexy__item');
for (var i = 1; i < (days + startDay); i++) {
var cellDay = document.createElement('td'),
timeTag = document.createElement('time');
cellDay.setAttribute('class', 'calendar__month__day');
if (i >= startDay) {
if (thisMonth < 10) {
formatMonth = '0' + thisMonth;
}
timeTag.setAttribute('datetime', thisYear + '-' + formatMonth + '-' + (i - startDay));
cellDay.setAttribute('id', 'CALENDAR__DAY--' + (i - startDay + 1));
timeTag.innerHTML = i - startDay + 1;
cellDay.appendChild(timeTag);
} else {
cellDay.innerHTML = '-';
}
monthRow.appendChild(cellDay);
}
calendarTbody.appendChild(monthRow);
renderControls(calendarControls, thisYear, thisMonth);
var today = document.getElementById('CALENDAR__DAY--' + date.getDate());
if (thisMonth === date.getMonth() && thisYear === date.getFullYear()) {
setTimeout(function() {
today.setAttribute('class', 'calendar__month__day today');
}, 200);
}
}
function newMonth(year, month) {
var controls = document.getElementById('CALENDAR__CONTROLS'),
row = document.getElementById('CALENDAR__ROW');
while (controls.firstChild) {
controls.removeChild(controls.firstChild);
}
calendarTbody.removeChild(row);
renderMonth(year, month);
}
renderMonth(year, month);
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.