@designbasekorea/ui-wc 0.5.5 → 0.5.6

package/dist/esm/components/db-calendar.js

@@ -1 +1,675 @@
-import{createDbIcon as e,getDbComponentIconSize as t}from"./db-icons.js";import{parseISODate as a,toISODate as n}from"./date-picker-utils.js";import"./db-modal.js";import"./db-input.js";import"./db-select.js";import"./db-date-picker.js";import"./db-time-picker.js";import"./db-button.js";const s="designbase-wc-calendar",i=[{value:"meeting",label:"회의"},{value:"task",label:"업무"},{value:"reminder",label:"알림"},{value:"birthday",label:"생일"},{value:"holiday",label:"휴일"},{value:"custom",label:"기타"}],d=[{value:"#17a2b8",label:"청록"},{value:"#0d6efd",label:"파랑"},{value:"#198754",label:"초록"},{value:"#ffc107",label:"노랑"},{value:"#dc3545",label:"빨강"},{value:"#6f42c1",label:"보라"}];class DbCalendar extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.currentView="month",this.selectedDate=new Date,this._events=[],this.showEventModal=!1,this.selectedEvent=null,this.isEditing=!1,this.draggedEvent=null,this.dragOverDate=null,this.selectedDateRange={start:null,end:null},this.eventForm={title:"",description:"",startTime:"09:00",endTime:"10:00",type:"meeting",color:"#17a2b8",isAllDay:!1,location:""}}static get observedAttributes(){return["view","current-date","events","locale","show-weekends","highlight-today","show-outside-days"]}connectedCallback(){this.built||this.build(),this.readAttributes(),this.render()}attributeChangedCallback(){this.built&&(this.readAttributes(),this.render())}get locale(){return this.getAttribute("locale")||"ko-KR"}get showWeekends(){return"false"!==this.getAttribute("show-weekends")}get highlightToday(){return"false"!==this.getAttribute("highlight-today")}get showOutsideDays(){return"false"!==this.getAttribute("show-outside-days")}get events(){return this._events}set events(e){"string"!=typeof e?(this._events=Array.isArray(e)?e:[],this.setAttribute("events",JSON.stringify(this._events))):this.setAttribute("events",e)}build(){this.built=!0,this.headerEl=document.createElement("div"),this.headerEl.className=`${s}__header`,this.bodyEl=document.createElement("div"),this.bodyEl.className=`${s}__body`,this.modalEl=document.createElement("db-modal"),this.modalEl.setAttribute("size","m"),this.modalEl.addEventListener("db-close",()=>this.closeModal())}readAttributes(){this.currentView="month";const e=a(this.getAttribute("current-date"));e&&(this.selectedDate=e);const t=this.getAttribute("events");if(t)try{const e=JSON.parse(t);this._events=Array.isArray(e)?e:[]}catch{this._events=[]}else this._events=[]}isSameDate(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}eventsForDate(e){return this._events.filter(t=>{const n=a(t.date);return!!n&&this.isSameDate(n,e)})}emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}handleViewChange(e){this.currentView="month",this.emit("db-view-change",{view:e}),this.render()}shiftMonth(e){const t=new Date(this.selectedDate);t.setMonth(t.getMonth()+e),this.selectedDate=t,this.emit("db-month-change",{date:n(t)}),this.render()}shiftYear(e){const t=new Date(this.selectedDate);t.setFullYear(t.getFullYear()+e),this.selectedDate=t,this.emit("db-month-change",{date:n(t)}),this.render()}handleDateClick(e){this.selectedDate=e,this.emit("db-date-click",{date:n(e)}),!this.selectedDateRange.start||this.selectedDateRange.start&&this.selectedDateRange.end?this.selectedDateRange={start:e,end:null}:this.selectedDateRange.start&&!this.selectedDateRange.end&&(e<this.selectedDateRange.start?this.selectedDateRange={start:e,end:this.selectedDateRange.start}:this.selectedDateRange={start:this.selectedDateRange.start,end:e}),this.openAddModal(e)}handleDragStart(e,t){this.draggedEvent=e,t.dataTransfer?.setData("text/plain",e.id),t.dataTransfer?.setData("application/json",JSON.stringify(e)),t.dataTransfer&&(t.dataTransfer.effectAllowed="move")}handleDragOver(e,t){t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"),this.dragOverDate=e,this.render()}handleDragLeave(e){const t=e.relatedTarget,a=e.currentTarget;a&&t&&a.contains(t)||(this.dragOverDate=null,this.render())}handleDrop(e,t){if(t.preventDefault(),!this.draggedEvent)return;const a={...this.draggedEvent,date:n(e)};this.emit("db-event-edit",{event:a}),this.draggedEvent=null,this.dragOverDate=null,this.render()}handleDragEnd(){this.draggedEvent=null,this.dragOverDate=null,this.render()}handleEventClick(e,t){t.stopPropagation(),this.selectedEvent=e,this.isEditing=!0;const n=a(e.date);n&&(this.selectedDate=n),this.eventForm={title:e.title,description:e.description||"",startTime:e.startTime||"09:00",endTime:e.endTime||"10:00",type:e.type,color:e.color||"#17a2b8",isAllDay:e.isAllDay||!1,location:e.location||""},this.emit("db-event-click",{event:e}),this.showEventModal=!0,this.render()}openAddModal(e){this.selectedDate=e,this.selectedEvent=null,this.isEditing=!1,this.eventForm={title:"",description:"",startTime:"09:00",endTime:"10:00",type:"meeting",color:"#17a2b8",isAllDay:!1,location:""},this.showEventModal=!0,this.render()}closeModal(){this.showEventModal=!1,this.selectedEvent=null,this.isEditing=!1,this.render()}saveEvent(){if(!this.eventForm.title.trim())return void window.alert("제목을 입력해주세요.");const e={title:this.eventForm.title.trim(),description:this.eventForm.description,date:n(this.selectedDate),startTime:this.eventForm.startTime,endTime:this.eventForm.endTime,type:this.eventForm.type,color:this.eventForm.color,isAllDay:this.eventForm.isAllDay,location:this.eventForm.location};if(this.isEditing&&this.selectedEvent){const t={...this.selectedEvent,...e};this.emit("db-event-edit",{event:t})}else this.emit("db-event-add",{event:e});this.closeModal()}deleteEvent(){this.selectedEvent&&window.confirm("정말로 이 일정을 삭제하시겠습니까?")&&(this.emit("db-event-delete",{eventId:this.selectedEvent.id}),this.closeModal())}renderHeader(){if(!this.headerEl)return;this.headerEl.replaceChildren();const a=document.createElement("div");a.className=`${s}__navigation`;const n=t("m"),i=document.createElement("button");i.type="button",i.className=`${s}__nav-button`,i.setAttribute("aria-label","이전"),i.appendChild(e("chevron-left",n)),i.addEventListener("click",()=>{this.shiftMonth(-1)});const d=document.createElement("div");d.className=`${s}__title`,d.textContent=this.selectedDate.toLocaleDateString(this.locale,{year:"numeric",month:"long"});const l=document.createElement("button");l.type="button",l.className=`${s}__nav-button`,l.setAttribute("aria-label","다음"),l.appendChild(e("chevron-right",n)),l.addEventListener("click",()=>{this.shiftMonth(1)}),a.append(i,d,l),this.headerEl.appendChild(a)}renderMonthView(){const e=document.createElement("div");e.className=`${s}__month-view`;const t=document.createElement("div");t.className=`${s}__weekdays`,["일","월","화","수","목","금","토"].forEach(e=>{const a=document.createElement("div");a.className=`${s}__weekday`,a.textContent=e,t.appendChild(a)}),e.appendChild(t);const a=document.createElement("div");a.className=`${s}__days`;const n=this.selectedDate.getFullYear(),i=this.selectedDate.getMonth(),d=new Date(n,i,1),l=new Date(d);l.setDate(l.getDate()-d.getDay());const r=new Date;for(let e=0;e<42;e+=1){const t=new Date(l);t.setDate(l.getDate()+e);const n=t.getMonth()===i;if(!this.showOutsideDays&&!n)continue;const d=0===t.getDay()||6===t.getDay();if(!this.showWeekends&&d)continue;const o=document.createElement("div"),c=this.selectedDateRange.start&&this.selectedDateRange.end&&t>=this.selectedDateRange.start&&t<=this.selectedDateRange.end,h=this.selectedDateRange.start&&t.toDateString()===this.selectedDateRange.start.toDateString(),m=this.selectedDateRange.end&&t.toDateString()===this.selectedDateRange.end.toDateString(),u=Boolean(c&&!h&&!m);o.className=[`${s}__day`,n&&`${s}__day--current-month`,this.highlightToday&&t.toDateString()===r.toDateString()&&`${s}__day--today`,this.isSameDate(t,this.selectedDate)&&`${s}__day--selected`,h&&`${s}__day--selected--start`,m&&`${s}__day--selected--end`,u&&`${s}__day--selected--middle`,!this.showWeekends&&d&&`${s}__day--weekend`].filter(Boolean).join(" "),o.addEventListener("click",()=>this.handleDateClick(t));const v=document.createElement("span");v.className=`${s}__day-number`,v.textContent=String(t.getDate()),o.appendChild(v);const p=this.eventsForDate(t);if(p.length){const e=document.createElement("div");if(e.className=`${s}__day-events`,p.slice(0,2).forEach(t=>{const a=document.createElement("div");a.className=[`${s}__event-bar`,`${s}__event-bar--${t.type}`].filter(Boolean).join(" "),t.color&&(a.style.backgroundColor=t.color),this.draggedEvent?.id===t.id&&a.classList.add(`${s}__event-bar--dragging`),a.title=t.title,a.draggable=!0;const n=document.createElement("span");n.className=`${s}__event-title`,n.textContent=t.title,a.appendChild(n),a.addEventListener("click",e=>this.handleEventClick(t,e)),a.addEventListener("dragstart",e=>this.handleDragStart(t,e)),a.addEventListener("dragend",()=>this.handleDragEnd()),e.appendChild(a)}),p.length>2){const t=document.createElement("div");t.className=`${s}__more-events`,t.textContent=`+${p.length-2} more`,e.appendChild(t)}o.appendChild(e)}const g=document.createElement("div");g.className=[`${s}__drop-zone`,this.dragOverDate&&this.isSameDate(this.dragOverDate,t)&&`${s}__drop-zone--active`].filter(Boolean).join(" "),g.addEventListener("dragover",e=>this.handleDragOver(t,e)),g.addEventListener("dragleave",e=>this.handleDragLeave(e)),g.addEventListener("drop",e=>this.handleDrop(t,e)),o.appendChild(g),a.appendChild(o)}return e.appendChild(a),e}renderYearView(){const e=document.createElement("div");e.className=`${s}__year-view`;const t=this.selectedDate.getFullYear();for(let n=0;n<12;n+=1){const i=new Date(t,n,1),d=this._events.filter(e=>{const s=a(e.date);return s&&s.getFullYear()===t&&s.getMonth()===n}),l=document.createElement("div");l.className=`${s}__year-month`,l.addEventListener("click",()=>{this.selectedDate=i,this.handleViewChange("month")});const r=document.createElement("h3");if(r.className=`${s}__year-month-title`,r.textContent=i.toLocaleDateString(this.locale,{month:"long"}),l.appendChild(r),d.length){const e=document.createElement("div");if(e.className=`${s}__year-month-events`,d.slice(0,4).forEach(t=>{const a=document.createElement("span");a.className=[`${s}__year-event`,`${s}__year-event--${t.type}`].join(" "),t.color&&(a.style.backgroundColor=t.color),e.appendChild(a)}),d.length>4){const t=document.createElement("span");t.className=`${s}__year-more-events`,t.textContent=`+${d.length-4} more`,e.appendChild(t)}l.appendChild(e)}e.appendChild(l)}return e}renderWeekView(){const e=document.createElement("div");e.className=`${s}__week-view`;const t=new Date,a=new Date(this.selectedDate);a.setDate(this.selectedDate.getDate()-this.selectedDate.getDay());const n=document.createElement("div");n.className=`${s}__week-header`;const i=document.createElement("div");i.className=`${s}__time-column-header`,n.appendChild(i);for(let e=0;e<7;e+=1){const i=new Date(a);i.setDate(a.getDate()+e);const d=document.createElement("div");d.className=[`${s}__week-day-header`,i.toDateString()===t.toDateString()&&`${s}__week-day-header--today`].filter(Boolean).join(" ");const l=document.createElement("span");l.className=`${s}__week-day-name`,l.textContent=i.toLocaleDateString(this.locale,{weekday:"short"});const r=document.createElement("span");r.className=`${s}__week-day-number`,r.textContent=String(i.getDate()),d.append(l,r),n.appendChild(d)}e.appendChild(n);const d=document.createElement("div");d.className=`${s}__week-grid`;const l=document.createElement("div");l.className=`${s}__week-time-column`;for(let e=6;e<=22;e+=1){const t=document.createElement("div");t.className=`${s}__time-slot`;const a=document.createElement("span");a.className=`${s}__time-label`,a.textContent=`${String(e).padStart(2,"0")}:00`,t.appendChild(a),l.appendChild(t)}d.appendChild(l);const r=document.createElement("div");r.className=`${s}__week-columns`;for(let e=0;e<7;e+=1){const t=new Date(a);t.setDate(a.getDate()+e);const n=document.createElement("div");n.className=`${s}__week-column`;for(let e=6;e<=22;e+=1){const a=document.createElement("div");a.className=`${s}__week-cell`,a.title=`${t.toLocaleDateString()} ${String(e).padStart(2,"0")}:00`,a.addEventListener("click",()=>{this.selectedDate=new Date(t),this.eventForm.startTime=`${String(e).padStart(2,"0")}:00`,this.eventForm.endTime=`${String(e+1).padStart(2,"0")}:00`,this.openAddModal(this.selectedDate)}),n.appendChild(a)}this.eventsForDate(t).forEach(e=>{if(!e.startTime)return;const[t,a]=e.startTime.split(":").map(Number),i=.8*(60*(t-6)+(a||0)),d=(e.endTime||e.startTime).split(":").map(Number),l=60*(d[0]||t)+(d[1]||0),r=60*t+(a||0),o=Math.max(20,48*(l-r)/60),c=document.createElement("div");c.className=[`${s}__week-event`,`${s}__week-event--${e.type}`].filter(Boolean).join(" "),c.textContent=e.title,c.title=e.title,c.style.backgroundColor=e.color||"#17a2b8",c.style.top=`${i}px`,c.style.height=`${o}px`,c.addEventListener("click",t=>this.handleEventClick(e,t)),n.appendChild(c)}),r.appendChild(n)}return d.appendChild(r),e.appendChild(d),e}renderModal(){if(!this.modalEl)return;if(this.modalEl.replaceChildren(),!this.showEventModal)return void this.modalEl.removeAttribute("open");this.modalEl.setAttribute("open","true"),this.modalEl.setAttribute("title",this.isEditing?"일정 편집":"새 일정 추가");const e=document.createElement("div");e.className=`${s}__event-form`;const t=document.createElement("db-input");t.setAttribute("label","제목 *"),t.setAttribute("placeholder","일정 제목을 입력하세요"),t.setAttribute("full-width",""),t.setAttribute("value",this.eventForm.title),t.addEventListener("db-input",e=>{this.eventForm.title=e.detail.value});const l=document.createElement("db-input");l.setAttribute("label","설명"),l.setAttribute("placeholder","일정 설명을 입력하세요"),l.setAttribute("full-width",""),l.setAttribute("value",this.eventForm.description),l.addEventListener("db-input",e=>{this.eventForm.description=e.detail.value});const r=document.createElement("db-date-picker");r.setAttribute("label","날짜"),r.setAttribute("full-width",""),r.setAttribute("value",n(this.selectedDate)),r.addEventListener("db-change",e=>{const t=a(e.detail.value);t&&(this.selectedDate=t)});const o=document.createElement("db-select");o.setAttribute("label","일정 타입"),o.setAttribute("full-width",""),o.setAttribute("options",JSON.stringify(i)),o.setAttribute("value",this.eventForm.type),o.addEventListener("db-change",e=>{this.eventForm.type=e.detail.value});const c=document.createElement("db-select");c.setAttribute("label","색상"),c.setAttribute("full-width",""),c.setAttribute("options",JSON.stringify(d)),c.setAttribute("value",this.eventForm.color),c.addEventListener("db-change",e=>{this.eventForm.color=e.detail.value});const h=document.createElement("db-time-picker");h.setAttribute("label","시작 시간"),h.setAttribute("full-width",""),h.setAttribute("value",this.eventForm.startTime),h.addEventListener("db-change",e=>{this.eventForm.startTime=e.detail.value});const m=document.createElement("db-time-picker");m.setAttribute("label","종료 시간"),m.setAttribute("full-width",""),m.setAttribute("value",this.eventForm.endTime),m.addEventListener("db-change",e=>{this.eventForm.endTime=e.detail.value}),e.append(t,l,r,o,c,h,m);const u=document.createElement("div");u.className="designbase-wc-modal__body",u.setAttribute("data-modal-part","body"),u.appendChild(e);const v=document.createElement("div");v.className="designbase-wc-modal__footer",v.setAttribute("data-modal-part","footer");const p=document.createElement("div");if(p.className=`${s}__modal-actions`,this.isEditing){const e=document.createElement("db-button");e.setAttribute("variant","danger"),e.textContent="삭제",e.addEventListener("click",()=>this.deleteEvent()),p.appendChild(e)}const g=document.createElement("div");g.className=`${s}__modal-buttons`;const b=document.createElement("db-button");b.setAttribute("variant","secondary"),b.textContent="취소",b.addEventListener("click",()=>this.closeModal());const E=document.createElement("db-button");E.setAttribute("variant","primary"),E.textContent=this.isEditing?"수정":"저장",E.addEventListener("click",()=>this.saveEvent()),g.append(b,E),p.appendChild(g),v.appendChild(p),this.modalEl.append(u,v)}render(){this.className=s,this.replaceChildren(),this.headerEl&&this.bodyEl&&(this.renderHeader(),this.bodyEl.replaceChildren(),this.bodyEl.appendChild(this.renderMonthView()),this.append(this.headerEl,this.bodyEl),this.renderModal(),this.showEventModal&&this.modalEl&&this.appendChild(this.modalEl))}}customElements.get("db-calendar")||customElements.define("db-calendar",DbCalendar);export{DbCalendar};
+import { createDbIcon, getDbComponentIconSize } from './db-icons.js';
+import { parseISODate, toISODate } from './date-picker-utils.js';
+import './db-modal.js';
+import './db-input.js';
+import './db-select.js';
+import './db-date-picker.js';
+import './db-time-picker.js';
+import './db-button.js';
+
+const CLASS = 'designbase-wc-calendar';
+const EVENT_TYPE_OPTIONS = [
+    { value: 'meeting', label: '회의' },
+    { value: 'task', label: '업무' },
+    { value: 'reminder', label: '알림' },
+    { value: 'birthday', label: '생일' },
+    { value: 'holiday', label: '휴일' },
+    { value: 'custom', label: '기타' },
+];
+const COLOR_OPTIONS = [
+    { value: '#17a2b8', label: '청록' },
+    { value: '#0d6efd', label: '파랑' },
+    { value: '#198754', label: '초록' },
+    { value: '#ffc107', label: '노랑' },
+    { value: '#dc3545', label: '빨강' },
+    { value: '#6f42c1', label: '보라' },
+];
+class DbCalendar extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+        this.currentView = 'month';
+        this.selectedDate = new Date();
+        this._events = [];
+        this.showEventModal = false;
+        this.selectedEvent = null;
+        this.isEditing = false;
+        this.draggedEvent = null;
+        this.dragOverDate = null;
+        this.selectedDateRange = { start: null, end: null };
+        this.eventForm = {
+            title: '',
+            description: '',
+            startTime: '09:00',
+            endTime: '10:00',
+            type: 'meeting',
+            color: '#17a2b8',
+            isAllDay: false,
+            location: '',
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'view',
+            'current-date',
+            'events',
+            'locale',
+            'show-weekends',
+            'highlight-today',
+            'show-outside-days',
+        ];
+    }
+    connectedCallback() {
+        if (!this.built)
+            this.build();
+        this.readAttributes();
+        this.render();
+    }
+    attributeChangedCallback() {
+        if (!this.built)
+            return;
+        this.readAttributes();
+        this.render();
+    }
+    get locale() {
+        return this.getAttribute('locale') || 'ko-KR';
+    }
+    get showWeekends() {
+        return this.getAttribute('show-weekends') !== 'false';
+    }
+    get highlightToday() {
+        return this.getAttribute('highlight-today') !== 'false';
+    }
+    get showOutsideDays() {
+        return this.getAttribute('show-outside-days') !== 'false';
+    }
+    get events() {
+        return this._events;
+    }
+    set events(value) {
+        if (typeof value === 'string') {
+            this.setAttribute('events', value);
+            return;
+        }
+        this._events = Array.isArray(value) ? value : [];
+        this.setAttribute('events', JSON.stringify(this._events));
+    }
+    build() {
+        this.built = true;
+        this.headerEl = document.createElement('div');
+        this.headerEl.className = `${CLASS}__header`;
+        this.bodyEl = document.createElement('div');
+        this.bodyEl.className = `${CLASS}__body`;
+        this.modalEl = document.createElement('db-modal');
+        this.modalEl.setAttribute('size', 'm');
+        this.modalEl.addEventListener('db-close', () => this.closeModal());
+    }
+    readAttributes() {
+        this.currentView = 'month';
+        const current = parseISODate(this.getAttribute('current-date'));
+        if (current)
+            this.selectedDate = current;
+        const rawEvents = this.getAttribute('events');
+        if (rawEvents) {
+            try {
+                const parsed = JSON.parse(rawEvents);
+                this._events = Array.isArray(parsed) ? parsed : [];
+            }
+            catch {
+                this._events = [];
+            }
+        }
+        else {
+            this._events = [];
+        }
+    }
+    isSameDate(a, b) {
+        return (a.getFullYear() === b.getFullYear() &&
+            a.getMonth() === b.getMonth() &&
+            a.getDate() === b.getDate());
+    }
+    eventsForDate(date) {
+        return this._events.filter((event) => {
+            const eventDate = parseISODate(event.date);
+            return eventDate ? this.isSameDate(eventDate, date) : false;
+        });
+    }
+    emit(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+    handleViewChange(view) {
+        this.currentView = 'month';
+        this.emit('db-view-change', { view });
+        this.render();
+    }
+    shiftMonth(delta) {
+        const next = new Date(this.selectedDate);
+        next.setMonth(next.getMonth() + delta);
+        this.selectedDate = next;
+        this.emit('db-month-change', { date: toISODate(next) });
+        this.render();
+    }
+    shiftYear(delta) {
+        const next = new Date(this.selectedDate);
+        next.setFullYear(next.getFullYear() + delta);
+        this.selectedDate = next;
+        this.emit('db-month-change', { date: toISODate(next) });
+        this.render();
+    }
+    handleDateClick(date) {
+        this.selectedDate = date;
+        this.emit('db-date-click', { date: toISODate(date) });
+        if (!this.selectedDateRange.start || (this.selectedDateRange.start && this.selectedDateRange.end)) {
+            this.selectedDateRange = { start: date, end: null };
+        }
+        else if (this.selectedDateRange.start && !this.selectedDateRange.end) {
+            if (date < this.selectedDateRange.start) {
+                this.selectedDateRange = { start: date, end: this.selectedDateRange.start };
+            }
+            else {
+                this.selectedDateRange = { start: this.selectedDateRange.start, end: date };
+            }
+        }
+        this.openAddModal(date);
+    }
+    handleDragStart(event, dragEvent) {
+        this.draggedEvent = event;
+        dragEvent.dataTransfer?.setData('text/plain', event.id);
+        dragEvent.dataTransfer?.setData('application/json', JSON.stringify(event));
+        if (dragEvent.dataTransfer)
+            dragEvent.dataTransfer.effectAllowed = 'move';
+    }
+    handleDragOver(date, dragEvent) {
+        dragEvent.preventDefault();
+        if (dragEvent.dataTransfer)
+            dragEvent.dataTransfer.dropEffect = 'move';
+        this.dragOverDate = date;
+        this.render();
+    }
+    handleDragLeave(dragEvent) {
+        const related = dragEvent.relatedTarget;
+        const current = dragEvent.currentTarget;
+        if (current && related && current.contains(related))
+            return;
+        this.dragOverDate = null;
+        this.render();
+    }
+    handleDrop(date, dragEvent) {
+        dragEvent.preventDefault();
+        if (!this.draggedEvent)
+            return;
+        const updated = { ...this.draggedEvent, date: toISODate(date) };
+        this.emit('db-event-edit', { event: updated });
+        this.draggedEvent = null;
+        this.dragOverDate = null;
+        this.render();
+    }
+    handleDragEnd() {
+        this.draggedEvent = null;
+        this.dragOverDate = null;
+        this.render();
+    }
+    handleEventClick(event, e) {
+        e.stopPropagation();
+        this.selectedEvent = event;
+        this.isEditing = true;
+        const eventDate = parseISODate(event.date);
+        if (eventDate)
+            this.selectedDate = eventDate;
+        this.eventForm = {
+            title: event.title,
+            description: event.description || '',
+            startTime: event.startTime || '09:00',
+            endTime: event.endTime || '10:00',
+            type: event.type,
+            color: event.color || '#17a2b8',
+            isAllDay: event.isAllDay || false,
+            location: event.location || '',
+        };
+        this.emit('db-event-click', { event });
+        this.showEventModal = true;
+        this.render();
+    }
+    openAddModal(date) {
+        this.selectedDate = date;
+        this.selectedEvent = null;
+        this.isEditing = false;
+        this.eventForm = {
+            title: '',
+            description: '',
+            startTime: '09:00',
+            endTime: '10:00',
+            type: 'meeting',
+            color: '#17a2b8',
+            isAllDay: false,
+            location: '',
+        };
+        this.showEventModal = true;
+        this.render();
+    }
+    closeModal() {
+        this.showEventModal = false;
+        this.selectedEvent = null;
+        this.isEditing = false;
+        this.render();
+    }
+    saveEvent() {
+        if (!this.eventForm.title.trim()) {
+            window.alert('제목을 입력해주세요.');
+            return;
+        }
+        const payload = {
+            title: this.eventForm.title.trim(),
+            description: this.eventForm.description,
+            date: toISODate(this.selectedDate),
+            startTime: this.eventForm.startTime,
+            endTime: this.eventForm.endTime,
+            type: this.eventForm.type,
+            color: this.eventForm.color,
+            isAllDay: this.eventForm.isAllDay,
+            location: this.eventForm.location,
+        };
+        if (this.isEditing && this.selectedEvent) {
+            const updated = { ...this.selectedEvent, ...payload };
+            this.emit('db-event-edit', { event: updated });
+        }
+        else {
+            this.emit('db-event-add', { event: payload });
+        }
+        this.closeModal();
+    }
+    deleteEvent() {
+        if (!this.selectedEvent)
+            return;
+        if (!window.confirm('정말로 이 일정을 삭제하시겠습니까?'))
+            return;
+        this.emit('db-event-delete', { eventId: this.selectedEvent.id });
+        this.closeModal();
+    }
+    renderHeader() {
+        if (!this.headerEl)
+            return;
+        this.headerEl.replaceChildren();
+        const nav = document.createElement('div');
+        nav.className = `${CLASS}__navigation`;
+        const iconSize = getDbComponentIconSize('m');
+        const prev = document.createElement('button');
+        prev.type = 'button';
+        prev.className = `${CLASS}__nav-button`;
+        prev.setAttribute('aria-label', '이전');
+        prev.appendChild(createDbIcon('chevron-left', iconSize));
+        prev.addEventListener('click', () => {
+            this.shiftMonth(-1);
+        });
+        const title = document.createElement('div');
+        title.className = `${CLASS}__title`;
+        title.textContent = this.selectedDate.toLocaleDateString(this.locale, {
+            year: 'numeric',
+            month: 'long',
+        });
+        const next = document.createElement('button');
+        next.type = 'button';
+        next.className = `${CLASS}__nav-button`;
+        next.setAttribute('aria-label', '다음');
+        next.appendChild(createDbIcon('chevron-right', iconSize));
+        next.addEventListener('click', () => {
+            this.shiftMonth(1);
+        });
+        nav.append(prev, title, next);
+        this.headerEl.appendChild(nav);
+    }
+    renderMonthView() {
+        const wrap = document.createElement('div');
+        wrap.className = `${CLASS}__month-view`;
+        const weekdays = document.createElement('div');
+        weekdays.className = `${CLASS}__weekdays`;
+        ['일', '월', '화', '수', '목', '금', '토'].forEach((day) => {
+            const cell = document.createElement('div');
+            cell.className = `${CLASS}__weekday`;
+            cell.textContent = day;
+            weekdays.appendChild(cell);
+        });
+        wrap.appendChild(weekdays);
+        const grid = document.createElement('div');
+        grid.className = `${CLASS}__days`;
+        const year = this.selectedDate.getFullYear();
+        const month = this.selectedDate.getMonth();
+        const firstDay = new Date(year, month, 1);
+        const startDate = new Date(firstDay);
+        startDate.setDate(startDate.getDate() - firstDay.getDay());
+        const today = new Date();
+        for (let i = 0; i < 42; i += 1) {
+            const date = new Date(startDate);
+            date.setDate(startDate.getDate() + i);
+            const isCurrentMonth = date.getMonth() === month;
+            if (!this.showOutsideDays && !isCurrentMonth)
+                continue;
+            const isWeekend = date.getDay() === 0 || date.getDay() === 6;
+            if (!this.showWeekends && isWeekend)
+                continue;
+            const dayEl = document.createElement('div');
+            const isInRange = this.selectedDateRange.start &&
+                this.selectedDateRange.end &&
+                date >= this.selectedDateRange.start &&
+                date <= this.selectedDateRange.end;
+            const isRangeStart = this.selectedDateRange.start &&
+                date.toDateString() === this.selectedDateRange.start.toDateString();
+            const isRangeEnd = this.selectedDateRange.end &&
+                date.toDateString() === this.selectedDateRange.end.toDateString();
+            const isRangeMiddle = Boolean(isInRange && !isRangeStart && !isRangeEnd);
+            dayEl.className = [
+                `${CLASS}__day`,
+                isCurrentMonth && `${CLASS}__day--current-month`,
+                this.highlightToday && date.toDateString() === today.toDateString() && `${CLASS}__day--today`,
+                this.isSameDate(date, this.selectedDate) && `${CLASS}__day--selected`,
+                isRangeStart && `${CLASS}__day--selected--start`,
+                isRangeEnd && `${CLASS}__day--selected--end`,
+                isRangeMiddle && `${CLASS}__day--selected--middle`,
+                !this.showWeekends && isWeekend && `${CLASS}__day--weekend`,
+            ]
+                .filter(Boolean)
+                .join(' ');
+            dayEl.addEventListener('click', () => this.handleDateClick(date));
+            const num = document.createElement('span');
+            num.className = `${CLASS}__day-number`;
+            num.textContent = String(date.getDate());
+            dayEl.appendChild(num);
+            const dayEvents = this.eventsForDate(date);
+            if (dayEvents.length) {
+                const eventsWrap = document.createElement('div');
+                eventsWrap.className = `${CLASS}__day-events`;
+                dayEvents.slice(0, 2).forEach((event) => {
+                    const bar = document.createElement('div');
+                    bar.className = [`${CLASS}__event-bar`, `${CLASS}__event-bar--${event.type}`]
+                        .filter(Boolean)
+                        .join(' ');
+                    if (event.color)
+                        bar.style.backgroundColor = event.color;
+                    if (this.draggedEvent?.id === event.id)
+                        bar.classList.add(`${CLASS}__event-bar--dragging`);
+                    bar.title = event.title;
+                    bar.draggable = true;
+                    const barTitle = document.createElement('span');
+                    barTitle.className = `${CLASS}__event-title`;
+                    barTitle.textContent = event.title;
+                    bar.appendChild(barTitle);
+                    bar.addEventListener('click', (e) => this.handleEventClick(event, e));
+                    bar.addEventListener('dragstart', (e) => this.handleDragStart(event, e));
+                    bar.addEventListener('dragend', () => this.handleDragEnd());
+                    eventsWrap.appendChild(bar);
+                });
+                if (dayEvents.length > 2) {
+                    const more = document.createElement('div');
+                    more.className = `${CLASS}__more-events`;
+                    more.textContent = `+${dayEvents.length - 2} more`;
+                    eventsWrap.appendChild(more);
+                }
+                dayEl.appendChild(eventsWrap);
+            }
+            const dropZone = document.createElement('div');
+            dropZone.className = [
+                `${CLASS}__drop-zone`,
+                this.dragOverDate && this.isSameDate(this.dragOverDate, date) && `${CLASS}__drop-zone--active`,
+            ]
+                .filter(Boolean)
+                .join(' ');
+            dropZone.addEventListener('dragover', (e) => this.handleDragOver(date, e));
+            dropZone.addEventListener('dragleave', (e) => this.handleDragLeave(e));
+            dropZone.addEventListener('drop', (e) => this.handleDrop(date, e));
+            dayEl.appendChild(dropZone);
+            grid.appendChild(dayEl);
+        }
+        wrap.appendChild(grid);
+        return wrap;
+    }
+    renderYearView() {
+        const wrap = document.createElement('div');
+        wrap.className = `${CLASS}__year-view`;
+        const year = this.selectedDate.getFullYear();
+        for (let month = 0; month < 12; month += 1) {
+            const monthDate = new Date(year, month, 1);
+            const monthEvents = this._events.filter((event) => {
+                const d = parseISODate(event.date);
+                return d && d.getFullYear() === year && d.getMonth() === month;
+            });
+            const cell = document.createElement('div');
+            cell.className = `${CLASS}__year-month`;
+            cell.addEventListener('click', () => {
+                this.selectedDate = monthDate;
+                this.handleViewChange('month');
+            });
+            const label = document.createElement('h3');
+            label.className = `${CLASS}__year-month-title`;
+            label.textContent = monthDate.toLocaleDateString(this.locale, { month: 'long' });
+            cell.appendChild(label);
+            if (monthEvents.length) {
+                const dots = document.createElement('div');
+                dots.className = `${CLASS}__year-month-events`;
+                monthEvents.slice(0, 4).forEach((event) => {
+                    const dot = document.createElement('span');
+                    dot.className = [`${CLASS}__year-event`, `${CLASS}__year-event--${event.type}`].join(' ');
+                    if (event.color)
+                        dot.style.backgroundColor = event.color;
+                    dots.appendChild(dot);
+                });
+                if (monthEvents.length > 4) {
+                    const more = document.createElement('span');
+                    more.className = `${CLASS}__year-more-events`;
+                    more.textContent = `+${monthEvents.length - 4} more`;
+                    dots.appendChild(more);
+                }
+                cell.appendChild(dots);
+            }
+            wrap.appendChild(cell);
+        }
+        return wrap;
+    }
+    renderWeekView() {
+        const wrap = document.createElement('div');
+        wrap.className = `${CLASS}__week-view`;
+        const today = new Date();
+        const startOfWeek = new Date(this.selectedDate);
+        startOfWeek.setDate(this.selectedDate.getDate() - this.selectedDate.getDay());
+        const header = document.createElement('div');
+        header.className = `${CLASS}__week-header`;
+        const timeSpacer = document.createElement('div');
+        timeSpacer.className = `${CLASS}__time-column-header`;
+        header.appendChild(timeSpacer);
+        for (let i = 0; i < 7; i += 1) {
+            const date = new Date(startOfWeek);
+            date.setDate(startOfWeek.getDate() + i);
+            const dayHeader = document.createElement('div');
+            dayHeader.className = [
+                `${CLASS}__week-day-header`,
+                date.toDateString() === today.toDateString() && `${CLASS}__week-day-header--today`,
+            ]
+                .filter(Boolean)
+                .join(' ');
+            const name = document.createElement('span');
+            name.className = `${CLASS}__week-day-name`;
+            name.textContent = date.toLocaleDateString(this.locale, { weekday: 'short' });
+            const number = document.createElement('span');
+            number.className = `${CLASS}__week-day-number`;
+            number.textContent = String(date.getDate());
+            dayHeader.append(name, number);
+            header.appendChild(dayHeader);
+        }
+        wrap.appendChild(header);
+        const grid = document.createElement('div');
+        grid.className = `${CLASS}__week-grid`;
+        const timeCol = document.createElement('div');
+        timeCol.className = `${CLASS}__week-time-column`;
+        for (let hour = 6; hour <= 22; hour += 1) {
+            const slot = document.createElement('div');
+            slot.className = `${CLASS}__time-slot`;
+            const label = document.createElement('span');
+            label.className = `${CLASS}__time-label`;
+            label.textContent = `${String(hour).padStart(2, '0')}:00`;
+            slot.appendChild(label);
+            timeCol.appendChild(slot);
+        }
+        grid.appendChild(timeCol);
+        const daysCol = document.createElement('div');
+        daysCol.className = `${CLASS}__week-columns`;
+        for (let i = 0; i < 7; i += 1) {
+            const date = new Date(startOfWeek);
+            date.setDate(startOfWeek.getDate() + i);
+            const dayCol = document.createElement('div');
+            dayCol.className = `${CLASS}__week-column`;
+            for (let hour = 6; hour <= 22; hour += 1) {
+                const cell = document.createElement('div');
+                cell.className = `${CLASS}__week-cell`;
+                cell.title = `${date.toLocaleDateString()} ${String(hour).padStart(2, '0')}:00`;
+                cell.addEventListener('click', () => {
+                    this.selectedDate = new Date(date);
+                    this.eventForm.startTime = `${String(hour).padStart(2, '0')}:00`;
+                    this.eventForm.endTime = `${String(hour + 1).padStart(2, '0')}:00`;
+                    this.openAddModal(this.selectedDate);
+                });
+                dayCol.appendChild(cell);
+            }
+            this.eventsForDate(date).forEach((event) => {
+                if (!event.startTime)
+                    return;
+                const [h, m] = event.startTime.split(':').map(Number);
+                const top = ((h - 6) * 60 + (m || 0)) * (48 / 60);
+                const endParts = (event.endTime || event.startTime).split(':').map(Number);
+                const endMinutes = (endParts[0] || h) * 60 + (endParts[1] || 0);
+                const startMinutes = h * 60 + (m || 0);
+                const height = Math.max(20, ((endMinutes - startMinutes) * 48) / 60);
+                const eventEl = document.createElement('div');
+                eventEl.className = [`${CLASS}__week-event`, `${CLASS}__week-event--${event.type}`]
+                    .filter(Boolean)
+                    .join(' ');
+                eventEl.textContent = event.title;
+                eventEl.title = event.title;
+                eventEl.style.backgroundColor = event.color || '#17a2b8';
+                eventEl.style.top = `${top}px`;
+                eventEl.style.height = `${height}px`;
+                eventEl.addEventListener('click', (e) => this.handleEventClick(event, e));
+                dayCol.appendChild(eventEl);
+            });
+            daysCol.appendChild(dayCol);
+        }
+        grid.appendChild(daysCol);
+        wrap.appendChild(grid);
+        return wrap;
+    }
+    renderModal() {
+        if (!this.modalEl)
+            return;
+        this.modalEl.replaceChildren();
+        if (!this.showEventModal) {
+            this.modalEl.removeAttribute('open');
+            return;
+        }
+        this.modalEl.setAttribute('open', 'true');
+        this.modalEl.setAttribute('title', this.isEditing ? '일정 편집' : '새 일정 추가');
+        const form = document.createElement('div');
+        form.className = `${CLASS}__event-form`;
+        const titleInput = document.createElement('db-input');
+        titleInput.setAttribute('label', '제목 *');
+        titleInput.setAttribute('placeholder', '일정 제목을 입력하세요');
+        titleInput.setAttribute('full-width', '');
+        titleInput.setAttribute('value', this.eventForm.title);
+        titleInput.addEventListener('db-input', ((e) => {
+            this.eventForm.title = e.detail.value;
+        }));
+        const descInput = document.createElement('db-input');
+        descInput.setAttribute('label', '설명');
+        descInput.setAttribute('placeholder', '일정 설명을 입력하세요');
+        descInput.setAttribute('full-width', '');
+        descInput.setAttribute('value', this.eventForm.description);
+        descInput.addEventListener('db-input', ((e) => {
+            this.eventForm.description = e.detail.value;
+        }));
+        const datePicker = document.createElement('db-date-picker');
+        datePicker.setAttribute('label', '날짜');
+        datePicker.setAttribute('full-width', '');
+        datePicker.setAttribute('value', toISODate(this.selectedDate));
+        datePicker.addEventListener('db-change', ((e) => {
+            const parsed = parseISODate(e.detail.value);
+            if (parsed)
+                this.selectedDate = parsed;
+        }));
+        const typeSelect = document.createElement('db-select');
+        typeSelect.setAttribute('label', '일정 타입');
+        typeSelect.setAttribute('full-width', '');
+        typeSelect.setAttribute('options', JSON.stringify(EVENT_TYPE_OPTIONS));
+        typeSelect.setAttribute('value', this.eventForm.type);
+        typeSelect.addEventListener('db-change', ((e) => {
+            this.eventForm.type = e.detail.value;
+        }));
+        const colorSelect = document.createElement('db-select');
+        colorSelect.setAttribute('label', '색상');
+        colorSelect.setAttribute('full-width', '');
+        colorSelect.setAttribute('options', JSON.stringify(COLOR_OPTIONS));
+        colorSelect.setAttribute('value', this.eventForm.color);
+        colorSelect.addEventListener('db-change', ((e) => {
+            this.eventForm.color = e.detail.value;
+        }));
+        const startPicker = document.createElement('db-time-picker');
+        startPicker.setAttribute('label', '시작 시간');
+        startPicker.setAttribute('full-width', '');
+        startPicker.setAttribute('value', this.eventForm.startTime);
+        startPicker.addEventListener('db-change', ((e) => {
+            this.eventForm.startTime = e.detail.value;
+        }));
+        const endPicker = document.createElement('db-time-picker');
+        endPicker.setAttribute('label', '종료 시간');
+        endPicker.setAttribute('full-width', '');
+        endPicker.setAttribute('value', this.eventForm.endTime);
+        endPicker.addEventListener('db-change', ((e) => {
+            this.eventForm.endTime = e.detail.value;
+        }));
+        form.append(titleInput, descInput, datePicker, typeSelect, colorSelect, startPicker, endPicker);
+        const body = document.createElement('div');
+        body.className = 'designbase-wc-modal__body';
+        body.setAttribute('data-modal-part', 'body');
+        body.appendChild(form);
+        const footer = document.createElement('div');
+        footer.className = 'designbase-wc-modal__footer';
+        footer.setAttribute('data-modal-part', 'footer');
+        const actions = document.createElement('div');
+        actions.className = `${CLASS}__modal-actions`;
+        if (this.isEditing) {
+            const deleteBtn = document.createElement('db-button');
+            deleteBtn.setAttribute('variant', 'danger');
+            deleteBtn.textContent = '삭제';
+            deleteBtn.addEventListener('click', () => this.deleteEvent());
+            actions.appendChild(deleteBtn);
+        }
+        const buttons = document.createElement('div');
+        buttons.className = `${CLASS}__modal-buttons`;
+        const cancelBtn = document.createElement('db-button');
+        cancelBtn.setAttribute('variant', 'secondary');
+        cancelBtn.textContent = '취소';
+        cancelBtn.addEventListener('click', () => this.closeModal());
+        const saveBtn = document.createElement('db-button');
+        saveBtn.setAttribute('variant', 'primary');
+        saveBtn.textContent = this.isEditing ? '수정' : '저장';
+        saveBtn.addEventListener('click', () => this.saveEvent());
+        buttons.append(cancelBtn, saveBtn);
+        actions.appendChild(buttons);
+        footer.appendChild(actions);
+        this.modalEl.append(body, footer);
+    }
+    render() {
+        this.className = CLASS;
+        this.replaceChildren();
+        if (!this.headerEl || !this.bodyEl)
+            return;
+        this.renderHeader();
+        this.bodyEl.replaceChildren();
+        this.bodyEl.appendChild(this.renderMonthView());
+        this.append(this.headerEl, this.bodyEl);
+        this.renderModal();
+        if (this.showEventModal && this.modalEl)
+            this.appendChild(this.modalEl);
+    }
+}
+if (!customElements.get('db-calendar')) {
+    customElements.define('db-calendar', DbCalendar);
+}
+
+export { DbCalendar };