Calendar complet în Solid JS
<div class=highlight><pre tabindex=0 style=color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-tsx data-lang=tsx><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 1</span><span><span style=color:#6ab825;font-weight:700>import</span> { Component, For } <span style=color:#6ab825;font-weight:700>from</span> <span style=color:#ed9d13>"solid-js"</span>;
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 2</span><span><span style=color:#6ab825;font-weight:700>import</span> moment <span style=color:#6ab825;font-weight:700>from</span> <span style=color:#ed9d13>"moment"</span>;
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 3</span><span><span style=color:#999;font-style:italic>// import "moment/dist/locale/ro"; // if you need to change the locale
</span></span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 4</span><span><span style=color:#999;font-style:italic>// moment.locale("ro");
</span></span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 5</span><span><span style=color:#999;font-style:italic></span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 6</span><span><span style=color:#6ab825;font-weight:700>const</span> FullCalendar: <span style=color:#6ab825;font-weight:700>Component</span> = () => {
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 7</span><span> <span style=color:#6ab825;font-weight:700>const</span> weekdays = moment.weekdaysMin();
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 8</span><span> <span style=color:#6ab825;font-weight:700>const</span> months = moment.months();
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 9</span><span> <span style=color:#6ab825;font-weight:700>const</span> fullYear = <span style=color:#24909d>Object</span>.fromEntries(
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">10</span><span> months.map((monthName, monthIndex) => {
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">11</span><span> <span style=color:#6ab825;font-weight:700>return</span> [
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">12</span><span> monthName,
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">13</span><span> <span style=color:#6ab825;font-weight:700>new</span> <span style=color:#24909d>Array</span>(<span style=color:#3677a9>6</span>).fill(<span style=color:#3677a9>1</span>).map((i, rowIndex) => {
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">14</span><span> <span style=color:#6ab825;font-weight:700>return</span> weekdays.map((dayName, colIndex) => {
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">15</span><span> <span style=color:#6ab825;font-weight:700>const</span> day = moment()
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">16</span><span> <span style=color:#999;font-style:italic>// .year(2024) // if you need to change the year
</span></span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">17</span><span><span style=color:#999;font-style:italic></span> .month(monthIndex)
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">18</span><span> .date(rowIndex * <span style=color:#3677a9>7</span>)
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">19</span><span> .weekday(colIndex);
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">20</span><span> <span style=color:#6ab825;font-weight:700>return</span> day.month() == monthIndex ? day.format(<span style=color:#ed9d13>"D"</span>) : <span style=color:#ed9d13>""</span>;
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">21</span><span> });
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">22</span><span> }),
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">23</span><span> ];
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">24</span><span> })
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">25</span><span> );
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">26</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">27</span><span> <span style=color:#6ab825;font-weight:700>return</span> (
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">28</span><span> <<span style=color:#6ab825;font-weight:700>div</span> <span style=color:#bbb>class</span>=<span style=color:#ed9d13>"solidcalendar-container"</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">29</span><span> <<span style=color:#6ab825;font-weight:700>For</span> <span style=color:#bbb>each</span>={<span style=color:#24909d>Object</span>.keys(fullYear)}>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">30</span><span> {(monthName) => (
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">31</span><span> <<span style=color:#6ab825;font-weight:700>div</span> <span style=color:#bbb>class</span>=<span style=color:#ed9d13>"solidcalendar-month"</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">32</span><span> <<span style=color:#6ab825;font-weight:700>div</span> <span style=color:#bbb>class</span>=<span style=color:#ed9d13>"solidcalendar-monthname"</span>>{monthName}</<span style=color:#6ab825;font-weight:700>div</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">33</span><span> <<span style=color:#6ab825;font-weight:700>div</span> <span style=color:#bbb>class</span>=<span style=color:#ed9d13>"solidcalendar-weekdays"</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">34</span><span> <<span style=color:#6ab825;font-weight:700>For</span> <span style=color:#bbb>each</span>={weekdays}>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">35</span><span> {(weekDayName) => (
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">36</span><span> <<span style=color:#6ab825;font-weight:700>div</span> <span style=color:#bbb>class</span>=<span style=color:#ed9d13>"solidcalendar-weekday solidcalendar-column"</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">37</span><span> {weekDayName}
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">38</span><span> </<span style=color:#6ab825;font-weight:700>div</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">39</span><span> )}
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">40</span><span> </<span style=color:#6ab825;font-weight:700>For</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">41</span><span> </<span style=color:#6ab825;font-weight:700>div</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">42</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">43</span><span> <<span style=color:#6ab825;font-weight:700>For</span> <span style=color:#bbb>each</span>={fullYear[monthName]}>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">44</span><span> {(days) => (
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">45</span><span> <<span style=color:#6ab825;font-weight:700>div</span> <span style=color:#bbb>class</span>=<span style=color:#ed9d13>"solidcalendar-week"</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">46</span><span> <<span style=color:#6ab825;font-weight:700>For</span> <span style=color:#bbb>each</span>={days}>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">47</span><span> {(day) => (
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">48</span><span> <<span style=color:#6ab825;font-weight:700>div</span> <span style=color:#bbb>class</span>=<span style=color:#ed9d13>"solidcalendar-weekday solidcalendar-column"</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">49</span><span> {day}
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">50</span><span> </<span style=color:#6ab825;font-weight:700>div</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">51</span><span> )}
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">52</span><span> </<span style=color:#6ab825;font-weight:700>For</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">53</span><span> </<span style=color:#6ab825;font-weight:700>div</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">54</span><span> )}
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">55</span><span> </<span style=color:#6ab825;font-weight:700>For</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">56</span><span> </<span style=color:#6ab825;font-weight:700>div</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">57</span><span> )}
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">58</span><span> </<span style=color:#6ab825;font-weight:700>For</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">59</span><span> </<span style=color:#6ab825;font-weight:700>div</span>>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">60</span><span> );
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">61</span><span>};
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">62</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">63</span><span><span style=color:#6ab825;font-weight:700>export</span> <span style=color:#6ab825;font-weight:700>default</span> FullCalendar;
</span></span></code></pre></div><hr width=100% id=EOF><p style=color:#777>Ultima modificare la 2024-11-18</p>