Merge branch 'update/calendar' of github-ren:YSHgroup/vue3-fullcalend…

…ar-bootstrap

src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { RouterView } from "vue-router";
 import SideNav from "./components/SideNav.vue";
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import { useCalendarStore } from "./stores/calendar";
 
 const date = ref(new Date())

src/components/EventModal.vue

@@ -1,36 +1,54 @@
 <script setup lang="ts">
-import { useCalendarStore } from '@/stores/calendar';
 import { storeToRefs } from 'pinia';
+import { addHours, format } from "date-fns";
+import { useCalendarStore } from '@/stores/calendar';
 import { computed, ref, watch } from 'vue';
 
 const calendarStore = useCalendarStore()
-const { modal, getAddedEvents } = storeToRefs(calendarStore)
-const { setModal, setAddedEvents } = calendarStore
+const { modal, selectedSlot } = storeToRefs(calendarStore)
+const { setModal, setAddedEvents, setSelectedSlot } = calendarStore
 
 const eventTitle = ref('')
-const startDateTime = ref<string | Date>( new Date() )
-const endDateTime = ref<string | Date>( new Date() )
+const startDateTime = ref<string | Date | null>( new Date() )
+const endDateTime = ref<string | Date | null>( addHours(new Date(), 1) )
 const contentText = ref('')
-
 const titleState = computed(() => (eventTitle.value?.length > 2 ? true : false))
 
 const addEvent = () => {
   setAddedEvents({
     title: eventTitle.value,
-    startDataTime: startDateTime.value,
-    endDataTime: endDateTime.value,
+    start: startDateTime.value,
+    end: endDateTime.value,
     contentText: contentText.value
   }, 'add')
+  
+  closeModal()
+}
+
+const closeModal = () => {
+  modal.value && setModal()
+  selectedSlot.value.modal && setSelectedSlot({
+    modal: false,
+    times: {
+      start: null,
+      end: null
+    }
+  })
+  eventTitle.value = ''
 }
 
-watch(getAddedEvents.value, () => {
-  console.log('--->>>>', getAddedEvents.value)
+watch(() => selectedSlot.value.modal, () => {
+  if(selectedSlot.value.modal) {
+    startDateTime.value = selectedSlot.value.times.start
+    endDateTime.value = selectedSlot.value.times.end
+  }
+  console.log('close--->', startDateTime.value, selectedSlot.value.times.start)
 })
 </script>
 
 <template>
   <teleport to="body">
-    <div class="modal-wrapper" v-if="modal">
+    <div class="modal-wrapper" v-if="modal || selectedSlot.modal">
       <BCard 
         header="Calendar Modal" 
         header-tag="header" 
@@ -69,7 +87,7 @@ watch(getAddedEvents.value, () => {
         <template v-slot:footer>
           <div tag="footer" class="d-flex justify-content-end">
             <BButtonGroup>
-              <BButton variant="primary" @click="setModal()">Close</BButton>
+              <BButton variant="primary" @click="closeModal()">Close</BButton>
               <BButton variant="success" @click="addEvent()">Add</BButton>
             </BButtonGroup>
           </div>

src/interfaces/eventTypes.ts

@@ -1,7 +1,15 @@
 export interface CustomEvent {
   id?: string | number
   title: string
-  startDataTime: string | Date
-  endDataTime: string | Date
+  start: string | Date | null
+  end: string | Date | null
   contentText?: string
+}
+export interface Timeslot {
+  start: string | Date | null
+  end: string | Date | null
+}
+export interface SelectedSlot {
+  modal: boolean
+  times: Timeslot
 }

src/interfaces/index.ts

@@ -1,4 +1,4 @@
 import type * as FullCalendar from './builtInTypes'
-import type { CustomEvent } from './eventTypes'
+import type { CustomEvent, SelectedSlot } from './eventTypes'
 
-export type { FullCalendar, CustomEvent }
+export type { FullCalendar, CustomEvent, SelectedSlot }

src/services/calendarOptionService.ts

@@ -9,7 +9,7 @@ import enLocale from '@fullcalendar/core/locales/en-gb'
 import type { FullCalendar as F } from '@/interfaces'
 
 import events from './eventService'
-import { handleDateClick } from './functions/calendarManipulator'
+import { handleDateClick, handleSelect } from './functions/calendarManipulator'
 
 import { useCalendarStore } from '@/stores/calendar'
 
@@ -34,6 +34,16 @@ export const calendarOptions: F.CalendarOptions = {
 	locale: enLocale, // 'fr'
 	nowIndicator: true,
 	navLinks: true,
+	weekNumbers: true,
+	weekText: 'W-	',
+	selectable: true,
+	dayMaxEvents: true,
+	editable: true,
+	// eventStartEditable: true,
+
+	eventRemove(arg) {
+		console.log('remove---', arg)
+	},
 	headerToolbar: {
 		start:
 			'dayGridYear,dayGridMonth,timeGridWeek,timeGridDay,timeGridFive listWeek,listMonth',
@@ -50,9 +60,10 @@ export const calendarOptions: F.CalendarOptions = {
 		timeGridFive: {
 			type: 'timeGrid',
 			duration: {
-				days: 5,
+				days: 7,
 			},
-			buttonText: 'Fivedays',
+			buttonText: 'Work days',
+			weekends: false
 		},
 		timeGridDay: {
 			titleFormat: {
@@ -79,7 +90,10 @@ export const calendarOptions: F.CalendarOptions = {
 			click: () => openModal()
 		}
 	},
+
 	dateClick: handleDateClick,
+	select: handleSelect,
+
 	initialEvents: 'https://fullcalendar.io/api/demo-feeds/events.json',
 
 	eventSources: [

src/services/eventService.ts

@@ -18,7 +18,6 @@ export const fetchEvent = async ({
 
 	const year = format(range[0], 'yyyy')
 	const eventsForYear = await getData(`${baseURL}${year}/${country}`)
-	console.log('date--', eventsForYear)
 
 	return eventsForYear.map((event: Record<string, string | boolean>) => {
 		event['id'] = event.name

src/services/functions/calendarManipulator.ts

@@ -1,5 +1,17 @@
 import type { FullCalendar as F } from '@/interfaces'
+import { useCalendarStore } from '@/stores/calendar'
 
 export const handleDateClick = (arg: F.DateClickArg) => {
-	alert('Date click! ' + arg.dateStr)
+	console.log('Date click! ', arg)
+}
+
+export const handleSelect = (selectionInfo: any) => {
+	const calendarStore = useCalendarStore()
+	calendarStore.setSelectedSlot({
+		modal: true,
+		times: {
+			start: selectionInfo.start,
+			end: selectionInfo.end
+		}
+	})
 }

src/stores/calendar.ts

@@ -1,39 +1,63 @@
 import { ref, computed } from 'vue'
 import { createPinia, defineStore } from 'pinia'
-import type { CustomEvent } from '@/interfaces'
+import type { CustomEvent, SelectedSlot } from '@/interfaces'
 
 export const pinia = createPinia()
 
 export const useCalendarStore = defineStore('calendar', () => {
-  const calendarApi = ref()
-  const modal = ref(false)
-  const addedEvents = ref<CustomEvent[]>([])
+	const calendarApi = ref()
+	const modal = ref(false)
+	const addedEvents = ref<CustomEvent[]>([])
+	const selectedSlot = ref<SelectedSlot>({modal: false, times: {
+		start: null,
+		end: null
+	}})
 
-  const getCalendarApi = computed(() => calendarApi.value)
-  const getAddedEvents = computed(() => addedEvents.value)
+	const getCalendarApi = computed(() => calendarApi.value)
+	const getAddedEvents = computed(() => addedEvents.value)
+	const getSelectedSlot = computed(() => selectedSlot.value)
 
-  const setCalendarApi = (value: any) => {
-    calendarApi.value = value
-  }
-  const setModal = () => {
-    modal.value = !modal.value
-  }
-  const setAddedEvents = (value: CustomEvent | string | number , type: string) => {
-    const id = addedEvents.value.length
-    const  newEvent = { ...value as CustomEvent, id }
+	const setCalendarApi = (value: any) => {
+		calendarApi.value = value
+	}
+	const setModal = () => {
+		modal.value = !modal.value
+	}
+	const setAddedEvents = (
+		value: CustomEvent | string | number,
+		type: string
+	) => {
+		const id = addedEvents.value.length
+		const newEvent = { ...(value as CustomEvent), id, backgroundColor: 'chocolate' }
 
-    switch (type) {
-      case 'add':
-        addedEvents.value.push(newEvent as CustomEvent)
-        break
-      case 'delete':
-        delete addedEvents.value[value as any]
-        break
-      default:
-        break
-    }
-    addedEvents.value.push()
-  }
+		switch (type) {
+			case 'add':
+				addedEvents.value.push(newEvent as CustomEvent)
+				calendarApi.value && calendarApi.value.addEvent(newEvent)
+				break
+			case 'delete':
+				delete addedEvents.value[value as any]
+				break
+			default:
+				break
+		}
+		addedEvents.value.push()
+	}
+	const setSelectedSlot = (value: any) => {
+		selectedSlot.value = value
+	}
 
-  return { calendarApi, modal, addedEvents, getCalendarApi, getAddedEvents, setCalendarApi, setModal, setAddedEvents }
-})
+	return {
+		calendarApi,
+		modal,
+		selectedSlot,
+		addedEvents,
+		getCalendarApi,
+		getAddedEvents,
+		getSelectedSlot,
+		setCalendarApi,
+		setModal,
+		setAddedEvents,
+		setSelectedSlot,
+	}
+})

vite.config.ts.timestamp-1715048838469-db35c321929b4.mjs

@@ -0,0 +1,36 @@
+// vite.config.ts
+import { fileURLToPath, URL } from "node:url";
+import { defineConfig } from "file:///F:/Git%20hub%20work/Collaborator/vue3-fullcalendar-bootstrap/node_modules/vite/dist/node/index.js";
+import vue from "file:///F:/Git%20hub%20work/Collaborator/vue3-fullcalendar-bootstrap/node_modules/@vitejs/plugin-vue/dist/index.mjs";
+import vueJsx from "file:///F:/Git%20hub%20work/Collaborator/vue3-fullcalendar-bootstrap/node_modules/@vitejs/plugin-vue-jsx/dist/index.mjs";
+import Components from "file:///F:/Git%20hub%20work/Collaborator/vue3-fullcalendar-bootstrap/node_modules/unplugin-vue-components/dist/vite.js";
+import { BootstrapVueNextResolver } from "file:///F:/Git%20hub%20work/Collaborator/vue3-fullcalendar-bootstrap/node_modules/unplugin-vue-components/dist/resolvers.js";
+import sass from "file:///F:/Git%20hub%20work/Collaborator/vue3-fullcalendar-bootstrap/node_modules/sass/sass.node.mjs";
+var __vite_injected_original_import_meta_url = "file:///F:/Git%20hub%20work/Collaborator/vue3-fullcalendar-bootstrap/vite.config.ts";
+var vite_config_default = defineConfig({
+  plugins: [
+    vue(),
+    vueJsx(),
+    Components({
+      resolvers: [BootstrapVueNextResolver()]
+      // Automatically register the bootstrap components globally
+    })
+  ],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", __vite_injected_original_import_meta_url))
+    }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        implementation: sass
+      }
+    }
+  },
+  base: process.env.NODE_ENV === "production" ? "/vue3-fullcalendar-bootstrap/" : "/"
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJGOlxcXFxHaXQgaHViIHdvcmtcXFxcQ29sbGFib3JhdG9yXFxcXHZ1ZTMtZnVsbGNhbGVuZGFyLWJvb3RzdHJhcFwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiRjpcXFxcR2l0IGh1YiB3b3JrXFxcXENvbGxhYm9yYXRvclxcXFx2dWUzLWZ1bGxjYWxlbmRhci1ib290c3RyYXBcXFxcdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL0Y6L0dpdCUyMGh1YiUyMHdvcmsvQ29sbGFib3JhdG9yL3Z1ZTMtZnVsbGNhbGVuZGFyLWJvb3RzdHJhcC92aXRlLmNvbmZpZy50c1wiO2ltcG9ydCB7IGZpbGVVUkxUb1BhdGgsIFVSTCB9IGZyb20gJ25vZGU6dXJsJ1xyXG5cclxuaW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IHZ1ZSBmcm9tICdAdml0ZWpzL3BsdWdpbi12dWUnXHJcbmltcG9ydCB2dWVKc3ggZnJvbSAnQHZpdGVqcy9wbHVnaW4tdnVlLWpzeCdcclxuaW1wb3J0IENvbXBvbmVudHMgZnJvbSAndW5wbHVnaW4tdnVlLWNvbXBvbmVudHMvdml0ZSdcclxuaW1wb3J0IHtCb290c3RyYXBWdWVOZXh0UmVzb2x2ZXJ9IGZyb20gJ3VucGx1Z2luLXZ1ZS1jb21wb25lbnRzL3Jlc29sdmVycydcclxuaW1wb3J0IHNhc3MgZnJvbSAnc2FzcydcclxuXHJcbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXHJcbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XHJcbiAgcGx1Z2luczogW1xyXG4gICAgdnVlKCksXHJcbiAgICB2dWVKc3goKSxcclxuICAgIENvbXBvbmVudHMoe1xyXG4gICAgICByZXNvbHZlcnM6IFtCb290c3RyYXBWdWVOZXh0UmVzb2x2ZXIoKV0gLy8gQXV0b21hdGljYWxseSByZWdpc3RlciB0aGUgYm9vdHN0cmFwIGNvbXBvbmVudHMgZ2xvYmFsbHlcclxuICAgIH0pXHJcbiAgXSxcclxuICByZXNvbHZlOiB7XHJcbiAgICBhbGlhczoge1xyXG4gICAgICAnQCc6IGZpbGVVUkxUb1BhdGgobmV3IFVSTCgnLi9zcmMnLCBpbXBvcnQubWV0YS51cmwpKVxyXG4gICAgfVxyXG4gIH0sXHJcbiAgY3NzOiB7XHJcbiAgICBwcmVwcm9jZXNzb3JPcHRpb25zOiB7XHJcbiAgICAgIHNjc3M6IHtcclxuICAgICAgICBpbXBsZW1lbnRhdGlvbjogc2FzcyxcclxuICAgICAgfVxyXG4gICAgfVxyXG4gIH0sXHJcbiAgYmFzZTogcHJvY2Vzcy5lbnYuTk9ERV9FTlYgPT09IFwicHJvZHVjdGlvblwiID8gJy92dWUzLWZ1bGxjYWxlbmRhci1ib290c3RyYXAvJyA6IFwiL1wiLFxyXG59KVxyXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXNXLFNBQVMsZUFBZSxXQUFXO0FBRXpZLFNBQVMsb0JBQW9CO0FBQzdCLE9BQU8sU0FBUztBQUNoQixPQUFPLFlBQVk7QUFDbkIsT0FBTyxnQkFBZ0I7QUFDdkIsU0FBUSxnQ0FBK0I7QUFDdkMsT0FBTyxVQUFVO0FBUDhNLElBQU0sMkNBQTJDO0FBVWhSLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVM7QUFBQSxJQUNQLElBQUk7QUFBQSxJQUNKLE9BQU87QUFBQSxJQUNQLFdBQVc7QUFBQSxNQUNULFdBQVcsQ0FBQyx5QkFBeUIsQ0FBQztBQUFBO0FBQUEsSUFDeEMsQ0FBQztBQUFBLEVBQ0g7QUFBQSxFQUNBLFNBQVM7QUFBQSxJQUNQLE9BQU87QUFBQSxNQUNMLEtBQUssY0FBYyxJQUFJLElBQUksU0FBUyx3Q0FBZSxDQUFDO0FBQUEsSUFDdEQ7QUFBQSxFQUNGO0FBQUEsRUFDQSxLQUFLO0FBQUEsSUFDSCxxQkFBcUI7QUFBQSxNQUNuQixNQUFNO0FBQUEsUUFDSixnQkFBZ0I7QUFBQSxNQUNsQjtBQUFBLElBQ0Y7QUFBQSxFQUNGO0FBQUEsRUFDQSxNQUFNLFFBQVEsSUFBSSxhQUFhLGVBQWUsa0NBQWtDO0FBQ2xGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==