<label>Select locale:
<select id="lang">
<option value="da-DK">da-DK</option>
<option value="de-DE">de-DE</option>
<option value="en-US" selected>en-US</option>
<option value="fa-IR">fa-IR</option>
<option value="fr-FR">fr-FR</option>
<option value="he-IL">he-IL</option>
<option value="ja-JP">ja-JP</option>
<option value="zh-Hans-CN-u-nu-hanidec">zh-Hans-CN-u-nu-hanidec</option>
</select>
</label>
<jor-el id="app" data-year="true"></jor-el>
<!--
<jor-el id="app" data-year="true"><kal-el data-firstday="7">
<time datetime="2023-01">January <i>2023</i></time>
<ul><li><abbr title="Sunday">Sun</abbr></li><li><abbr title="Monday">Mon</abbr></li><li><abbr title="Tuesday">Tue</abbr></li><li><abbr title="Wednesday">Wed</abbr></li><li><abbr title="Thursday">Thu</abbr></li><li><abbr title="Friday">Fri</abbr></li><li><abbr title="Saturday">Sat</abbr></li></ul>
<ol>
<li data-day="7" data-weeknumber="52" data-weekend="">
<time datetime="2023-01-01" tabindex="0">1</time>
</li><li data-day="1">
<time datetime="2023-01-02" tabindex="0">2</time>
</li><li data-day="2">
<time datetime="2023-01-03" tabindex="0">3</time>
</li><li data-day="3">
<time datetime="2023-01-04" tabindex="0">4</time>
</li><li data-day="4">
<time datetime="2023-01-05" tabindex="0">5</time>
</li><li data-day="5" data-today="">
<time datetime="2023-01-06" tabindex="0">6</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-01-07" tabindex="0">7</time>
</li><li data-day="7" data-weeknumber="1" data-weekend="">
<time datetime="2023-01-08" tabindex="0">8</time>
</li><li data-day="1">
<time datetime="2023-01-09" tabindex="0">9</time>
</li><li data-day="2">
<time datetime="2023-01-10" tabindex="0">10</time>
</li><li data-day="3">
<time datetime="2023-01-11" tabindex="0">11</time>
</li><li data-day="4">
<time datetime="2023-01-12" tabindex="0">12</time>
</li><li data-day="5">
<time datetime="2023-01-13" tabindex="0">13</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-01-14" tabindex="0">14</time>
</li><li data-day="7" data-weeknumber="2" data-weekend="">
<time datetime="2023-01-15" tabindex="0">15</time>
</li><li data-day="1">
<time datetime="2023-01-16" tabindex="0">16</time>
</li><li data-day="2">
<time datetime="2023-01-17" tabindex="0">17</time>
</li><li data-day="3">
<time datetime="2023-01-18" tabindex="0">18</time>
</li><li data-day="4">
<time datetime="2023-01-19" tabindex="0">19</time>
</li><li data-day="5">
<time datetime="2023-01-20" tabindex="0">20</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-01-21" tabindex="0">21</time>
</li><li data-day="7" data-weeknumber="3" data-weekend="">
<time datetime="2023-01-22" tabindex="0">22</time>
</li><li data-day="1">
<time datetime="2023-01-23" tabindex="0">23</time>
</li><li data-day="2">
<time datetime="2023-01-24" tabindex="0">24</time>
</li><li data-day="3">
<time datetime="2023-01-25" tabindex="0">25</time>
</li><li data-day="4">
<time datetime="2023-01-26" tabindex="0">26</time>
</li><li data-day="5">
<time datetime="2023-01-27" tabindex="0">27</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-01-28" tabindex="0">28</time>
</li><li data-day="7" data-weeknumber="4" data-weekend="">
<time datetime="2023-01-29" tabindex="0">29</time>
</li><li data-day="1">
<time datetime="2023-01-30" tabindex="0">30</time>
</li><li data-day="2">
<time datetime="2023-01-31" tabindex="0">31</time>
</li>
</ol>
</kal-el><kal-el data-firstday="7">
<time datetime="2023-02">February <i>2023</i></time>
<ul><li><abbr title="Sunday">Sun</abbr></li><li><abbr title="Monday">Mon</abbr></li><li><abbr title="Tuesday">Tue</abbr></li><li><abbr title="Wednesday">Wed</abbr></li><li><abbr title="Thursday">Thu</abbr></li><li><abbr title="Friday">Fri</abbr></li><li><abbr title="Saturday">Sat</abbr></li></ul>
<ol>
<li data-day="3" data-weeknumber="5">
<time datetime="2023-02-01" tabindex="0">1</time>
</li><li data-day="4">
<time datetime="2023-02-02" tabindex="0">2</time>
</li><li data-day="5">
<time datetime="2023-02-03" tabindex="0">3</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-02-04" tabindex="0">4</time>
</li><li data-day="7" data-weeknumber="5" data-weekend="">
<time datetime="2023-02-05" tabindex="0">5</time>
</li><li data-day="1">
<time datetime="2023-02-06" tabindex="0">6</time>
</li><li data-day="2">
<time datetime="2023-02-07" tabindex="0">7</time>
</li><li data-day="3">
<time datetime="2023-02-08" tabindex="0">8</time>
</li><li data-day="4">
<time datetime="2023-02-09" tabindex="0">9</time>
</li><li data-day="5">
<time datetime="2023-02-10" tabindex="0">10</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-02-11" tabindex="0">11</time>
</li><li data-day="7" data-weeknumber="6" data-weekend="">
<time datetime="2023-02-12" tabindex="0">12</time>
</li><li data-day="1">
<time datetime="2023-02-13" tabindex="0">13</time>
</li><li data-day="2">
<time datetime="2023-02-14" tabindex="0">14</time>
</li><li data-day="3">
<time datetime="2023-02-15" tabindex="0">15</time>
</li><li data-day="4">
<time datetime="2023-02-16" tabindex="0">16</time>
</li><li data-day="5">
<time datetime="2023-02-17" tabindex="0">17</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-02-18" tabindex="0">18</time>
</li><li data-day="7" data-weeknumber="7" data-weekend="">
<time datetime="2023-02-19" tabindex="0">19</time>
</li><li data-day="1">
<time datetime="2023-02-20" tabindex="0">20</time>
</li><li data-day="2">
<time datetime="2023-02-21" tabindex="0">21</time>
</li><li data-day="3">
<time datetime="2023-02-22" tabindex="0">22</time>
</li><li data-day="4">
<time datetime="2023-02-23" tabindex="0">23</time>
</li><li data-day="5">
<time datetime="2023-02-24" tabindex="0">24</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-02-25" tabindex="0">25</time>
</li><li data-day="7" data-weeknumber="8" data-weekend="">
<time datetime="2023-02-26" tabindex="0">26</time>
</li><li data-day="1">
<time datetime="2023-02-27" tabindex="0">27</time>
</li><li data-day="2">
<time datetime="2023-02-28" tabindex="0">28</time>
</li>
</ol>
</kal-el><kal-el data-firstday="7">
<time datetime="2023-03">March <i>2023</i></time>
<ul><li><abbr title="Sunday">Sun</abbr></li><li><abbr title="Monday">Mon</abbr></li><li><abbr title="Tuesday">Tue</abbr></li><li><abbr title="Wednesday">Wed</abbr></li><li><abbr title="Thursday">Thu</abbr></li><li><abbr title="Friday">Fri</abbr></li><li><abbr title="Saturday">Sat</abbr></li></ul>
<ol>
<li data-day="3" data-weeknumber="9">
<time datetime="2023-03-01" tabindex="0">1</time>
</li><li data-day="4">
<time datetime="2023-03-02" tabindex="0">2</time>
</li><li data-day="5">
<time datetime="2023-03-03" tabindex="0">3</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-03-04" tabindex="0">4</time>
</li><li data-day="7" data-weeknumber="9" data-weekend="">
<time datetime="2023-03-05" tabindex="0">5</time>
</li><li data-day="1">
<time datetime="2023-03-06" tabindex="0">6</time>
</li><li data-day="2">
<time datetime="2023-03-07" tabindex="0">7</time>
</li><li data-day="3">
<time datetime="2023-03-08" tabindex="0">8</time>
</li><li data-day="4">
<time datetime="2023-03-09" tabindex="0">9</time>
</li><li data-day="5">
<time datetime="2023-03-10" tabindex="0">10</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-03-11" tabindex="0">11</time>
</li><li data-day="7" data-weeknumber="10" data-weekend="">
<time datetime="2023-03-12" tabindex="0">12</time>
</li><li data-day="1">
<time datetime="2023-03-13" tabindex="0">13</time>
</li><li data-day="2">
<time datetime="2023-03-14" tabindex="0">14</time>
</li><li data-day="3">
<time datetime="2023-03-15" tabindex="0">15</time>
</li><li data-day="4">
<time datetime="2023-03-16" tabindex="0">16</time>
</li><li data-day="5">
<time datetime="2023-03-17" tabindex="0">17</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-03-18" tabindex="0">18</time>
</li><li data-day="7" data-weeknumber="11" data-weekend="">
<time datetime="2023-03-19" tabindex="0">19</time>
</li><li data-day="1">
<time datetime="2023-03-20" tabindex="0">20</time>
</li><li data-day="2">
<time datetime="2023-03-21" tabindex="0">21</time>
</li><li data-day="3">
<time datetime="2023-03-22" tabindex="0">22</time>
</li><li data-day="4">
<time datetime="2023-03-23" tabindex="0">23</time>
</li><li data-day="5">
<time datetime="2023-03-24" tabindex="0">24</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-03-25" tabindex="0">25</time>
</li><li data-day="7" data-weeknumber="12" data-weekend="">
<time datetime="2023-03-26" tabindex="0">26</time>
</li><li data-day="1">
<time datetime="2023-03-27" tabindex="0">27</time>
</li><li data-day="2">
<time datetime="2023-03-28" tabindex="0">28</time>
</li><li data-day="3">
<time datetime="2023-03-29" tabindex="0">29</time>
</li><li data-day="4">
<time datetime="2023-03-30" tabindex="0">30</time>
</li><li data-day="5">
<time datetime="2023-03-31" tabindex="0">31</time>
</li>
</ol>
</kal-el><kal-el data-firstday="7">
<time datetime="2023-04">April <i>2023</i></time>
<ul><li><abbr title="Sunday">Sun</abbr></li><li><abbr title="Monday">Mon</abbr></li><li><abbr title="Tuesday">Tue</abbr></li><li><abbr title="Wednesday">Wed</abbr></li><li><abbr title="Thursday">Thu</abbr></li><li><abbr title="Friday">Fri</abbr></li><li><abbr title="Saturday">Sat</abbr></li></ul>
<ol>
<li data-day="6" data-weeknumber="13" data-weekend="">
<time datetime="2023-04-01" tabindex="0">1</time>
</li><li data-day="7" data-weeknumber="13" data-weekend="">
<time datetime="2023-04-02" tabindex="0">2</time>
</li><li data-day="1">
<time datetime="2023-04-03" tabindex="0">3</time>
</li><li data-day="2">
<time datetime="2023-04-04" tabindex="0">4</time>
</li><li data-day="3">
<time datetime="2023-04-05" tabindex="0">5</time>
</li><li data-day="4">
<time datetime="2023-04-06" tabindex="0">6</time>
</li><li data-day="5">
<time datetime="2023-04-07" tabindex="0">7</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-04-08" tabindex="0">8</time>
</li><li data-day="7" data-weeknumber="14" data-weekend="">
<time datetime="2023-04-09" tabindex="0">9</time>
</li><li data-day="1">
<time datetime="2023-04-10" tabindex="0">10</time>
</li><li data-day="2">
<time datetime="2023-04-11" tabindex="0">11</time>
</li><li data-day="3">
<time datetime="2023-04-12" tabindex="0">12</time>
</li><li data-day="4">
<time datetime="2023-04-13" tabindex="0">13</time>
</li><li data-day="5">
<time datetime="2023-04-14" tabindex="0">14</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-04-15" tabindex="0">15</time>
</li><li data-day="7" data-weeknumber="15" data-weekend="">
<time datetime="2023-04-16" tabindex="0">16</time>
</li><li data-day="1">
<time datetime="2023-04-17" tabindex="0">17</time>
</li><li data-day="2">
<time datetime="2023-04-18" tabindex="0">18</time>
</li><li data-day="3">
<time datetime="2023-04-19" tabindex="0">19</time>
</li><li data-day="4">
<time datetime="2023-04-20" tabindex="0">20</time>
</li><li data-day="5">
<time datetime="2023-04-21" tabindex="0">21</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-04-22" tabindex="0">22</time>
</li><li data-day="7" data-weeknumber="16" data-weekend="">
<time datetime="2023-04-23" tabindex="0">23</time>
</li><li data-day="1">
<time datetime="2023-04-24" tabindex="0">24</time>
</li><li data-day="2">
<time datetime="2023-04-25" tabindex="0">25</time>
</li><li data-day="3">
<time datetime="2023-04-26" tabindex="0">26</time>
</li><li data-day="4">
<time datetime="2023-04-27" tabindex="0">27</time>
</li><li data-day="5">
<time datetime="2023-04-28" tabindex="0">28</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-04-29" tabindex="0">29</time>
</li><li data-day="7" data-weeknumber="17" data-weekend="">
<time datetime="2023-04-30" tabindex="0">30</time>
</li>
</ol>
</kal-el><kal-el data-firstday="7">
<time datetime="2023-05">May <i>2023</i></time>
<ul><li><abbr title="Sunday">Sun</abbr></li><li><abbr title="Monday">Mon</abbr></li><li><abbr title="Tuesday">Tue</abbr></li><li><abbr title="Wednesday">Wed</abbr></li><li><abbr title="Thursday">Thu</abbr></li><li><abbr title="Friday">Fri</abbr></li><li><abbr title="Saturday">Sat</abbr></li></ul>
<ol>
<li data-day="1" data-weeknumber="18">
<time datetime="2023-05-01" tabindex="0">1</time>
</li><li data-day="2">
<time datetime="2023-05-02" tabindex="0">2</time>
</li><li data-day="3">
<time datetime="2023-05-03" tabindex="0">3</time>
</li><li data-day="4">
<time datetime="2023-05-04" tabindex="0">4</time>
</li><li data-day="5">
<time datetime="2023-05-05" tabindex="0">5</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-05-06" tabindex="0">6</time>
</li><li data-day="7" data-weeknumber="18" data-weekend="">
<time datetime="2023-05-07" tabindex="0">7</time>
</li><li data-day="1">
<time datetime="2023-05-08" tabindex="0">8</time>
</li><li data-day="2">
<time datetime="2023-05-09" tabindex="0">9</time>
</li><li data-day="3">
<time datetime="2023-05-10" tabindex="0">10</time>
</li><li data-day="4">
<time datetime="2023-05-11" tabindex="0">11</time>
</li><li data-day="5">
<time datetime="2023-05-12" tabindex="0">12</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-05-13" tabindex="0">13</time>
</li><li data-day="7" data-weeknumber="19" data-weekend="">
<time datetime="2023-05-14" tabindex="0">14</time>
</li><li data-day="1">
<time datetime="2023-05-15" tabindex="0">15</time>
</li><li data-day="2">
<time datetime="2023-05-16" tabindex="0">16</time>
</li><li data-day="3">
<time datetime="2023-05-17" tabindex="0">17</time>
</li><li data-day="4">
<time datetime="2023-05-18" tabindex="0">18</time>
</li><li data-day="5">
<time datetime="2023-05-19" tabindex="0">19</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-05-20" tabindex="0">20</time>
</li><li data-day="7" data-weeknumber="20" data-weekend="">
<time datetime="2023-05-21" tabindex="0">21</time>
</li><li data-day="1">
<time datetime="2023-05-22" tabindex="0">22</time>
</li><li data-day="2">
<time datetime="2023-05-23" tabindex="0">23</time>
</li><li data-day="3">
<time datetime="2023-05-24" tabindex="0">24</time>
</li><li data-day="4">
<time datetime="2023-05-25" tabindex="0">25</time>
</li><li data-day="5">
<time datetime="2023-05-26" tabindex="0">26</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-05-27" tabindex="0">27</time>
</li><li data-day="7" data-weeknumber="21" data-weekend="">
<time datetime="2023-05-28" tabindex="0">28</time>
</li><li data-day="1">
<time datetime="2023-05-29" tabindex="0">29</time>
</li><li data-day="2">
<time datetime="2023-05-30" tabindex="0">30</time>
</li><li data-day="3">
<time datetime="2023-05-31" tabindex="0">31</time>
</li>
</ol>
</kal-el><kal-el data-firstday="7">
<time datetime="2023-06">June <i>2023</i></time>
<ul><li><abbr title="Sunday">Sun</abbr></li><li><abbr title="Monday">Mon</abbr></li><li><abbr title="Tuesday">Tue</abbr></li><li><abbr title="Wednesday">Wed</abbr></li><li><abbr title="Thursday">Thu</abbr></li><li><abbr title="Friday">Fri</abbr></li><li><abbr title="Saturday">Sat</abbr></li></ul>
<ol>
<li data-day="4" data-weeknumber="22">
<time datetime="2023-06-01" tabindex="0">1</time>
</li><li data-day="5">
<time datetime="2023-06-02" tabindex="0">2</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-06-03" tabindex="0">3</time>
</li><li data-day="7" data-weeknumber="22" data-weekend="">
<time datetime="2023-06-04" tabindex="0">4</time>
</li><li data-day="1">
<time datetime="2023-06-05" tabindex="0">5</time>
</li><li data-day="2">
<time datetime="2023-06-06" tabindex="0">6</time>
</li><li data-day="3">
<time datetime="2023-06-07" tabindex="0">7</time>
</li><li data-day="4">
<time datetime="2023-06-08" tabindex="0">8</time>
</li><li data-day="5">
<time datetime="2023-06-09" tabindex="0">9</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-06-10" tabindex="0">10</time>
</li><li data-day="7" data-weeknumber="23" data-weekend="">
<time datetime="2023-06-11" tabindex="0">11</time>
</li><li data-day="1">
<time datetime="2023-06-12" tabindex="0">12</time>
</li><li data-day="2">
<time datetime="2023-06-13" tabindex="0">13</time>
</li><li data-day="3">
<time datetime="2023-06-14" tabindex="0">14</time>
</li><li data-day="4">
<time datetime="2023-06-15" tabindex="0">15</time>
</li><li data-day="5">
<time datetime="2023-06-16" tabindex="0">16</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-06-17" tabindex="0">17</time>
</li><li data-day="7" data-weeknumber="24" data-weekend="">
<time datetime="2023-06-18" tabindex="0">18</time>
</li><li data-day="1">
<time datetime="2023-06-19" tabindex="0">19</time>
</li><li data-day="2">
<time datetime="2023-06-20" tabindex="0">20</time>
</li><li data-day="3">
<time datetime="2023-06-21" tabindex="0">21</time>
</li><li data-day="4">
<time datetime="2023-06-22" tabindex="0">22</time>
</li><li data-day="5">
<time datetime="2023-06-23" tabindex="0">23</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-06-24" tabindex="0">24</time>
</li><li data-day="7" data-weeknumber="25" data-weekend="">
<time datetime="2023-06-25" tabindex="0">25</time>
</li><li data-day="1">
<time datetime="2023-06-26" tabindex="0">26</time>
</li><li data-day="2">
<time datetime="2023-06-27" tabindex="0">27</time>
</li><li data-day="3">
<time datetime="2023-06-28" tabindex="0">28</time>
</li><li data-day="4">
<time datetime="2023-06-29" tabindex="0">29</time>
</li><li data-day="5">
<time datetime="2023-06-30" tabindex="0">30</time>
</li>
</ol>
</kal-el><kal-el data-firstday="7">
<time datetime="2023-07">July <i>2023</i></time>
<ul><li><abbr title="Sunday">Sun</abbr></li><li><abbr title="Monday">Mon</abbr></li><li><abbr title="Tuesday">Tue</abbr></li><li><abbr title="Wednesday">Wed</abbr></li><li><abbr title="Thursday">Thu</abbr></li><li><abbr title="Friday">Fri</abbr></li><li><abbr title="Saturday">Sat</abbr></li></ul>
<ol>
<li data-day="6" data-weeknumber="26" data-weekend="">
<time datetime="2023-07-01" tabindex="0">1</time>
</li><li data-day="7" data-weeknumber="26" data-weekend="">
<time datetime="2023-07-02" tabindex="0">2</time>
</li><li data-day="1">
<time datetime="2023-07-03" tabindex="0">3</time>
</li><li data-day="2">
<time datetime="2023-07-04" tabindex="0">4</time>
</li><li data-day="3">
<time datetime="2023-07-05" tabindex="0">5</time>
</li><li data-day="4">
<time datetime="2023-07-06" tabindex="0">6</time>
</li><li data-day="5">
<time datetime="2023-07-07" tabindex="0">7</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-07-08" tabindex="0">8</time>
</li><li data-day="7" data-weeknumber="27" data-weekend="">
<time datetime="2023-07-09" tabindex="0">9</time>
</li><li data-day="1">
<time datetime="2023-07-10" tabindex="0">10</time>
</li><li data-day="2">
<time datetime="2023-07-11" tabindex="0">11</time>
</li><li data-day="3">
<time datetime="2023-07-12" tabindex="0">12</time>
</li><li data-day="4">
<time datetime="2023-07-13" tabindex="0">13</time>
</li><li data-day="5">
<time datetime="2023-07-14" tabindex="0">14</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-07-15" tabindex="0">15</time>
</li><li data-day="7" data-weeknumber="28" data-weekend="">
<time datetime="2023-07-16" tabindex="0">16</time>
</li><li data-day="1">
<time datetime="2023-07-17" tabindex="0">17</time>
</li><li data-day="2">
<time datetime="2023-07-18" tabindex="0">18</time>
</li><li data-day="3">
<time datetime="2023-07-19" tabindex="0">19</time>
</li><li data-day="4">
<time datetime="2023-07-20" tabindex="0">20</time>
</li><li data-day="5">
<time datetime="2023-07-21" tabindex="0">21</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-07-22" tabindex="0">22</time>
</li><li data-day="7" data-weeknumber="29" data-weekend="">
<time datetime="2023-07-23" tabindex="0">23</time>
</li><li data-day="1">
<time datetime="2023-07-24" tabindex="0">24</time>
</li><li data-day="2">
<time datetime="2023-07-25" tabindex="0">25</time>
</li><li data-day="3">
<time datetime="2023-07-26" tabindex="0">26</time>
</li><li data-day="4">
<time datetime="2023-07-27" tabindex="0">27</time>
</li><li data-day="5">
<time datetime="2023-07-28" tabindex="0">28</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-07-29" tabindex="0">29</time>
</li><li data-day="7" data-weeknumber="30" data-weekend="">
<time datetime="2023-07-30" tabindex="0">30</time>
</li><li data-day="1">
<time datetime="2023-07-31" tabindex="0">31</time>
</li>
</ol>
</kal-el><kal-el data-firstday="7">
<time datetime="2023-08">August <i>2023</i></time>
<ul><li><abbr title="Sunday">Sun</abbr></li><li><abbr title="Monday">Mon</abbr></li><li><abbr title="Tuesday">Tue</abbr></li><li><abbr title="Wednesday">Wed</abbr></li><li><abbr title="Thursday">Thu</abbr></li><li><abbr title="Friday">Fri</abbr></li><li><abbr title="Saturday">Sat</abbr></li></ul>
<ol>
<li data-day="2" data-weeknumber="31">
<time datetime="2023-08-01" tabindex="0">1</time>
</li><li data-day="3">
<time datetime="2023-08-02" tabindex="0">2</time>
</li><li data-day="4">
<time datetime="2023-08-03" tabindex="0">3</time>
</li><li data-day="5">
<time datetime="2023-08-04" tabindex="0">4</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-08-05" tabindex="0">5</time>
</li><li data-day="7" data-weeknumber="31" data-weekend="">
<time datetime="2023-08-06" tabindex="0">6</time>
</li><li data-day="1">
<time datetime="2023-08-07" tabindex="0">7</time>
</li><li data-day="2">
<time datetime="2023-08-08" tabindex="0">8</time>
</li><li data-day="3">
<time datetime="2023-08-09" tabindex="0">9</time>
</li><li data-day="4">
<time datetime="2023-08-10" tabindex="0">10</time>
</li><li data-day="5">
<time datetime="2023-08-11" tabindex="0">11</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-08-12" tabindex="0">12</time>
</li><li data-day="7" data-weeknumber="32" data-weekend="">
<time datetime="2023-08-13" tabindex="0">13</time>
</li><li data-day="1">
<time datetime="2023-08-14" tabindex="0">14</time>
</li><li data-day="2">
<time datetime="2023-08-15" tabindex="0">15</time>
</li><li data-day="3">
<time datetime="2023-08-16" tabindex="0">16</time>
</li><li data-day="4">
<time datetime="2023-08-17" tabindex="0">17</time>
</li><li data-day="5">
<time datetime="2023-08-18" tabindex="0">18</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-08-19" tabindex="0">19</time>
</li><li data-day="7" data-weeknumber="33" data-weekend="">
<time datetime="2023-08-20" tabindex="0">20</time>
</li><li data-day="1">
<time datetime="2023-08-21" tabindex="0">21</time>
</li><li data-day="2">
<time datetime="2023-08-22" tabindex="0">22</time>
</li><li data-day="3">
<time datetime="2023-08-23" tabindex="0">23</time>
</li><li data-day="4">
<time datetime="2023-08-24" tabindex="0">24</time>
</li><li data-day="5">
<time datetime="2023-08-25" tabindex="0">25</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-08-26" tabindex="0">26</time>
</li><li data-day="7" data-weeknumber="34" data-weekend="">
<time datetime="2023-08-27" tabindex="0">27</time>
</li><li data-day="1">
<time datetime="2023-08-28" tabindex="0">28</time>
</li><li data-day="2">
<time datetime="2023-08-29" tabindex="0">29</time>
</li><li data-day="3">
<time datetime="2023-08-30" tabindex="0">30</time>
</li><li data-day="4">
<time datetime="2023-08-31" tabindex="0">31</time>
</li>
</ol>
</kal-el><kal-el data-firstday="7">
<time datetime="2023-09">September <i>2023</i></time>
<ul><li><abbr title="Sunday">Sun</abbr></li><li><abbr title="Monday">Mon</abbr></li><li><abbr title="Tuesday">Tue</abbr></li><li><abbr title="Wednesday">Wed</abbr></li><li><abbr title="Thursday">Thu</abbr></li><li><abbr title="Friday">Fri</abbr></li><li><abbr title="Saturday">Sat</abbr></li></ul>
<ol>
<li data-day="5" data-weeknumber="35">
<time datetime="2023-09-01" tabindex="0">1</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-09-02" tabindex="0">2</time>
</li><li data-day="7" data-weeknumber="35" data-weekend="">
<time datetime="2023-09-03" tabindex="0">3</time>
</li><li data-day="1">
<time datetime="2023-09-04" tabindex="0">4</time>
</li><li data-day="2">
<time datetime="2023-09-05" tabindex="0">5</time>
</li><li data-day="3">
<time datetime="2023-09-06" tabindex="0">6</time>
</li><li data-day="4">
<time datetime="2023-09-07" tabindex="0">7</time>
</li><li data-day="5">
<time datetime="2023-09-08" tabindex="0">8</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-09-09" tabindex="0">9</time>
</li><li data-day="7" data-weeknumber="36" data-weekend="">
<time datetime="2023-09-10" tabindex="0">10</time>
</li><li data-day="1">
<time datetime="2023-09-11" tabindex="0">11</time>
</li><li data-day="2">
<time datetime="2023-09-12" tabindex="0">12</time>
</li><li data-day="3">
<time datetime="2023-09-13" tabindex="0">13</time>
</li><li data-day="4">
<time datetime="2023-09-14" tabindex="0">14</time>
</li><li data-day="5">
<time datetime="2023-09-15" tabindex="0">15</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-09-16" tabindex="0">16</time>
</li><li data-day="7" data-weeknumber="37" data-weekend="">
<time datetime="2023-09-17" tabindex="0">17</time>
</li><li data-day="1">
<time datetime="2023-09-18" tabindex="0">18</time>
</li><li data-day="2">
<time datetime="2023-09-19" tabindex="0">19</time>
</li><li data-day="3">
<time datetime="2023-09-20" tabindex="0">20</time>
</li><li data-day="4">
<time datetime="2023-09-21" tabindex="0">21</time>
</li><li data-day="5">
<time datetime="2023-09-22" tabindex="0">22</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-09-23" tabindex="0">23</time>
</li><li data-day="7" data-weeknumber="38" data-weekend="">
<time datetime="2023-09-24" tabindex="0">24</time>
</li><li data-day="1">
<time datetime="2023-09-25" tabindex="0">25</time>
</li><li data-day="2">
<time datetime="2023-09-26" tabindex="0">26</time>
</li><li data-day="3">
<time datetime="2023-09-27" tabindex="0">27</time>
</li><li data-day="4">
<time datetime="2023-09-28" tabindex="0">28</time>
</li><li data-day="5">
<time datetime="2023-09-29" tabindex="0">29</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-09-30" tabindex="0">30</time>
</li>
</ol>
</kal-el><kal-el data-firstday="7">
<time datetime="2023-10">October <i>2023</i></time>
<ul><li><abbr title="Sunday">Sun</abbr></li><li><abbr title="Monday">Mon</abbr></li><li><abbr title="Tuesday">Tue</abbr></li><li><abbr title="Wednesday">Wed</abbr></li><li><abbr title="Thursday">Thu</abbr></li><li><abbr title="Friday">Fri</abbr></li><li><abbr title="Saturday">Sat</abbr></li></ul>
<ol>
<li data-day="7" data-weeknumber="39" data-weekend="">
<time datetime="2023-10-01" tabindex="0">1</time>
</li><li data-day="1">
<time datetime="2023-10-02" tabindex="0">2</time>
</li><li data-day="2">
<time datetime="2023-10-03" tabindex="0">3</time>
</li><li data-day="3">
<time datetime="2023-10-04" tabindex="0">4</time>
</li><li data-day="4">
<time datetime="2023-10-05" tabindex="0">5</time>
</li><li data-day="5">
<time datetime="2023-10-06" tabindex="0">6</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-10-07" tabindex="0">7</time>
</li><li data-day="7" data-weeknumber="40" data-weekend="">
<time datetime="2023-10-08" tabindex="0">8</time>
</li><li data-day="1">
<time datetime="2023-10-09" tabindex="0">9</time>
</li><li data-day="2">
<time datetime="2023-10-10" tabindex="0">10</time>
</li><li data-day="3">
<time datetime="2023-10-11" tabindex="0">11</time>
</li><li data-day="4">
<time datetime="2023-10-12" tabindex="0">12</time>
</li><li data-day="5">
<time datetime="2023-10-13" tabindex="0">13</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-10-14" tabindex="0">14</time>
</li><li data-day="7" data-weeknumber="41" data-weekend="">
<time datetime="2023-10-15" tabindex="0">15</time>
</li><li data-day="1">
<time datetime="2023-10-16" tabindex="0">16</time>
</li><li data-day="2">
<time datetime="2023-10-17" tabindex="0">17</time>
</li><li data-day="3">
<time datetime="2023-10-18" tabindex="0">18</time>
</li><li data-day="4">
<time datetime="2023-10-19" tabindex="0">19</time>
</li><li data-day="5">
<time datetime="2023-10-20" tabindex="0">20</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-10-21" tabindex="0">21</time>
</li><li data-day="7" data-weeknumber="42" data-weekend="">
<time datetime="2023-10-22" tabindex="0">22</time>
</li><li data-day="1">
<time datetime="2023-10-23" tabindex="0">23</time>
</li><li data-day="2">
<time datetime="2023-10-24" tabindex="0">24</time>
</li><li data-day="3">
<time datetime="2023-10-25" tabindex="0">25</time>
</li><li data-day="4">
<time datetime="2023-10-26" tabindex="0">26</time>
</li><li data-day="5">
<time datetime="2023-10-27" tabindex="0">27</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-10-28" tabindex="0">28</time>
</li><li data-day="7" data-weeknumber="43" data-weekend="">
<time datetime="2023-10-29" tabindex="0">29</time>
</li><li data-day="1">
<time datetime="2023-10-30" tabindex="0">30</time>
</li><li data-day="2">
<time datetime="2023-10-31" tabindex="0">31</time>
</li>
</ol>
</kal-el><kal-el data-firstday="7">
<time datetime="2023-11">November <i>2023</i></time>
<ul><li><abbr title="Sunday">Sun</abbr></li><li><abbr title="Monday">Mon</abbr></li><li><abbr title="Tuesday">Tue</abbr></li><li><abbr title="Wednesday">Wed</abbr></li><li><abbr title="Thursday">Thu</abbr></li><li><abbr title="Friday">Fri</abbr></li><li><abbr title="Saturday">Sat</abbr></li></ul>
<ol>
<li data-day="3" data-weeknumber="44">
<time datetime="2023-11-01" tabindex="0">1</time>
</li><li data-day="4">
<time datetime="2023-11-02" tabindex="0">2</time>
</li><li data-day="5">
<time datetime="2023-11-03" tabindex="0">3</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-11-04" tabindex="0">4</time>
</li><li data-day="7" data-weeknumber="44" data-weekend="">
<time datetime="2023-11-05" tabindex="0">5</time>
</li><li data-day="1">
<time datetime="2023-11-06" tabindex="0">6</time>
</li><li data-day="2">
<time datetime="2023-11-07" tabindex="0">7</time>
</li><li data-day="3">
<time datetime="2023-11-08" tabindex="0">8</time>
</li><li data-day="4">
<time datetime="2023-11-09" tabindex="0">9</time>
</li><li data-day="5">
<time datetime="2023-11-10" tabindex="0">10</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-11-11" tabindex="0">11</time>
</li><li data-day="7" data-weeknumber="45" data-weekend="">
<time datetime="2023-11-12" tabindex="0">12</time>
</li><li data-day="1">
<time datetime="2023-11-13" tabindex="0">13</time>
</li><li data-day="2">
<time datetime="2023-11-14" tabindex="0">14</time>
</li><li data-day="3">
<time datetime="2023-11-15" tabindex="0">15</time>
</li><li data-day="4">
<time datetime="2023-11-16" tabindex="0">16</time>
</li><li data-day="5">
<time datetime="2023-11-17" tabindex="0">17</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-11-18" tabindex="0">18</time>
</li><li data-day="7" data-weeknumber="46" data-weekend="">
<time datetime="2023-11-19" tabindex="0">19</time>
</li><li data-day="1">
<time datetime="2023-11-20" tabindex="0">20</time>
</li><li data-day="2">
<time datetime="2023-11-21" tabindex="0">21</time>
</li><li data-day="3">
<time datetime="2023-11-22" tabindex="0">22</time>
</li><li data-day="4">
<time datetime="2023-11-23" tabindex="0">23</time>
</li><li data-day="5">
<time datetime="2023-11-24" tabindex="0">24</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-11-25" tabindex="0">25</time>
</li><li data-day="7" data-weeknumber="47" data-weekend="">
<time datetime="2023-11-26" tabindex="0">26</time>
</li><li data-day="1">
<time datetime="2023-11-27" tabindex="0">27</time>
</li><li data-day="2">
<time datetime="2023-11-28" tabindex="0">28</time>
</li><li data-day="3">
<time datetime="2023-11-29" tabindex="0">29</time>
</li><li data-day="4">
<time datetime="2023-11-30" tabindex="0">30</time>
</li>
</ol>
</kal-el><kal-el data-firstday="7">
<time datetime="2023-12">December <i>2023</i></time>
<ul><li><abbr title="Sunday">Sun</abbr></li><li><abbr title="Monday">Mon</abbr></li><li><abbr title="Tuesday">Tue</abbr></li><li><abbr title="Wednesday">Wed</abbr></li><li><abbr title="Thursday">Thu</abbr></li><li><abbr title="Friday">Fri</abbr></li><li><abbr title="Saturday">Sat</abbr></li></ul>
<ol>
<li data-day="5" data-weeknumber="48">
<time datetime="2023-12-01" tabindex="0">1</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-12-02" tabindex="0">2</time>
</li><li data-day="7" data-weeknumber="48" data-weekend="">
<time datetime="2023-12-03" tabindex="0">3</time>
</li><li data-day="1">
<time datetime="2023-12-04" tabindex="0">4</time>
</li><li data-day="2">
<time datetime="2023-12-05" tabindex="0">5</time>
</li><li data-day="3">
<time datetime="2023-12-06" tabindex="0">6</time>
</li><li data-day="4">
<time datetime="2023-12-07" tabindex="0">7</time>
</li><li data-day="5">
<time datetime="2023-12-08" tabindex="0">8</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-12-09" tabindex="0">9</time>
</li><li data-day="7" data-weeknumber="49" data-weekend="">
<time datetime="2023-12-10" tabindex="0">10</time>
</li><li data-day="1">
<time datetime="2023-12-11" tabindex="0">11</time>
</li><li data-day="2">
<time datetime="2023-12-12" tabindex="0">12</time>
</li><li data-day="3">
<time datetime="2023-12-13" tabindex="0">13</time>
</li><li data-day="4">
<time datetime="2023-12-14" tabindex="0">14</time>
</li><li data-day="5">
<time datetime="2023-12-15" tabindex="0">15</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-12-16" tabindex="0">16</time>
</li><li data-day="7" data-weeknumber="50" data-weekend="">
<time datetime="2023-12-17" tabindex="0">17</time>
</li><li data-day="1">
<time datetime="2023-12-18" tabindex="0">18</time>
</li><li data-day="2">
<time datetime="2023-12-19" tabindex="0">19</time>
</li><li data-day="3">
<time datetime="2023-12-20" tabindex="0">20</time>
</li><li data-day="4">
<time datetime="2023-12-21" tabindex="0">21</time>
</li><li data-day="5">
<time datetime="2023-12-22" tabindex="0">22</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-12-23" tabindex="0">23</time>
</li><li data-day="7" data-weeknumber="51" data-weekend="">
<time datetime="2023-12-24" tabindex="0">24</time>
</li><li data-day="1">
<time datetime="2023-12-25" tabindex="0">25</time>
</li><li data-day="2">
<time datetime="2023-12-26" tabindex="0">26</time>
</li><li data-day="3">
<time datetime="2023-12-27" tabindex="0">27</time>
</li><li data-day="4">
<time datetime="2023-12-28" tabindex="0">28</time>
</li><li data-day="5">
<time datetime="2023-12-29" tabindex="0">29</time>
</li><li data-day="6" data-weekend="">
<time datetime="2023-12-30" tabindex="0">30</time>
</li><li data-day="7" data-weeknumber="52" data-weekend="">
<time datetime="2023-12-31" tabindex="0">31</time>
</li>
</ol>
</kal-el></jor-el>-->:where(kal-el) {
--kalel-day-hover-bgc: hsl(0, 0%, 90%);
font-family: ui-sans-serif, system-ui, snas-serif;
inline-size: 100%;
}
/* weekdays */
kal-el abbr {
text-decoration: none;
}
/* month */
kal-el > time {
display: var(--kalel-month-d, inline);
font-size: var(--kalel-month-fz, inherit);
font-weight: var(--kalel-month-fw, 700);
text-align: var(--kalel-month-tal, initial);
}
/* year */
kal-el i {
display: var(--kalel-year-d, inline);
font-style: normal;
font-weight: var(--kalel-year-fw, 100);
}
/* grid */
kal-el :is(ol, ul) {
display: grid;
font-size: var(--kalel-fz, small);
grid-row-gap: var(--kalel-row-gap, .33em);
grid-template-columns: var(--kalel-gtc, repeat(7, 1fr));
list-style: none;
margin: unset;
padding: unset;
position: relative;
}
/* days */
kal-el :is(ol, ul) :is(abbr, time) {
background-color: var(--kalel-day-bg, none);
block-size: var(--kalel-day-h, 2em);
border-radius: var(--kalel-day-bdrs, 50%);
color: var(--kalel-day-c, inherit);
display: var(--kalel-day-d, inline-block);
font-size: var(--kalel-day-fz, inherit);
font-weight: var(--kalel-day-fw, 400);
inline-size: var(--kalel-day-w, 2em);
line-height: var(--kalel-day-lh, 2em);
margin-block: var(--kalel-day-mb, 0 var(--kalel-row-gap, .33em));
text-align: var(--kalel-day-tal, center);
user-select: none;
}
/* day hover */
:where(kal-el ol time):hover {
background: var(--kalel-day-hover-bgc);
}
/* day wrappers */
kal-el :is(ol, ul) li {
border-color: var(--kalel-li-bdc, hsl(0, 0%, 80%));
border-style: var(--kalel-li-bds, solid);
border-width: var(--kalel-li-bdw, 0 0 1px 0);
grid-column: var(--kalel-li-gc, initial);
text-align: var(--kalel-li-tal, end);
}
/* weekdays wrapper */
kal-el ul {
margin-block-end: var(--kalel-row-gap, .33em);
}
[data-day="1"] { background: var(--kalel-day-1-bg, #0000); }
[data-day="2"] { background: var(--kalel-day-2-bg, #0000); }
[data-day="3"] { background: var(--kalel-day-3-bg, #0000); }
[data-day="4"] { background: var(--kalel-day-4-bg, #0000); }
[data-day="5"] { background: var(--kalel-day-5-bg, #0000); }
[data-day="6"] { background: var(--kalel-day-6-bg, #0000); }
[data-day="7"] { background: var(--kalel-day-7-bg, #0000); }
[data-firstday="1"] [data-day="1"]:first-child { --kalel-li-gc: 1 / 2; }
[data-firstday="1"] [data-day="2"]:first-child { --kalel-li-gc: 1 / 3; }
[data-firstday="1"] [data-day="3"]:first-child { --kalel-li-gc: 1 / 4; }
[data-firstday="1"] [data-day="4"]:first-child { --kalel-li-gc: 1 / 5; }
[data-firstday="1"] [data-day="5"]:first-child { --kalel-li-gc: 1 / 6; }
[data-firstday="1"] [data-day="6"]:first-child { --kalel-li-gc: 1 / 7; }
[data-firstday="1"] [data-day="7"]:first-child { --kalel-li-gc: 1 / 8; }
[data-firstday="6"] [data-day="1"]:first-child { --kalel-li-gc: 1 / 4; }
[data-firstday="6"] [data-day="2"]:first-child { --kalel-li-gc: 1 / 5; }
[data-firstday="6"] [data-day="3"]:first-child { --kalel-li-gc: 1 / 6; }
[data-firstday="6"] [data-day="4"]:first-child { --kalel-li-gc: 1 / 7; }
[data-firstday="6"] [data-day="5"]:first-child { --kalel-li-gc: 1 / 8; }
[data-firstday="6"] [data-day="6"]:first-child { --kalel-li-gc: 1 / 1; }
[data-firstday="6"] [data-day="7"]:first-child { --kalel-li-gc: 1 / 3; }
[data-firstday="7"] [data-day="1"]:first-child { --kalel-li-gc: 1 / 3; }
[data-firstday="7"] [data-day="2"]:first-child { --kalel-li-gc: 1 / 4; }
[data-firstday="7"] [data-day="3"]:first-child { --kalel-li-gc: 1 / 5; }
[data-firstday="7"] [data-day="4"]:first-child { --kalel-li-gc: 1 / 6; }
[data-firstday="7"] [data-day="5"]:first-child { --kalel-li-gc: 1 / 7; }
[data-firstday="7"] [data-day="6"]:first-child { --kalel-li-gc: 1 / 8; }
[data-firstday="7"] [data-day="7"]:first-child { --kalel-li-gc: 1 / 2; }
[data-today] {
--kalel-day-bdrs: 50%;
--kalel-day-bg: hsl(0, 86%, 40%);
--kalel-day-hover-bgc: hsl(0, 86%, 70%);
--kalel-day-c: #FFF;
}
[data-weekend]:not([data-today]) { --kalel-day-c: var(--kalel-weekend-c, hsl(0, 86%, 46%)); }
[data-weeknumber]::before {
color: var(--kalel-weeknumber-c, hsl(0, 0%, 50%));
display: var(--kalel-weeknumber-d, inline-block);
content: attr(data-weeknumber);
position: absolute;
font-size: var(--kalel-weeknumber-fz, xx-small);
inset-inline-start: 0;
}
jor-el {
background: var(--jorel-bg, none);
display: var(--jorel-d, grid);
gap: var(--jorel-gap, 2.5rem);
grid-template-columns: var(--jorel-gtc, repeat(auto-fill, minmax(320px, 1fr)));
padding: var(--jorel-p, 0);
}
/* FOR DEMO */
body {
font-family: ui-sans-serif, system-ui, snas-serif;
padding: 3ch;
}
label {
background-color: hsl(0, 0%, 90%);
display: flex;
font-size: small;
gap: 1ch;
margin-block-end: 1em;
padding: .5em 1em;
}function kalEl(settings = {}) {
const pad = (val) => (val + 1).toString().padStart(2, '0');
const render = (date, locale) => {
const month = date.getMonth();
const year = date.getFullYear();
const numOfDays = new Date(year, month + 1, 0).getDate();
const renderToday = (year === config.today.year) && (month === config.today.month);
return `<kal-el data-firstday="${config.info.firstDay}">
<time datetime="${year}-${(pad(month))}">${new Intl.DateTimeFormat(locale, { month: 'long'}).format(date)} <i>${year}</i></time>
<ul>${weekdays(config.info.firstDay,locale).map(name => `<li><abbr title="${name.long}">${name.short}</abbr></li>`).join('')}</ul>
<ol>
${[...Array(numOfDays).keys()].map(i => {
const cur = new Date(year, month, i + 1);
let day = cur.getDay(); if (day === 0) day = 7;
const today = renderToday && (config.today.day === i + 1) ? ' data-today':'';
return `<li data-day="${day}"${today}${i === 0 || day === config.info.firstDay ? ` data-weeknumber="${new Intl.NumberFormat(locale).format(getWeek(cur))}"`:''}${config.info.weekend.includes(day) ? ` data-weekend`:''}>
<time datetime="${year}-${(pad(month))}-${pad(i)}" tabindex="0">${new Intl.NumberFormat(locale).format(i + 1)}</time>
</li>`
}).join('')}
</ol>
</kal-el>`;
}
const weekdays = (firstDay, locale) => {
const date = new Date(0);
const arr = [...Array(7).keys()].map(i => {
date.setDate(5 + i)
return {
long: new Intl.DateTimeFormat([locale], { weekday: 'long'}).format(date),
short: new Intl.DateTimeFormat([locale], { weekday: 'short'}).format(date)
}
})
for (let i = 0; i < 8 - firstDay; i++) arr.splice(0, 0, arr.pop());
return arr;
}
const today = new Date();
const config = Object.assign({ locale: (document.documentElement.getAttribute('lang') || 'en-US'), today: { day: today.getDate(), month: today.getMonth(), year: today.getFullYear() } }, settings);
const date = config.date ? new Date(config.date) : today;
if (!config.info) config.info = new Intl.Locale(config.locale).weekInfo || { firstDay: 7, weekend: [6, 7] };
return config.year ? [...Array(12).keys()].map(i => render(new Date(date.getFullYear(), i, date.getDate()), config.locale, date.getMonth())).join('') : render(date, config.locale)
}
function getWeek(cur) {
const date = new Date(cur.getTime());
date.setHours(0, 0, 0, 0);
date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
const week = new Date(date.getFullYear(), 0, 4);
return 1 + Math.round(((date.getTime() - week.getTime()) / 86400000 - 3 + (week.getDay() + 6) % 7) / 7);
}
/* Init Demo */
app.innerHTML = kalEl(app.dataset);
lang.addEventListener('change', () => {
document.documentElement.lang = lang.value;
app.innerHTML = kalEl(app.dataset)
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.