diff --git a/src/component/calendar.astro b/src/component/calendar.astro
new file mode 100644
index 0000000..84c6731
--- /dev/null
+++ b/src/component/calendar.astro
@@ -0,0 +1,24 @@
+<div id="calendar"/>
+
+<script>
+import { Calendar } from '@fullcalendar/core';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import listPlugin from '@fullcalendar/list';
+import interactionPlugin from '@fullcalendar/interaction';
+import scrollgridPlugin from '@fullcalendar/scrollgrid';
+import resourcePlugin from '@fullcalendar/resource';
+
+let calendarEl = document.getElementById('calendar')!;
+let calendar = new Calendar(calendarEl, {
+  plugins: [ dayGridPlugin, listPlugin, interactionPlugin, scrollgridPlugin, resourcePlugin ],
+  initialView: 'dayGridMonth',
+  headerToolbar: {
+    left: 'prev,next today',
+    center: 'title',
+    right: 'dayGridMonth,timeGridWeek,listWeek'
+  },
+  
+});
+calendar.render();
+
+</script>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b7c3386..84781af 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,10 +1,11 @@
 ---
 import "../styles/global.css"
 import Layout from "../component/core/layout.astro"
-import Editor from "../component/editor.astro"
+import Calendar from "../component/calendar.astro"
 ---
 
 
+
 <Layout>
-    
+    <Calendar />
 </Layout>
\ No newline at end of file