D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
johan
Full window
Github gist
Vacation Day Planner
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <base href="https://www.timeanddate.com/date/workdays.html?d1=01&m1=05&y1=2018&d2=9&m2=7&y2=2018&"> <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"> </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"> </td><td class="cl-0"> </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"> </td><td class="cl-0"> </td><td class="cl-0"> </td><td class="cl-0"> </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"> </td><td class="cl-0"> </td><td class="cl-0"> </td><td class="cl-0"> </td><td class="cl-0"> </td><td class="cl-0"> </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"> </td><td class="cl-0"> </td><td class="cl-0"> </td><td class="cl-0"> </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"> </div> = Busy holiday <div class="hl-b" style="height:20px;width:20px;display:inline-block;border:solid 1px #aaa"> </div> = Busy vacation <div class="hl" style="height:20px;width:20px;display:inline-block;border:solid 1px #aaa"> </div> = Free vacation </div></div></div></div> </div> </body></html>