Created
February 9, 2023 16:55
-
-
Save AndreiTelteu/ab5d3ab3852e0aba899f63788e34c75b to your computer and use it in GitHub Desktop.
Solidjs full year calendar build with momentjs
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
import { Component, For } from "solid-js"; | |
import moment from "moment"; | |
import "moment/dist/locale/ro"; | |
moment.locale("ro"); | |
const App: Component = () => { | |
const weekdays = moment.weekdaysMin(); | |
const months = moment.months(); | |
const fullYear = Object.fromEntries( | |
months.map((monthName, monthIndex) => { | |
return [ | |
monthName, | |
new Array(6).fill(1).map((i, rowIndex) => { | |
return weekdays.map((dayName, colIndex) => { | |
const day = moment() | |
// .year(2024) | |
.month(monthIndex) | |
.date(rowIndex * 7) | |
.weekday(colIndex); | |
return day.month() == monthIndex ? day.format("D") : ""; | |
}); | |
}), | |
]; | |
}) | |
); | |
return ( | |
<div class="solidcalendar-container"> | |
<For each={Object.keys(fullYear)}> | |
{(monthName) => ( | |
<div class="solidcalendar-month"> | |
<div class="solidcalendar-monthname">{monthName}</div> | |
<div class="solidcalendar-weekdays"> | |
<For each={weekdays}> | |
{(weekDayName) => ( | |
<div class="solidcalendar-weekday solidcalendar-column"> | |
{weekDayName} | |
</div> | |
)} | |
</For> | |
</div> | |
<For each={fullYear[monthName]}> | |
{(days) => ( | |
<div class="solidcalendar-week"> | |
<For each={days}> | |
{(day) => ( | |
<div class="solidcalendar-weekday solidcalendar-column"> | |
{day} | |
</div> | |
)} | |
</For> | |
</div> | |
)} | |
</For> | |
</div> | |
)} | |
</For> | |
</div> | |
); | |
}; | |
export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment