tp-elements/tp-date-picker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add support for marking calendar events as dots on the day circles.

Browse Source
This commit is contained in:
trading_peter 2025-01-13 00:37:09 +01:00
parent f4505cc916
commit fd011d239f
2 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@tp/tp-date-picker",
"version": "2.0.2",
"version": "2.1.0",
"description": "",
"main": "tp-date-picker.js",
"scripts": {

42
tp-date-picker.js
View File

@ -114,6 +114,27 @@ class TpDatePicker extends FormElement(LitElement) {
.pointer {
cursor: pointer;
}
.event-dots {
display: flex;
gap: 4px;
justify-content: center;
position: absolute;
bottom: 8px;
left: 0;
right: 0;
}
.event-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--tp-datepicker-event-dot-color, #666);
}
div[part~="date"] {
position: relative;
}
`
];
}
@ -159,8 +180,20 @@ class TpDatePicker extends FormElement(LitElement) {
${curMonth.map(d => {
const matchesValue = this.equalDate(d, value);
const isToday = this.equalDate(d, today);
const eventCount = this.countEventsForDate(d);
return html`
<div .date=${d} part="date ${d.getMonth() !== month ? 'filler' : 'of-month'}"><div class="number" part="number ${matchesValue ? 'selected' : ''} ${isToday ? 'today' : ''} ${d.getMonth() === month ? 'of-month' : ''}">${d.getDate()}</div></div>
<div .date=${d} part="date ${d.getMonth() !== month ? 'filler' : 'of-month'}">
<div class="number" part="number ${matchesValue ? 'selected' : ''} ${isToday ? 'today' : ''} ${d.getMonth() === month ? 'of-month' : ''}">
${d.getDate()}
${eventCount > 0 ? html`
<div class="event-dots">
<div class="event-dot" part="event-dot"></div>
${eventCount > 1 ? html`<div class="event-dot" part="event-dot"></div>` : ''}
</div>
` : ''}
</div>
</div>
`
})}
</div>
@ -183,6 +216,7 @@ class TpDatePicker extends FormElement(LitElement) {
yearsForward: { type: Number },
yearsBackwards: { type: Number },
showYearSelector: { type: Boolean },
events: { type: Array },
};
}
@ -206,6 +240,7 @@ class TpDatePicker extends FormElement(LitElement) {
this.year = this.today.getFullYear();
this.yearsForward = 10;
this.yearsBackwards = 100;
this.events = [];
this.dayNames = [
'Mo',
@ -355,6 +390,11 @@ class TpDatePicker extends FormElement(LitElement) {
}
}
}
countEventsForDate(date) {
if (!Array.isArray(this.events)) return 0;
return this.events.filter(event => this.equalDate(event, date)).length;
}
}
window.customElements.define('tp-date-picker', TpDatePicker);