change calendar view in 3 weeks

kalug · Nov 2, 2024 · 1a85c0f · 1a85c0f
1 parent ecebfb2
commit 1a85c0f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
@@ -10,16 +10,22 @@ export default function Calendar() {
         headerToolbar={{
           left: '',
           center: 'title'
+	  //right: 'dayGridWeek,dayGridDay' // user can switch between the two
         }}
 	googleCalendarApiKey='AIzaSyCuWMvbJMh8InLaE1Qk8-bHUjJbm8iYvPU'
 	events={{
 	    googleCalendarId:'9bdrfj0lhcdisp5r9duptff06c@group.calendar.google.com'
 	}}
-        initialView="dayGridMonth"
-        dayMaxEvents={true} // 日付枠内に表示できるイベント数を制限
-        businessHours={true} // 土日をグレーアウト
-        fixedWeekCount={false} // 週数を固定しない⇒月の週数が変わる
-        height={'90vh'} // カレンダーの高さを制限
+        //initialView="dayGridMonth"
+	initialView="dayGridWeek"
+  views= {{
+    dayGridWeek: {
+      type: 'dayGrid',
+      duration: { weeks: 3 }
+    }
+  }}
+        //fixedWeekCount={3}
+        height={'50vh'} // カレンダーの高さを制限
         // 日本語化
         //locale={jaLocale}
         // イベントの表示形式

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -97,7 +97,7 @@ const description = '由一群熱愛 Linux / open source 的高雄人所組成
     {
       recentPosts.length > 0 && (
         <section id="recent-posts">
-          <h2>Recent Posts</h2>
+          <h2>Posts - 活動預告兼共筆</h2>
           <ul>
             {recentPosts.map(
               ({ data, slug }, index) =>
@@ -114,6 +114,7 @@ const description = '由一群熱愛 Linux / open source 的高雄人所組成
       )
     }
 
+
     <div class="all-posts-btn-wrapper">
       <LinkButton href="/posts/">
         All Posts
@@ -124,7 +125,11 @@ const description = '由一群熱愛 Linux / open source 的高雄人所組成
         </svg>
       </LinkButton>
     </div>
-    <Calendar client:load />
+
+    <section>
+      <Calendar client:load />
+    </section>
+
   </main>
 
   <Footer />