날짜 편집기(달력)

import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const columns: ColumnDef[] = [
    { field: 'name', header: h('Name', '이름'), width: 160 },
    // the calendar is the default editor of date columns
    { field: 'joined', header: h('Joined', '가입일'), type: 'date', width: 140, editable: true },
    // limits: this year only, no weekends, weeks start on Monday
    { field: 'visit', header: h('Visit (weekdays, this year)', '방문일(평일, 올해)'), type: 'date', width: 200, editable: true,
      editor: { type: 'date', min: `${new Date().getFullYear()}-01-01`, max: `${new Date().getFullYear()}-12-31`, disabledDates: d => d.getDay() === 0 || d.getDay() === 6, weekStart: 1 } },
    // a text column: stored as 'YYYY-MM-DD'
    { field: 'due', header: h('Due (text)', '마감(텍스트)'), width: 140, editable: true, editor: { type: 'date' } },
  ];
  const data = makeRows(200).map(r => ({ ...r, visit: null, due: '' }));
  const grid = createGrid(ctx.host, { columns, data, locale: ctx.lang });
  grid.on('cellValueChanged', e => ctx.log(`${e.colId}: ${String(e.oldValue)} → ${String(e.newValue)}`));
  text(ctx, h('Double-click a date. ↑ ↓ move a day, PageUp / PageDown a month, Shift a year; the year and month lists jump far.',
    '날짜를 더블클릭하세요. ↑ ↓는 하루, PageUp / PageDown은 한 달, Shift는 1년씩 움직이고, 연·월 목록으로 멀리 이동합니다.'));
  return grid;
}