Skip to content

Instantly share code, notes, and snippets.

@ptb

ptb/calendar.html

Created June 26, 2014 11:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ptb/876279eaf672c7f136f4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ptb/876279eaf672c7f136f4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
calendar.html
<!DOCTYPE html>
<html class='no-js' lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='UTF-8' />
<title></title>
<meta content='initial-scale=1, maximum-scale=1, user-scalable=0, width=device-width' name='viewport' />
<style>
#calendar table {
font-weight: 700;
font-family: "Helvetica Neue", sans-serif;
border-collapse: collapse;
-webkit-user-select: none;
-webkit-touch-callout: none;
margin-right: auto;
margin-left: auto;
width: 100%;
min-width: 320px;
max-width: 568px;
}
#calendar thead a[rel='prev'] {
content: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'><path d='m3 60l93 54v-108z'/></svg>");
}
#calendar thead a[rel='next'] {
content: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'><path d='m24 114v-108l93 54z'/></svg>");
}
#calendar thead a[rel='prev'], #calendar thead a[rel='next'] {
display: inline-block;
width: 15px;
height: 15px;
}
#calendar thead abbr {
text-shadow: 0 1px white;
font-size: 10px;
color: #545454;
border-bottom: 0 none transparent;
}
#calendar tbody {
background-color: #d5d5d9;
}
#calendar th, #calendar td {
text-align: center;
padding: 0;
width: 14.2857142857%;
}
#calendar td {
font-size: 24px;
line-height: 1.8;
border-color: #a1a4ad;
border: 1px solid rgba(117, 124, 138, 0.55);
}
#calendar td:first-child {
border-left: 0 none transparent;
}
#calendar td:last-child {
border-right: 0 none transparent;
}
#calendar time, #calendar a {
-webkit-user-drag: none;
display: block;
width: 100%;
height: 100%;
}
#calendar time {
box-shadow: inset -1px 1px rgba(255, 255, 255, 0.6);
}
#calendar time a {
text-decoration: none;
text-shadow: 0 1px white;
position: relative;
color: #293649;
}
#calendar time a[aria-disabled='true'] {
cursor: not-allowed;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.125, rgba(0, 0, 0, 0.15)), color-stop(0.125, transparent), color-stop(0.25, transparent), color-stop(0.25, rgba(0, 0, 0, 0.15)), color-stop(0.375, rgba(0, 0, 0, 0.15)), color-stop(0.375, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(0, 0, 0, 0.15)), color-stop(0.625, rgba(0, 0, 0, 0.15)), color-stop(0.625, transparent), color-stop(0.75, transparent), color-stop(0.75, rgba(0, 0, 0, 0.15)), color-stop(0.875, rgba(0, 0, 0, 0.15)), color-stop(0.875, transparent));
background-image: -webkit-linear-gradient(135deg, rgba(0, 0, 0, 0.15) 12.5%, transparent 12.5%, transparent 25%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.15) 37.5%, transparent 37.5%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 62.5%, transparent 62.5%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15) 87.5%, transparent 87.5%);
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 12.5%, transparent 12.5%, transparent 25%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.15) 37.5%, transparent 37.5%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 62.5%, transparent 62.5%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15) 87.5%, transparent 87.5%);
}
#calendar time a:not([aria-disabled='true']):hover {
background-color: #babac1;
}
#calendar time.today a {
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
color: white;
box-shadow: inset 0 0 6px black;
background-color: #8b5d5a;
}
#calendar time.today a:hover {
background-color: #6c4846;
}
#calendar time.today a span[aria-hidden='false']::before {
content: "Today: ";
}
#calendar time a[aria-selected='true'] {
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
color: white;
background-color: #b71415;
}
#calendar time a[aria-selected='true']:hover {
background-color: #890f10;
}
#calendar time:not(.today) a[aria-selected='true'] {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(2%, rgba(223, 223, 223, 0.5098039216)), color-stop(50%, rgba(163, 163, 163, 0.262745098)), color-stop(50%, rgba(0, 0, 0, 0.1137254902)));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.5), rgba(223, 223, 223, 0.5098039216) 1px, rgba(163, 163, 163, 0.262745098) 50%, rgba(0, 0, 0, 0.1137254902) 50%);
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(223, 223, 223, 0.5098039216) 1px, rgba(163, 163, 163, 0.262745098) 50%, rgba(0, 0, 0, 0.1137254902) 50%);
}
#calendar time.prev a {
opacity: 0.45;
}
#calendar [aria-hidden='false'] {
font-size: 0;
position: absolute;
width: 0;
height: 0;
overflow: hidden;
color: transparent;
}
@font-face {
font-family: "ptbkit";
src: url("/fonts/ptbkit/ptbkit.eot");
src: url("/fonts/ptbkit/ptbkit.eot?#iefix") format("embedded-opentype"), url("/fonts/ptbkit/ptbkit.woff") format("woff"), url("/fonts/ptbkit/ptbkit.ttf") format("truetype"), url("/fonts/ptbkit/ptbkit.svg#ptbkit") format("svg");
font-style: "normal";
font-weight: "400";
}
#calendar time a#dts, #calendar time a#dte {
cursor: col-resize;
}
</style>
</head>
<body>
<div id='calendar'></div>
<script type='text/javascript'>
(function() {
console.log(['a=a', '&b=a', '&b=b', '&c[]=a', '&c[]=b', '&d[a]=a', '&d[a]=x', '&e[a][]=a', '&e[a][]=b', '&f[a][b]=a', '&f[a][b]=x', '&g[a][b][]=a', '&g[a][b][]=b', '&h=%2B+%25'].join(''));
}).call(this);
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js'></script>
<script type='text/javascript'>
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
window.Calendar = (function() {
function Calendar() {
this.ev = __bind(this.ev, this);
}
Calendar.prototype.opts = {
min: 1,
max: 90,
weeks: 5
};
Calendar.prototype.sm = {};
Calendar.prototype.ac = function(a, c) {
var b, _i, _j, _len, _len1;
if (a.classList) {
for (_i = 0, _len = c.length; _i < _len; _i++) {
b = c[_i];
a.classList.add(b);
}
return a;
} else {
for (_j = 0, _len1 = c.length; _j < _len1; _j++) {
b = c[_j];
a.className += " " + b;
}
return a;
}
};
Calendar.prototype.ap = function(a, c) {
var b, _i, _len;
for (_i = 0, _len = c.length; _i < _len; _i++) {
b = c[_i];
a.appendChild(b);
}
return a;
};
Calendar.prototype.ce = function(a) {
return document.createElement(a);
};
Calendar.prototype.du = function(a) {
return decodeURIComponent(a.replace(/\+/g, ' '));
};
Calendar.prototype.ga = function(a, b) {
return a.getAttribute(b);
};
Calendar.prototype.ge = function(a) {
return document.getElementById(a);
};
Calendar.prototype.ih = function(a, b) {
a.innerHTML = b;
return a;
};
Calendar.prototype.ls = function() {
var a, b, c, d;
a = {};
b = window.location.search.substring(1);
c = function(a) {
return a && decodeURIComponent(a.replace(/\+/g, ' '));
};
d = function(f, g, h) {
var i, j, k, l;
i = g.indexOf('[');
if (i !== -1) {
j = g.slice(0, i);
k = g.slice(1 + i).slice(0, g.slice(1 + i).indexOf(']'));
l = g.slice(1 + i).slice(1 + g.slice(1 + i).indexOf(']'));
if (k) {
if (typeof f[j] !== 'object') {
f[j] = {};
}
f[j][k] = l ? d(f[j], k + l, h) : h;
} else {
if (typeof f[j] !== 'object') {
f[j] = [];
}
f[j].push(h);
}
return f[j];
} else {
if (f.hasOwnProperty(g)) {
if (typeof f[g] === 'object') {
f[g].push(h);
} else {
f[g] = [].concat.apply([f[g]], [h]);
}
} else {
f[g] = h;
}
return f[g];
}
};
b.split('&').forEach(function(m) {
var n, o, _ref;
_ref = [c(m.split('=')[0]), c(m.split('=')[1])], n = _ref[0], o = _ref[1];
return d(a, n, o);
});
return a;
};
Calendar.prototype.pa = function(a, b) {
while (a.parentNode) {
a = a.parentNode;
if (a.tagName === b.toUpperCase()) {
return a;
}
}
return null;
};
Calendar.prototype.qa = function(a, b) {
return a.querySelectorAll(b);
};
Calendar.prototype.qs = function(a, b) {
return a.querySelector(b);
};
Calendar.prototype.ra = function(a, c) {
var b, _i, _len;
for (_i = 0, _len = c.length; _i < _len; _i++) {
b = c[_i];
a.removeAttribute(b);
}
return a;
};
Calendar.prototype.sa = function(a, c) {
var b;
for (b in c) {
a.setAttribute(b, c[b]);
}
return a;
};
Calendar.prototype.cc = function() {
var ab, da, dd, dl, dn, ds, dt, dy, i, j, ne, pr, ta, tb, tc, th, ti, tn, tp, tt, tw, tx, wd, _i, _len;
ta = this.ce('table');
this.sa(ta, {
'aria-labelledby': 'month',
"class": 'vevent',
itemscope: 'itemscope',
itemtype: 'http://schema.org/Event',
role: 'presentation'
});
th = this.ce('thead');
tc = this.ce('tr');
tp = this.ce('th');
pr = this.ce('a');
this.sa(pr, {
rel: 'prev',
role: 'button',
title: 'Previous Month'
});
this.ap(tp, [pr]);
tt = this.ce('th');
this.sa(tt, {
colspan: 5
});
ti = this.ce('time');
this.sa(ti, {
id: 'month'
});
this.ap(tt, [ti]);
tx = this.ce('th');
ne = this.ce('a');
this.sa(ne, {
rel: 'next',
role: 'button',
title: 'Next Month'
});
this.ap(tx, [ne]);
this.ap(tc, [tp, tt, tx]);
tn = this.ce('tr');
this.sa(tn, {
'aria-hidden': 'true'
});
wd = moment.weekdays();
for (_i = 0, _len = wd.length; _i < _len; _i++) {
dn = wd[_i];
da = this.ce('th');
this.sa(da, {
scope: 'col'
});
ab = this.ce('abbr');
this.sa(ab, {
title: dn
});
this.ih(ab, dn.slice(0, 3));
this.ap(da, [ab]);
this.ap(tn, [da]);
}
this.ap(th, [tc, tn]);
tb = this.ce('tbody');
i = this.opts.weeks + 1;
while (i -= 1) {
tw = this.ce('tr');
j = 7 + 1;
while (j -= 1) {
dy = this.ce('td');
dt = this.ce('time');
dl = this.ce('a');
this.sa(dl, {
'aria-selected': 'false',
role: 'button'
});
ds = this.ce('span');
this.sa(ds, {
'aria-hidden': 'false'
});
dd = this.ce('span');
this.ap(dl, [ds, dd]);
this.ap(dt, [dl]);
this.ap(dy, [dt]);
this.ap(tw, [dy]);
}
this.ap(tb, [tw]);
}
this.ap(ta, [th, tb]);
return ta;
};
Calendar.prototype.sb = function(a, b) {
return this.sa(a, {
href: "?during=" + (b.format('YYYY-MM'))
});
};
Calendar.prototype.st = function(a, b) {
this.sa(a, {
datetime: b.format('YYYY-MM')
});
return this.ih(a, b.format('MMMM YYYY'));
};
Calendar.prototype.pc = function(a, b) {
var i, ne, nm, pm, pr, sm, td, ti, tm;
td = moment().startOf('day');
tm = moment().startOf('month');
pm = moment(b).startOf('month').add(-1, 'month');
sm = moment(b).startOf('month');
nm = moment(b).startOf('month').add(1, 'month');
pr = this.qs(a, '[rel=prev]');
this.sb(pr, pm);
this.sa(pr, {
'aria-disabled': pm < tm ? 'true' : 'false'
});
ti = this.qs(a, '#month');
this.st(ti, sm);
ne = this.qs(a, '[rel=next]');
this.sb(ne, nm);
i = moment(b).startOf('week').subtract(1, 'week');
return [].forEach.call(this.qa(a, 'tbody time'), (function(_this) {
return function(dt) {
var cl, dd, dl, ds, im;
_this.sa(dt, {
datetime: i.format('YYYY-MM-DD')
});
im = i.clone().startOf('month');
cl = [];
if (im.unix() === pm.unix()) {
cl.push('prev');
}
if (i.unix() === td.unix()) {
cl.push('today');
}
if (im.unix() === nm.unix()) {
cl.push('next');
}
_this.ac(dt, cl);
dl = _this.qs(dt, 'a');
if (i < td) {
_this.sa(dl, {
'aria-disabled': true
});
_this.ra(dl, ['href']);
} else {
_this.sa(dl, {
'aria-disabled': false,
href: "?starting=" + (i.format('YYYY-MM-DD'))
});
}
ds = _this.qs(dl, 'span[aria-hidden=false]');
_this.ih(ds, i.format('dddd, MMMM '));
dd = _this.qs(dl, 'span + span');
_this.ih(dd, i.format('D'));
return i = i.add(1, 'day');
};
})(this));
};
Calendar.prototype.gd = function(a) {
var b, c, d;
b = this.pa(a, 'time');
if (b) {
c = this.qs(b, 'a[aria-disabled=false]');
}
if (c) {
d = moment(this.ga(b, 'datetime'));
}
if (d && d.isValid()) {
return d;
} else {
return null;
}
};
Calendar.prototype.rr = function() {
var z;
z = this.qa(this.sm.ca, 'time a[aria-disabled=false]');
return [].forEach.call(z, (function(_this) {
return function(el) {
var a;
a = _this.gd(el);
if (_this.sm.dts <= a && _this.sm.dte >= a) {
_this.sa(el, {
'aria-selected': 'true'
});
} else {
_this.sa(el, {
'aria-selected': 'false'
});
}
if (_this.sm.dts.isSame(a)) {
return _this.sa(el, {
id: 'dts'
});
} else if (_this.sm.dte.isSame(a)) {
return _this.sa(el, {
id: 'dte'
});
} else {
return _this.ra(el, ['id']);
}
};
})(this));
};
Calendar.prototype.vr = function(a, b, e) {
var eh, s, sh;
if (a && b && a.isValid() && b.isValid()) {
this.sm.dts = moment.min(a, b);
this.sm.dte = moment.max(a, b);
this.rr();
s = this.ge('start');
this.sa(s, {
value: this.sm.dts.format('ddd, MMMM Do')
});
e = this.ge('end');
this.sa(e, {
value: this.sm.dte.format('ddd, MMMM Do')
});
sh = this.ge('dtstart');
this.sa(sh, {
value: this.sm.dts.format('YYYY-MM-DD')
});
eh = this.ge('dtend');
return this.sa(eh, {
value: this.sm.dte.format('YYYY-MM-DD')
});
}
};
Calendar.prototype.ev = function(e) {
var a, b;
e.preventDefault();
e.stopPropagation();
switch (e.type) {
case 'click':
case 'mousedown':
case 'mouseover':
case 'mouseup':
a = e.target;
b = this.gd(a);
break;
case 'touchstart':
a = e.touches[0].target;
b = this.gd(a);
break;
case 'touchmove':
a = document.elementFromPoint(e.touches[0].pageX, e.touches[0].pageY);
b = this.gd(a);
break;
case 'touchend':
this.sm.cl = null;
}
if (!b) {
return;
}
switch (e.type) {
case 'click':
case 'touchstart':
if (this.sm.cl) {
this.vr(b, this.sm.cl, e);
this.sm.cl = null;
} else {
this.vr(b, b, e);
this.sm.cl = b;
}
return this.sm.md = null;
case 'mousedown':
if (!(this.sm.md || this.sm.cl)) {
this.vr(b, b, e);
return this.sm.md = b;
}
break;
case 'mouseover':
case 'touchmove':
if (!b.isSame(this.sm.mo)) {
if (this.sm.cl) {
this.vr(b, this.sm.cl, e);
}
if (this.sm.md) {
this.vr(b, this.sm.md, e);
}
}
return this.sm.mo = b;
case 'mouseup':
if (!b.isSame(this.sm.md)) {
this.vr(b, this.sm.md, e);
return this.sm.md = null;
}
}
};
Calendar.prototype.al = function() {
var a;
a = this.qa(this.sm.ca, 'time a[aria-disabled=false]');
return [].forEach.call(a, (function(_this) {
return function(b) {
return [].forEach.call(['mousedown', 'mouseover', 'mouseup', 'click', 'touchstart', 'touchmove', 'touchend'], function(c) {
return b.addEventListener(c, _this.ev);
});
};
})(this));
};
Calendar.prototype.init = function() {
var a, ed, eh, l, sd, sh, t;
this.sm.ca = this.ge('calendar');
t = this.cc();
this.pc(t, new Date());
sd = this.ce('input');
this.sa(sd, {
id: 'start',
type: 'text'
});
sh = this.ce('input');
this.sa(sh, {
id: 'dtstart',
type: 'hidden'
});
a = this.ce('span');
this.ih(a, '&#160;to&#160;');
ed = this.ce('input');
this.sa(ed, {
id: 'end',
type: 'text'
});
eh = this.ce('input');
this.sa(eh, {
id: 'dtend',
type: 'hidden'
});
this.ap(this.sm.ca, [t, sd, sh, a, ed, eh]);
this.al();
l = this.ls();
console.log(l);
return console.log(JSON.stringify(l));
};
return Calendar;
})();
new Calendar().init();
}).call(this);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment