EventCalendar

EventCalendar เป็น component ปฏิทินขั้นสูงสำหรับแสดง event ที่รองรับ event ยาวต่อเนื่องหลายวัน/สัปดาห์/เดือน คล้าย Google Calendar พร้อม responsive design สำหรับ mobile

คุณสมบัติ

• 📅 Spanning Events - แสดง event ยาวต่อเนื่องเป็น bar ข้ามหลายวัน/สัปดาห์/เดือน
• 📊 3 มุมมอง - Month, Week และ Day views
• 📱 Mobile Friendly - Tap เพื่อเปิด modal ดูรายละเอียดวัน
• 🔗 API Integration - โหลด event จาก API endpoint
• 🔄 ResponseHandler - คลิก event สามารถส่งผ่าน ResponseHandler
• 🌐 i18n - รองรับ ไทย/English
• 🌓 Dark Mode - รองรับ dark mode อัตโนมัติ

การติดตั้ง

CSS

<link rel="stylesheet" href="css/event-calendar.css">

JavaScript

<script src="Now/js/EventCalendar.js"></script>

การใช้งานพื้นฐาน

1. HTML Declarative

<!-- ปฏิทินพื้นฐาน -->
<div data-event-calendar
     data-view="month"
     data-locale="th">
</div>

<!-- โหลด event จาก API -->
<div data-event-calendar
     data-api="/api/events.php"
     data-view="month"
     data-locale="th"
     data-views="month,week,day"
     data-show-view-switcher="true">
</div>

2. JavaScript API

// สร้าง instance
const calendar = EventCalendar.create('#my-calendar', {
  defaultView: 'month',
  locale: 'th',
  onDateClick: (date, instance) => {
    console.log('Clicked:', date);
  },
  onEventClick: (event, instance) => {
    console.log('Event:', event);
  }
});

// เพิ่ม events
EventCalendar.setEvents(calendar, [
  {
    id: 'evt-1',
    title: 'ประชุมทีม',
    start: '2025-12-09T09:00:00',
    end: '2025-12-09T11:00:00',
    color: '#4285F4'
  },
  {
    id: 'evt-2',
    title: 'ลาพักผ่อน',
    start: '2025-12-20',
    end: '2025-12-27',
    color: '#4CAF50',
    allDay: true
  }
]);

Data Attributes

รูปแบบข้อมูล Event

{
  "id": "evt-001",
  "title": "ประชุมทีม",
  "start": "2025-12-09T09:00:00",
  "end": "2025-12-09T11:00:00",
  "allDay": false,
  "color": "#4285F4",
  "description": "รายละเอียด",
  "location": "ห้องประชุม A"
}

API Response Format

{
  "success": true,
  "data": [
    {
      "id": "evt-001",
      "title": "Holiday Trip",
      "start": "2025-12-20",
      "end": "2025-12-27",
      "allDay": true,
      "color": "#4CAF50"
    }
  ]
}

JavaScript API Methods

การจัดการ Events

// เพิ่ม event
EventCalendar.addEvent(calendar, {
  title: 'New Event',
  start: new Date(),
  end: new Date(Date.now() + 86400000),
  color: '#E91E63'
});

// ลบ event
EventCalendar.removeEvent(calendar, 'event-id');

// อัปเดต event
EventCalendar.updateEvent(calendar, 'event-id', { title: 'Updated' });

// ตั้งค่า events ทั้งหมด
EventCalendar.setEvents(calendar, eventsArray);

// ดึง events
const events = EventCalendar.getEvents(calendar);

// refresh จาก API
EventCalendar.refreshEvents(calendar);

Navigation

// ไปยังวันนี้
EventCalendar.goToToday(calendar);

// เปลี่ยนมุมมอง
EventCalendar.changeView(calendar, 'week');

// navigate
EventCalendar.navigate(calendar, 1);   // next
EventCalendar.navigate(calendar, -1);  // prev

Destroy

EventCalendar.destroy(calendar);

Custom Events

// คลิกวันที่
document.addEventListener('eventcalendar:dateClick', (e) => {
  console.log('Date:', e.detail.date);
});

// คลิก event
document.addEventListener('eventcalendar:eventClick', (e) => {
  console.log('Event:', e.detail.event);
});

// Navigate
document.addEventListener('eventcalendar:navigate', (e) => {
  console.log('Date:', e.detail.date);
});

// เปลี่ยนมุมมอง
document.addEventListener('eventcalendar:viewChange', (e) => {
  console.log('View:', e.detail.view);
});

ResponseHandler Integration

คลิก event สามารถเรียก API และประมวลผลผ่าน ResponseHandler:

<div data-event-calendar
     data-api="/api/events.php"
     data-on-event-click-api="/api/events/{id}">
</div>

API Response ตัวอย่าง:

{
  "success": true,
  "actions": [
    {
      "type": "modal-show",
      "template": "event-detail",
      "data": { "id": "evt-001", "title": "Team Meeting" }
    }
  ]
}

Spanning Events Algorithm

EventCalendar แบ่ง event ยาวออกเป็น segment ทีละสัปดาห์:

Week: Dec 1-7
┌───┬───┬───┬───┬───┬───┬───┐
│ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │
│░░░░░░░░░░░ Event A ░░░░░░▸│  ← continues →
│   │▓▓▓▓▓ B ▓▓▓│   │   │   │
│   │   │   │ C │+2 │   │   │  ← overflow
└───┴───┴───┴───┴───┴───┴───┘

การปรับแต่ง CSS

:root {
  --ec-primary: #E91E63;
  --ec-today-bg: #fce4ec;
  --ec-event-height: 24px;
  --ec-day-height: 150px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --ec-bg: #1e1e1e;
    --ec-text: #e8eaed;
  }
}

ตัวอย่างการใช้งาน

ดูตัวอย่างได้ที่: /examples/event-calendar/index.html

Related

• CalendarManager - ปฏิทินพื้นฐาน
• Modal - Modal component
• ResponseHandler - API response handler