Erzeugung eines generischen Kalenders mittels SolidJS.
This commit is contained in:
Marco Kittel
parent
a2867e5110
commit
f8e8cdb463
543
src/Calendar.tsx
543
src/Calendar.tsx
|
|
@ -1,400 +1,147 @@
|
||||||
export function CalendarComponent() {
|
import { For, createSignal, Show } from 'solid-js';
|
||||||
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>
|
|
||||||
</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">
|
function getDateArray(year: number, month: number) {
|
||||||
<div class="bg-white">
|
//Das bedeutet Montag im englischen Wochenformat.
|
||||||
<button
|
const startTagDerWoche = 1;
|
||||||
type="button"
|
const offsetZumEnglischenSonntag = (7 - startTagDerWoche);
|
||||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
const wochenTagDesErsten = (new Date(year, month, 1).getDay() + offsetZumEnglischenSonntag) % 7;
|
||||||
>
|
const wochenTage = ['So', "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
|
||||||
<time datetime="#_">29</time>
|
const monatsNamen = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
|
||||||
</button>
|
const wochenTageNachAnfangsTag = [];
|
||||||
</div>
|
for (let i = startTagDerWoche; i < startTagDerWoche + 7; i++) {
|
||||||
<div class="bg-white">
|
|
||||||
<button
|
wochenTageNachAnfangsTag.push(wochenTage[i % 7]);
|
||||||
type="button"
|
}
|
||||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
let tage = [];
|
||||||
>
|
//Ist der erste im Monat der Starttag meiner Woche
|
||||||
<time datetime="#_">30</time>
|
if (wochenTagDesErsten == 0) {
|
||||||
</button>
|
} else {
|
||||||
</div>
|
const vorMonatTage = new Date(year, month, 0).getDate();
|
||||||
<div class="bg-white">
|
for (let i = wochenTagDesErsten - 1; i >= 0; i--) {
|
||||||
<button
|
const tagObj = { "value": vorMonatTage - i, "enabled": false }
|
||||||
type="button"
|
tage.push(tagObj);
|
||||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
}
|
||||||
>
|
}
|
||||||
<time datetime="#_">29</time>
|
for (let i = 1; i <= new Date(year, month + 1, 0).getDate(); i++) {
|
||||||
</button>
|
const tagObj = { "value": i, "enabled": true }
|
||||||
</div>
|
tage.push(tagObj);
|
||||||
<div class="bg-white">
|
}
|
||||||
<button
|
let nextDay = 1;
|
||||||
type="button"
|
for (let i = tage.length; i < 42; i++) {
|
||||||
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
const tagObj = { "value": nextDay, "enabled": false }
|
||||||
>
|
tage.push(tagObj);
|
||||||
<time datetime="#_">31</time>
|
nextDay++;
|
||||||
</button>
|
}
|
||||||
</div>
|
return { "wochenTage": wochenTageNachAnfangsTag, "tage": tage, "monat": monatsNamen[month], "jahr": year }
|
||||||
<div class="bg-white">
|
}
|
||||||
<button
|
|
||||||
type="button"
|
export function CalendarComponent() {
|
||||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
const [month, setMonth] = createSignal(0);
|
||||||
>
|
const [year, setYear] = createSignal(2025);
|
||||||
<time datetime="#_">1</time>
|
const weekdays = getDateArray(year(), month()).wochenTage;
|
||||||
</button>
|
|
||||||
</div>
|
let onclickNextMonth = () => {
|
||||||
<div class="bg-white">
|
if (month() >= 11) {
|
||||||
<button
|
setMonth(0);
|
||||||
type="button"
|
setYear(year() + 1);
|
||||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
return;
|
||||||
>
|
}
|
||||||
<time datetime="#_">2</time>
|
setMonth(month() + 1);
|
||||||
</button>
|
};
|
||||||
</div>
|
|
||||||
<div class="bg-white">
|
let onclickPrevMonth = () => {
|
||||||
<button
|
if (month() <= 0) {
|
||||||
type="button"
|
setMonth(11);
|
||||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
setYear(year() - 1);
|
||||||
>
|
return;
|
||||||
<time datetime="#_">3</time>
|
}
|
||||||
</button>
|
setMonth(month() - 1);
|
||||||
</div>
|
};
|
||||||
<div class="bg-white">
|
|
||||||
<button
|
return (
|
||||||
type="button"
|
<div class="w-full max-w-sm mx-auto">
|
||||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
<div class="text-center grid grid-cols-7">
|
||||||
>
|
<For each={weekdays}>
|
||||||
<time datetime="#_">4</time>
|
{(day) => <div>{day}</div>}
|
||||||
</button>
|
</For>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-white">
|
<div
|
||||||
<button
|
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">
|
||||||
type="button"
|
<For each={getDateArray(year(), month()).tage}>
|
||||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
{(day) =>
|
||||||
>
|
<Show when={day.enabled}
|
||||||
<time datetime="#_">5</time>
|
fallback={
|
||||||
</button>
|
<div class="bg-white">
|
||||||
</div>
|
<button type="button" class="flex items-center justify-center w-full mx-auto size-10 text-base-500 text-gray-400"
|
||||||
<div class="bg-white">
|
>
|
||||||
<button
|
<time datetime="#_">{day.value}</time>
|
||||||
type="button"
|
</button>
|
||||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
</div>
|
||||||
>
|
}
|
||||||
<time datetime="#_">6</time>
|
|
||||||
</button>
|
|
||||||
</div>
|
>
|
||||||
<div class="bg-white">
|
<div class="bg-amber-100">
|
||||||
<button
|
<button type="button" class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
|
||||||
type="button"
|
>
|
||||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
<time datetime="#_">{day.value}</time>
|
||||||
>
|
</button>
|
||||||
<time datetime="#_">7</time>
|
</div>
|
||||||
</button>
|
</Show>
|
||||||
</div>
|
}
|
||||||
<div class="bg-white">
|
</For>
|
||||||
<button
|
</div>
|
||||||
type="button"
|
|
||||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
|
||||||
>
|
<div class="flex items-center mt-4">
|
||||||
<time datetime="#_">8</time>
|
<h2 class="flex-auto text-sm font-medium text-black">{getDateArray(year(), month()).monat} {getDateArray(year(), month()).jahr}</h2>
|
||||||
</button>
|
<div class="flex items-center gap-1">
|
||||||
</div>
|
<button
|
||||||
<div class="bg-white">
|
type="button"
|
||||||
<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"
|
||||||
type="button"
|
onclick={onclickPrevMonth}
|
||||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
>
|
||||||
>
|
<svg
|
||||||
<time datetime="#_">9</time>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
</button>
|
viewBox="0 0 24 24"
|
||||||
</div>
|
fill="none"
|
||||||
<div class="bg-white">
|
stroke="currentColor"
|
||||||
<button
|
stroke-width="2"
|
||||||
type="button"
|
stroke-linecap="round"
|
||||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
stroke-linejoin="round"
|
||||||
>
|
class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-narrow-left size-4"
|
||||||
<time datetime="#_">10</time>
|
>
|
||||||
</button>
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
</div>
|
<path d="M5 12l14 0"></path>
|
||||||
<div class="bg-white">
|
<path d="M5 12l4 4"></path>
|
||||||
<button
|
<path d="M5 12l4 -4"></path>
|
||||||
type="button"
|
</svg>
|
||||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
</button>
|
||||||
>
|
<button
|
||||||
<time datetime="#_">11</time>
|
type="button"
|
||||||
</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"
|
||||||
</div>
|
onclick={onclickNextMonth}
|
||||||
<div class="bg-white">
|
>
|
||||||
<button
|
|
||||||
type="button"
|
<svg
|
||||||
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
viewBox="0 0 24 24"
|
||||||
<time datetime="#_">12</time>
|
fill="none"
|
||||||
</button>
|
stroke="currentColor"
|
||||||
</div>
|
stroke-width="2"
|
||||||
<div class="bg-white">
|
stroke-linecap="round"
|
||||||
<button
|
stroke-linejoin="round"
|
||||||
type="button"
|
class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-narrow-right size-4"
|
||||||
class="flex items-center justify-center w-full mx-auto font-medium text-black size-10 hover:text-blue-600"
|
>
|
||||||
>
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<time datetime="#_">13</time>
|
<path d="M5 12l14 0"></path>
|
||||||
</button>
|
<path d="M15 16l4 -4"></path>
|
||||||
</div>
|
<path d="M15 8l4 4"></path>
|
||||||
<div class="bg-white">
|
</svg>
|
||||||
<button
|
</button>
|
||||||
type="button"
|
</div>
|
||||||
class="flex items-center justify-center w-full mx-auto text-white bg-blue-600 size-10 hover:bg-blue-700"
|
</div>
|
||||||
>
|
</div >
|
||||||
<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>
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-narrow-left size-4"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<path d="M5 12l14 0"></path>
|
|
||||||
<path d="M5 12l4 4"></path>
|
|
||||||
<path d="M5 12l4 -4"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-narrow-right size-4"
|
|
||||||
>
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<path d="M5 12l14 0"></path>
|
|
||||||
<path d="M15 16l4 -4"></path>
|
|
||||||
<path d="M15 8l4 4"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue