Skip to content

Instantly share code, notes, and snippets.

@johan

johan/dec-2022.html

Last active December 19, 2022 15:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save johan/b6bea022bde5508e91bd1fef16ebd22a to your computer and use it in GitHub Desktop.
Save johan/b6bea022bde5508e91bd1fef16ebd22a to your computer and use it in GitHub Desktop.
Download ZIP
Vacation Day Planner
Raw
dec-2022.html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base href="https://www.timeanddate.com/date/workdays.html?d1=01&amp;m1=05&amp;y1=2018&amp;d2=9&amp;m2=7&amp;y2=2018&amp;">
<title>Vacation Day Planner</title>
<script>
const sumUp = (td) => { const t = td.parentNode.parentNode, r = t.rows[t.rows.length-1], c = r.cells[r.cells.length-1]; c.textContent = Array.from(t.querySelectorAll('td')).filter(c => c.classList.contains('hl')).length; c.style.color = '#000'; }
document.onclick = (e) => { if (e.target.nodeName === 'TD') { const t = e.target, cl = t.classList; cl.contains('hl-b') || cl.contains('hl') ? cl.remove('hl-b', 'hl') : cl.add('hl'); sumUp(t); } };
const pad = (n) => (n < 10 ? '0' : '') + n;
const date = (t) => t.getFullYear() + '-' + pad(t.getMonth() + 1) + '-' + pad(t.getDate());
const ONE_DAY = 864e5;
const ghostThePast = () => {
let t = new Date(Date.now() - ONE_DAY);
let n = document.getElementById(date(t));
while (n) {
n.style.opacity = 0.5;
if (n.title.match(/date is/) && !n.title.match(/the past/)) {
n.title += ' and in the past';
}
t = new Date(t - ONE_DAY);
n = document.getElementById(date(t));
}
setTimeout(ghostThePast, ONE_DAY - (Date.now() % ONE_DAY));
};
document.addEventListener('DOMContentLoaded', ghostThePast);
</script>
<meta property="og:image" content="https://c.tadst.com/gfx/1200x630/calculators.png?1"><meta property="og:type" content="website"><style>
@font-face{font-family:iconfont;src:url("/common/fonts/iconfont.woff2?v7") format("woff2"),url("/common/fonts/iconfont.woff?v7") format("woff"),url("/common/fonts/iconfont.ttf?v7") format("truetype"),url("/common/fonts/iconfont.svg?v7#iconfont") format("svg");font-weight:400;font-style:normal}
</style>
<link rel="preload" href="/common/fonts/iconfont.woff2?v7" as="font" type="font/woff2" crossorigin="">
<link rel="preconnect" href="https://c.tadst.com" crossorigin="">
<link rel="stylesheet" type="text/css" href="/common/global_81.css"><style>.r-cal{margin-bottom:15px;border:2px solid #aaa;border-width:2px 2px 1px;border-collapse:separate;*border-collapse:collapse}.r-cal thead{border-color:#aaa}.r-cal th{padding:5px;line-height:1}tr.cl-mcnt th{padding:2px;text-align:center;font-weight:400}.cl-mon th{padding:4px;font-size:18px;text-align:center}.cl-day th{font-size:11px;font-weight:400;border-width:0 1px 1px 0;text-align:center}.r-cal td{border:1px solid #eee;border-width:0 1px 1px 0;padding:5px;text-align:center;color:#ddd}td.cl-in,td.cl-out,td.hl,td.hl-b{color:#000}.cl-0{background:#ddd}.cl-out{background:#f2dede}td.cl-out,td.hl,td.hl-b{cursor:help;border:1px solid #666}form h2{margin-top:0px;}
</style></head><body class="tpl-generic"><div class="wrapper">
<p class="bigger clearfix pn"><a href="/date/workdays.html" id="datecalc_adj" class="left">◀ Make adjustment and calculate again</a><a href="/date/workdays.html" id="datecalc_rst" class="right">Start Again ▶</a></p>
<div class="row">
<div class="four columns">
<table width="100%" border="0" class="r-cal"><thead><tr class="cl-mon"><th colspan="7">December 2022</th></tr><tr class="cl-mcnt"><th colspan="7" id="2022-12-21">21 days included</th></tr><tr class="cl-day"><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr></thead><tbody><tr><td class="cl-0">&nbsp;</td><td class="cl-0">&nbsp;</td><td class="cl-0">&nbsp;</td><td class="hl-b" id="2022-12-01">1</td><td class="cl-in hl-b" id="2022-12-02">2</td><td class="cl-out" id="2022-12-03">3</td><td class="cl-out" id="2022-12-04">4</td></tr><tr><td class="cl-in hl" id="2022-12-05">5</td><td class="cl-in hl-b" id="2022-12-06">6</td><td class="cl-in hl" id="2022-12-07">7</td><td class="cl-in hl" id="2022-12-08">8</td><td class="cl-in hl" id="2022-12-09">9</td><td class="cl-out" id="2022-12-10">10</td><td class="cl-out" id="2022-12-11">11</td></tr><tr><td class="cl-in hl-b" id="2022-12-12">12</td><td class="cl-in hl-b" id="2022-12-13">13</td><td class="cl-in hl-b" id="2022-12-14">14</td><td class="cl-in hl" id="2022-12-15">15</td><td class="cl-in hl-b" id="2022-12-16">16</td><td class="cl-out" id="2022-12-17">17</td><td class="cl-out" id="2022-12-18">18</td></tr><tr><td class="cl-in hl-b" id="2022-12-19">19</td><td class="cl-in hl-b" id="2022-12-20">20</td><td class="cl-in hl" id="2022-12-21">21</td><td class="cl-in hl" id="2022-12-22">22</td><td class="cl-out" id="2022-12-23">23</td><td class="cl-out" id="2022-12-24">24</td><td class="cl-out" id="2022-12-25">25</td></tr><tr><td class="cl-in hl-b" id="2022-12-26">26</td><td class="cl-in hl-b" id="2022-12-27">27</td><td class="cl-in hl" id="2022-12-28">28</td><td class="cl-in hl" id="2022-12-29">29</td><td class="cl-out" id="2022-12-30">30</td><td class="cl-out" id="2022-12-31">31</td><td class="cl-0">&nbsp;</td></tr></tbody></table>
</div>
</div><br>
<div class="row"><div class="cl-out" style="height:20px;width:20px;display:inline-block;border:solid 1px #aaa">&nbsp;</div> = Busy holiday&nbsp;&nbsp;<div class="hl-b" style="height:20px;width:20px;display:inline-block;border:solid 1px #aaa">&nbsp;</div> = Work day&nbsp;&nbsp;<div class="hl" style="height:20px;width:20px;display:inline-block;border:solid 1px #aaa">&nbsp;</div> = Vacation day&nbsp;&nbsp;</div></div></div></div>
</div>
</body></html>
Raw
index.html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base href="https://www.timeanddate.com/date/workdays.html?d1=01&amp;m1=05&amp;y1=2018&amp;d2=9&amp;m2=7&amp;y2=2018&amp;">
<title>Vacation Day Planner</title>
<script>
const sumUp = (td) => { const t = td.parentNode.parentNode, r = t.rows[t.rows.length-1], c = r.cells[r.cells.length-1]; c.textContent = Array.from(t.querySelectorAll('td')).filter(c => c.classList.contains('hl-b') || c.classList.contains('hl')).length; c.style.color = '#000'; }
document.onclick = (e) => { if (e.target.nodeName === 'TD') { const t = e.target, cl = t.classList; cl.contains('hl-b') || cl.contains('hl') ? cl.remove('hl-b', 'hl') : cl.add('hl'); sumUp(t); } };
const pad = (n) => (n < 10 ? '0' : '') + n;
const date = (t) => t.getFullYear() + '-' + pad(t.getMonth() + 1) + '-' + pad(t.getDate());
const ONE_DAY = 864e5;
const ghostThePast = () => {
let t = new Date(Date.now() - ONE_DAY);
let n = document.getElementById(date(t));
while (n) {
n.style.opacity = 0.5;
if (n.title.match(/date is/) && !n.title.match(/the past/)) {
n.title += ' and in the past';
}
t = new Date(t - ONE_DAY);
n = document.getElementById(date(t));
}
setTimeout(ghostThePast, ONE_DAY - (Date.now() % ONE_DAY));
};
document.addEventListener('DOMContentLoaded', ghostThePast);
</script>
<meta property="og:image" content="https://c.tadst.com/gfx/1200x630/calculators.png?1"><meta property="og:type" content="website"><style>
@font-face{font-family:iconfont;src:url("/common/fonts/iconfont.woff2?v7") format("woff2"),url("/common/fonts/iconfont.woff?v7") format("woff"),url("/common/fonts/iconfont.ttf?v7") format("truetype"),url("/common/fonts/iconfont.svg?v7#iconfont") format("svg");font-weight:400;font-style:normal}
</style>
<link rel="preload" href="/common/fonts/iconfont.woff2?v7" as="font" type="font/woff2" crossorigin="">
<link rel="preconnect" href="https://c.tadst.com" crossorigin="">
<link rel="stylesheet" type="text/css" href="/common/global_81.css"><style>.r-cal{margin-bottom:15px;border:2px solid #aaa;border-width:2px 2px 1px;border-collapse:separate;*border-collapse:collapse}.r-cal thead{border-color:#aaa}.r-cal th{padding:5px;line-height:1}tr.cl-mcnt th{padding:2px;text-align:center;font-weight:400}.cl-mon th{padding:4px;font-size:18px;text-align:center}.cl-day th{font-size:11px;font-weight:400;border-width:0 1px 1px 0;text-align:center}.r-cal td{border:1px solid #eee;border-width:0 1px 1px 0;padding:5px;text-align:center;color:#ddd}td.cl-in,td.cl-out,td.hl,td.hl-b{color:#000}.cl-0{background:#ddd}.cl-out{background:#f2dede}td.cl-out,td.hl,td.hl-b{cursor:help;border:1px solid #666}form h2{margin-top:0px;}
</style></head><body class="tpl-generic"><div class="wrapper">
<div class="main-content-div"><div class="fixed"><h1>Vacation Day Planner</h1><div id="weekday_resall"><div class="bx-result"><div class="row"><div class="re-result five columns"><p>From and including: <strong>tuesday 1 may 2018</strong><br>To and including: <strong>monday 9 jul 2018</strong><br><span class="bigger">Excluding</span> Weekends and public holidays<br>in <span class="bigger">Sweden – Nationwide</span>. <a id="chco" href="/custom/site.html" title="Change country to be used for determining weekends and holidays" onclick="return datecalc_chco()">Change Country</a></p><hr class="dash"><h2>Result: 46 work days</h2></div><div class="re-details five columns offset-2"><h3>70 calendar days – 24 days skipped:</h3><h4>Excluded 10 Saturdays</h4><h4>Excluded 10 Sundays</h4><h4>Excluded 4 holidays:</h4><ul><li><a href="/holidays/sweden/may-1st">May 1st</a> (tuesday 1 may 2018)</li><li><a href="/holidays/sweden/ascension-day">Ascension Day</a> (thursday 10 may 2018)</li><li><a href="/holidays/sweden/national-day">National day</a> (wednesday 6 june 2018)</li><li><a href="/holidays/sweden/midsummer-eve">Midsummer Eve</a> (friday 22 june 2018)</li></ul></div></div></div><p class="bigger clearfix pn"><a href="/date/workdays.html" id="datecalc_adj" class="left">◀ Make adjustment and calculate again</a><a href="/date/workdays.html" id="datecalc_rst" class="right">Start Again ▶</a></p>
<div class="row">
<div class="four columns"><table width="100%" border="0" class="r-cal"><thead><tr class="cl-mon"><th colspan="7">may 2018</th></tr>
<tr class="cl-mcnt"><th colspan="7">21 days included</th></tr>
<tr class="cl-day"><th>mon</th><th>tue</th><th>wed</th><th>thu</th><th>fri</th><th>sat</th><th>sun</th></tr>
</thead><tbody><tr><td class="cl-0">&nbsp;</td><td title="This date is excluded" class="cl-out" id="2018-05-01">1</td><td title="This date is included" class="cl-in" id="2018-05-02">2</td><td title="This date is included" class="cl-in" id="2018-05-03">3</td><td title="This date is included" class="cl-in" id="2018-05-04">4</td><td title="This date is excluded" class="cl-out" id="2018-05-05">5</td><td title="This date is excluded" class="cl-out" id="2018-05-06">6</td></tr>
<tr><td title="This date is included" class="cl-in" id="2018-05-07">7</td><td title="This date is included" class="cl-in" id="2018-05-08">8</td><td title="This date is included" class="cl-in" id="2018-05-09">9</td><td title="This date is excluded" class="cl-out" id="2018-05-10">10</td><td title="This date is included" class="cl-in hl-b" id="2018-05-11">11</td><td title="This date is excluded" class="cl-out" id="2018-05-12">12</td><td title="This date is excluded" class="cl-out" id="2018-05-13">13</td></tr>
<tr><td title="This date is included" class="cl-in hl" id="2018-05-14">14</td><td title="This date is included" class="cl-in hl" id="2018-05-15">15</td><td title="This date is included" class="cl-in hl" id="2018-05-16">16</td><td title="This date is included" class="cl-in hl" id="2018-05-17">17</td><td title="This date is included" class="cl-in hl-b" id="2018-05-18">18</td><td title="This date is excluded" class="cl-out" id="2018-05-19">19</td><td title="This date is excluded" class="cl-out" id="2018-05-20">20</td></tr>
<tr><td title="This date is included" class="cl-in hl" id="2018-05-21">21</td><td title="This date is included" class="cl-in hl-b" id="2018-05-22">22</td><td title="This date is included" class="cl-in hl-b" id="2018-05-23">23</td><td title="This date is included" class="cl-in hl-b" id="2018-05-24">24</td><td title="This date is included" class="cl-in hl-b" id="2018-05-25">25</td><td title="This date is excluded" class="cl-out" id="2018-05-26">26</td><td title="This date is excluded" class="cl-out" id="2018-05-27">27</td></tr>
<tr><td title="This date is included" class="cl-in hl-b" id="2018-05-28">28</td><td title="This date is included" class="cl-in" id="2018-05-29">29</td><td title="This date is included" class="cl-in" id="2018-05-30">30</td><td title="This date is included" class="cl-in" id="2018-05-31">31</td><td class="cl-0">&nbsp;</td><td class="cl-0">&nbsp;</td><td class="_cl-0" _style="color: rgb(0, 0, 0);">12</td></tr>
</tbody></table></div>
<div class="four columns"><table width="100%" border="0" class="r-cal"><thead><tr class="cl-mon"><th colspan="7">june 2018</th></tr>
<tr class="cl-mcnt"><th colspan="7">19 days included</th></tr>
<tr class="cl-day"><th>mon</th><th>tue</th><th>wed</th><th>thu</th><th>fri</th><th>sat</th><th>sun</th></tr>
</thead><tbody><tr><td class="cl-0">&nbsp;</td><td class="cl-0">&nbsp;</td><td class="cl-0">&nbsp;</td><td class="cl-0">&nbsp;</td><td title="This date is included" class="cl-in" id="2018-06-01">1</td><td title="This date is excluded" class="cl-out" id="2018-06-02">2</td><td title="This date is excluded" class="cl-out" id="2018-06-03">3</td></tr>
<tr><td title="This date is included" class="cl-in" id="2018-06-04">4</td><td title="This date is included" class="cl-in" id="2018-06-05">5</td><td title="This date is excluded" class="_cl-out" id="2018-06-06">6</td><td title="This date is included" class="cl-in" id="2018-06-07">7</td><td title="This date is included" class="cl-in hl-b" id="2018-06-08">8</td><td title="This date is excluded" class="cl-out" id="2018-06-09">9</td><td title="This date is excluded" class="cl-out" id="2018-06-10">10</td></tr>
<tr><td title="This date is included" class="cl-in hl" id="2018-06-11">11</td><td title="This date is included" class="cl-in hl" id="2018-06-12">12</td><td title="This date is included" class="cl-in hl" id="2018-06-13">13</td><td title="This date is included" class="cl-in hl" id="2018-06-14">14</td><td title="This date is included" class="cl-in hl" id="2018-06-15">15</td><td title="This date is excluded" class="cl-out" id="2018-06-16">16</td><td title="This date is excluded" class="cl-out" id="2018-06-17">17</td></tr>
<tr><td title="This date is included" class="cl-in hl" id="2018-06-18">18</td><td title="This date is included" class="cl-in hl" id="2018-06-19">19</td><td title="This date is included" class="cl-in hl" id="2018-06-20">20</td><td title="This date is included" class="cl-in hl" id="2018-06-21">21</td><td title="This date is excluded" class="cl-out hl-b" id="2018-06-22">22</td><td title="This date is excluded" class="cl-out" id="2018-06-23">23</td><td title="This date is excluded" class="cl-out" id="2018-06-24">24</td></tr>
<tr><td title="This date is included" class="cl-in hl-b" id="2018-06-25">25</td><td title="This date is included" class="cl-in hl-b" id="2018-06-26">26</td><td title="This date is included" class="cl-in hl-b" id="2018-06-27">27</td><td title="This date is included" class="cl-in hl-b" id="2018-06-28">28</td><td title="This date is included" class="cl-in hl-b" id="2018-06-29">29</td><td title="This date is excluded" class="cl-out" id="2018-06-30">30</td><td class="_cl-0" _style="color: rgb(0, 0, 0);">18</td></tr>
</tbody></table></div>
<div class="four columns"><table width="100%" border="0" class="r-cal"><thead><tr class="cl-mon"><th colspan="7">july 2018</th></tr>
<tr class="cl-mcnt"><th colspan="7">6 days included</th></tr>
<tr class="cl-day"><th>mon</th><th>tue</th><th>wed</th><th>thu</th><th>fri</th><th>sat</th><th>sun</th></tr>
</thead><tbody><tr><td class="cl-0">&nbsp;</td><td class="cl-0">&nbsp;</td><td class="cl-0">&nbsp;</td><td class="cl-0">&nbsp;</td><td class="cl-0">&nbsp;</td><td class="cl-0">&nbsp;</td><td title="This date is excluded" class="cl-out" id="2018-07-01">1</td></tr>
<tr><td title="This date is included" class="cl-in hl" id="2018-07-02">2</td><td title="This date is included" class="cl-in hl" id="2018-07-03">3</td><td title="This date is included" class="cl-in hl" id="2018-07-04">4</td><td title="This date is included" class="cl-in hl-b" id="2018-07-05">5</td><td title="This date is included" class="cl-in hl-b" id="2018-07-06">6</td><td title="This date is excluded" class="cl-out hl-b" id="2018-07-07">7</td><td title="This date is excluded" class="cl-out hl" id="2018-07-08">8</td></tr>
<tr><td title="This is the last date that was included" class="hl-b" id="2018-07-09">9</td><td id="2018-07-10">10</td><td id="2018-07-11">11</td><td id="2018-07-12">12</td><td id="2018-07-13">13</td><td id="2018-07-14">14</td><td id="2018-07-15">15</td></tr>
<tr><td id="2018-07-16">16</td><td id="2018-07-17">17</td><td id="2018-07-18">18</td><td id="2018-07-19">19</td><td id="2018-07-20">20</td><td id="2018-07-21">21</td><td id="2018-07-22">22</td></tr>
<tr><td id="2018-07-23">23</td><td id="2018-07-24">24</td><td id="2018-07-25">25</td><td id="2018-07-26">26</td><td id="2018-07-27">27</td><td id="2018-07-28">28</td><td id="2018-07-29">29</td></tr>
<tr><td id="2018-07-30">30</td><td id="2018-07-31">31</td><td class="cl-0">&nbsp;</td><td class="cl-0">&nbsp;</td><td class="cl-0">&nbsp;</td><td class="cl-0">&nbsp;</td><td class="cl-0" style="color: rgb(0, 0, 0);">7</td></tr>
</tbody></table></div>
</div><br>
<div class="row"><div class="cl-out" style="height:20px;width:20px;display:inline-block;border:solid 1px #aaa">&nbsp;</div> = Busy holiday&nbsp;&nbsp;<div class="hl-b" style="height:20px;width:20px;display:inline-block;border:solid 1px #aaa">&nbsp;</div> = Busy vacation&nbsp;&nbsp;<div class="hl" style="height:20px;width:20px;display:inline-block;border:solid 1px #aaa">&nbsp;</div> = Free vacation&nbsp;&nbsp;</div></div></div></div>
</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment