Last active
December 19, 2022 15:08
-
-
Save johan/b6bea022bde5508e91bd1fef16ebd22a to your computer and use it in GitHub Desktop.
Vacation Day Planner
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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')).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"> </td><td class="cl-0"> </td><td class="cl-0"> </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"> </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> = Work day <div class="hl" style="height:20px;width:20px;display:inline-block;border:solid 1px #aaa"> </div> = Vacation day </div></div></div></div> | |
| </div> | |
| </body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment