design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-30 11:24:38 +00:00
parent aae4427281
commit 7d1e06701b
2 changed files with 195 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
ts_web/elements/dees-input-datepicker.demo.ts
View File

@ -298,6 +298,73 @@ export const demoFunc = () => html`
</dees-panel>
</dees-demowrapper>
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
// Generate sample events for the calendar
const today = new Date();
const currentMonth = today.getMonth();
const currentYear = today.getFullYear();
const sampleEvents = [
// Current week events
{
date: `${currentYear}-${(currentMonth + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`,
title: "Team Meeting",
type: "info" as const,
count: 2
},
{
date: `${currentYear}-${(currentMonth + 1).toString().padStart(2, '0')}-${(today.getDate() + 1).toString().padStart(2, '0')}`,
title: "Project Deadline",
type: "warning" as const
},
{
date: `${currentYear}-${(currentMonth + 1).toString().padStart(2, '0')}-${(today.getDate() + 2).toString().padStart(2, '0')}`,
title: "Release Day",
type: "success" as const
},
{
date: `${currentYear}-${(currentMonth + 1).toString().padStart(2, '0')}-${(today.getDate() + 5).toString().padStart(2, '0')}`,
title: "Urgent Fix Required",
type: "error" as const
},
// Multiple events on one day
{
date: `${currentYear}-${(currentMonth + 1).toString().padStart(2, '0')}-${(today.getDate() + 7).toString().padStart(2, '0')}`,
title: "Multiple Events Today",
type: "info" as const,
count: 5
},
// Next month event
{
date: `${currentYear}-${(currentMonth + 2).toString().padStart(2, '0')}-15`,
title: "Future Planning Session",
type: "info" as const
}
];
const picker = elementArg.querySelector('dees-input-datepicker');
if (picker) {
picker.events = sampleEvents;
console.log('Calendar events loaded:', sampleEvents);
}
}}>
<dees-panel .title=${'Calendar with Events'} .subtitle=${'Visual feedback for scheduled events'}>
<dees-input-datepicker
label="Event Calendar"
description="Days with colored dots have events. Hover to see details."
></dees-input-datepicker>
<div class="demo-output" style="margin-top: 16px;">
<strong>Event Legend:</strong><br>
<span style="color: #0969da;">● Info</span> |
<span style="color: #d29922;">● Warning</span> |
<span style="color: #2ea043;">● Success</span> |
<span style="color: #cf222e;">● Error</span><br>
<em>Days with more than 3 events show a count badge</em>
</div>
</dees-panel>
</dees-demowrapper>
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
// Interactive event demonstration
const picker = elementArg.querySelector('dees-input-datepicker');