Merge pull request #10 from kalug/fullcalendar

add FullCalendar

README.md

@@ -185,3 +185,13 @@ Licensed under the MIT License, Copyright © 2023
 ---
 
 Made with 🤍 by [Sat Naing](https://satnaing.dev) 👨🏻‍💻 and [contributors](https://github.com/satnaing/astro-paper/graphs/contributors).
+
+
+---
+
+Changelog
+
+- add fullcalendar support
+  - https://fullcalendar.io/
+  - https://github.com/czbone/astro-calendar
+  - https://docs.simplecalendar.io/find-google-calendar-id/

package.json

@@ -15,6 +15,12 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/rss": "^4.0.7",
+    "@fullcalendar/core": "^6.1.15",
+    "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/google-calendar": "^6.1.15",
+    "@fullcalendar/react": "^6.1.15",
+    "@fullcalendar/resource": "^6.1.15",
+    "@fullcalendar/resource-timeline": "^6.1.15",
     "@giscus/react": "^3.0.0",
     "@resvg/resvg-js": "^2.6.2",
     "astro": "^4.16.3",

src/components/Calendar.tsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react'
+import FullCalendar from '@fullcalendar/react'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import googleCalendarPlugin from '@fullcalendar/google-calendar';
+//import jaLocale from '@fullcalendar/core/locales/ja'
+
+export default function Calendar() {
+  const [events, setEvents] = useState([])
+  const [holidays, setHolidays] = useState({})
+
+  const fetchHolidays = async () => {
+    try {
+      const response = await fetch('/api/holiday')
+      if (!response.ok) {
+        throw new Error('Network response was not ok')
+      }
+      const data = await response.json()
+      setHolidays(data)
+    } catch (error) {
+      console.error('Error fetching holidays:', error)
+    }
+  }
+
+  const fetchEvents = async () => {
+    try {
+      console.log('fetchEvents')
+      const response = await fetch('/api/event')
+      if (!response.ok) {
+        throw new Error('Network response was not ok')
+      }
+      const data = await response.json()
+      console.log(data)
+      setEvents(data)
+    } catch (error) {
+      console.error('Error fetching events:', error)
+    }
+  }
+
+  useEffect(() => {
+    // APIからデータ取得
+    //fetchHolidays()
+    //fetchEvents()
+  }, [])
+
+  // 日付セルのレンダリング
+  const renderDayCellContent = (dayCellContent) => {
+    // 月ビュー以外は何もしない
+    if (dayCellContent.view.type !== 'dayGridMonth') return
+
+    const dateStr = dayCellContent.date.toLocaleDateString('sv-SE')
+    const holidayName = holidays[dateStr]
+    const isHoliday = Boolean(holidayName)
+
+    return (
+      <>
+        <span className={isHoliday ? 'holiday-number' : ''}>{dayCellContent.date.getDate()}</span>
+        {isHoliday ? <span className="holiday-label">{holidayName}</span> : null}
+      </>
+    )
+  }
+
+  return (
+    <div className="demo-app-main">
+      <FullCalendar
+        plugins={[dayGridPlugin,googleCalendarPlugin]}
+        headerToolbar={{
+          left: '',
+          center: 'title'
+        }}
+	googleCalendarApiKey='AIzaSyCuWMvbJMh8InLaE1Qk8-bHUjJbm8iYvPU'
+	events={{
+	    googleCalendarId:'9bdrfj0lhcdisp5r9duptff06c@group.calendar.google.com'
+	}}
+        initialView="dayGridMonth"
+        //initialView="listDayFormat"
+        dayMaxEvents={true} // 日付枠内に表示できるイベント数を制限
+        businessHours={true} // 土日をグレーアウト
+        fixedWeekCount={false} // 週数を固定しない⇒月の週数が変わる
+        height={'90vh'} // カレンダーの高さを制限
+        // 日本語化
+        //locale={jaLocale}
+        // イベントの表示形式
+        eventDisplay={'block'} // イベントをブロック要素として表示
+        eventTimeFormat={{
+          // 時刻フォーマット'14:30'
+          hour: '2-digit',
+          minute: '2-digit',
+          meridiem: false
+        }}
+      />
+    </div>
+  )
+}

src/pages/index.astro

@@ -4,6 +4,7 @@ import Layout from "@layouts/Layout.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import LinkButton from "@components/LinkButton.astro";
+import Calendar from "@components/Calendar";
 import Hr from "@components/Hr.astro";
 import Card from "@components/Card";
 import Socials from "@components/Socials.astro";
@@ -45,7 +46,6 @@ const description = '由一群熱愛 Linux / open source 的高雄人所組成
         </svg>
         <span class="sr-only">RSS Feed</span>
       </a>
-
       <p>
 
         {description}
@@ -124,6 +124,7 @@ const description = '由一群熱愛 Linux / open source 的高雄人所組成
         </svg>
       </LinkButton>
     </div>
+    <Calendar client:load />
   </main>
 
   <Footer />