Erzeugung eines generischen Kalenders mittels SolidJS.
This commit is contained in:
Marco Kittel
parent
a2867e5110
commit
f8e8cdb463
441
src/Calendar.tsx
441
src/Calendar.tsx
|
|
@ -1,361 +1,106 @@
|
|||
import { For, createSignal, Show } from 'solid-js';
|
||||
|
||||
|
||||
function getDateArray(year: number, month: number) {
|
||||
//Das bedeutet Montag im englischen Wochenformat.
|
||||
const startTagDerWoche = 1;
|
||||
const offsetZumEnglischenSonntag = (7 - startTagDerWoche);
|
||||
const wochenTagDesErsten = (new Date(year, month, 1).getDay() + offsetZumEnglischenSonntag) % 7;
|
||||
const wochenTage = ['So', "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
|
||||
const monatsNamen = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
|
||||
const wochenTageNachAnfangsTag = [];
|
||||
for (let i = startTagDerWoche; i < startTagDerWoche + 7; i++) {
|
||||
|
||||
wochenTageNachAnfangsTag.push(wochenTage[i % 7]);
|
||||
}
|
||||
let tage = [];
|
||||
//Ist der erste im Monat der Starttag meiner Woche
|
||||
if (wochenTagDesErsten == 0) {
|
||||
} else {
|
||||
const vorMonatTage = new Date(year, month, 0).getDate();
|
||||
for (let i = wochenTagDesErsten - 1; i >= 0; i--) {
|
||||
const tagObj = { "value": vorMonatTage - i, "enabled": false }
|
||||
tage.push(tagObj);
|
||||
}
|
||||
}
|
||||
for (let i = 1; i <= new Date(year, month + 1, 0).getDate(); i++) {
|
||||
const tagObj = { "value": i, "enabled": true }
|
||||
tage.push(tagObj);
|
||||
}
|
||||
let nextDay = 1;
|
||||
for (let i = tage.length; i < 42; i++) {
|
||||
const tagObj = { "value": nextDay, "enabled": false }
|
||||
tage.push(tagObj);
|
||||
nextDay++;
|
||||
}
|
||||
return { "wochenTage": wochenTageNachAnfangsTag, "tage": tage, "monat": monatsNamen[month], "jahr": year }
|
||||
}
|
||||
|
||||
export function CalendarComponent() {
|
||||
const [month, setMonth] = createSignal(0);
|
||||
const [year, setYear] = createSignal(2025);
|
||||
const weekdays = getDateArray(year(), month()).wochenTage;
|
||||
|
||||
let onclickNextMonth = () => {
|
||||
if (month() >= 11) {
|
||||
setMonth(0);
|
||||
setYear(year() + 1);
|
||||
return;
|
||||
}
|
||||
setMonth(month() + 1);
|
||||
};
|
||||
|
||||
let onclickPrevMonth = () => {
|
||||
if (month() <= 0) {
|
||||
setMonth(11);
|
||||
setYear(year() - 1);
|
||||
return;
|
||||
}
|
||||
setMonth(month() - 1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="w-full max-w-sm mx-auto">
|
||||
<div class="text-center grid grid-cols-7">
|
||||
<div>M</div>
|
||||
<div>T</div>
|
||||
<div>W</div>
|
||||
<div>T</div>
|
||||
<div>F</div>
|
||||
<div>S</div>
|
||||
<div>S</div>
|
||||
<For each={weekdays}>
|
||||
{(day) => <div>{day}</div>}
|
||||
</For>
|
||||
</div>
|
||||
<div
|
||||
class="mt-4 overflow-hidden text-sm border rounded-lg shadow-md bg-base-200 gap-px grid grid-cols-7 shadow-base-month00/20">
|
||||
<For each={getDateArray(year(), month()).tage}>
|
||||
{(day) =>
|
||||
<Show when={day.enabled}
|
||||
fallback={
|
||||
<div class="bg-white">
|
||||
<button type="button" class="flex items-center justify-center w-full mx-auto size-10 text-base-500 text-gray-400"
|
||||
>
|
||||
<time datetime="#_">{day.value}</time>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
>
|
||||
<div class="bg-amber-100">
|
||||
<button type="button" class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">{day.value}</time>
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-4 overflow-hidden text-sm border rounded-lg shadow-md bg-base-200 gap-px grid grid-cols-7 shadow-base-500/20">
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">29</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">30</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">29</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">31</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">1</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">2</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">3</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">4</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">5</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">6</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">7</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">8</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">9</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">10</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">11</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">12</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto font-medium text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">13</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-white bg-blue-600 size-10 hover:bg-blue-700"
|
||||
>
|
||||
<time datetime="#_">14</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">15</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">16</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">17</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">18</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">19</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">20</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">21</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">22</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">23</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">24</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">25</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">26</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">27</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">28</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">29</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">30</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">31</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">1</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">2</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">3</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">4</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">5</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">6</time>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
||||
>
|
||||
<time datetime="#_">7</time>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4">
|
||||
<h2 class="flex-auto text-sm font-medium text-black">August 2024</h2>
|
||||
<h2 class="flex-auto text-sm font-medium text-black">{getDateArray(year(), month()).monat} {getDateArray(year(), month()).jahr}</h2>
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
class="flex flex-none hover:border-blue-500 items-center rounded-full hover:bg-blue-600 hover:text-white border justify-center p-1.5 text-base-500"
|
||||
onclick={onclickPrevMonth}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -376,7 +121,9 @@ export function CalendarComponent() {
|
|||
<button
|
||||
type="button"
|
||||
class="flex flex-none hover:border-blue-500 items-center rounded-full hover:bg-blue-600 hover:text-white border justify-center p-1.5 text-base-500"
|
||||
onclick={onclickNextMonth}
|
||||
>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
|
|||
Loading…
Reference in New Issue