Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 10 Pull requests Projects Releases 7 Packages Wiki Activity Actions

date(range) select event

Browse source
This commit is contained in:
Julian Krauser 2024-10-25 17:21:09 +02:00
parent d98afa259e
commit 5c2865a9e5
4 changed files with 34 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
package-lock.json generated
View file

@ -12,6 +12,7 @@
"@fullcalendar/core": "^6.1.15",
"@fullcalendar/daygrid": "^6.1.15",
"@fullcalendar/interaction": "^6.1.15",
"@fullcalendar/timegrid": "^6.1.15",
"@fullcalendar/vue3": "^6.1.15",
"@headlessui/vue": "^1.7.13",
"@heroicons/vue": "^2.1.5",
@ -2440,6 +2441,18 @@
"@fullcalendar/core": "~6.1.15"
}
},
"node_modules/@fullcalendar/timegrid": {
"version": "6.1.15",
"resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.15.tgz",
"integrity": "sha512-61ORr3A148RtxQ2FNG7JKvacyA/TEVZ7z6I+3E9Oeu3dqTf6M928bFcpehRTIK6zIA6Yifs7BeWHgOE9dFnpbw==",
"license": "MIT",
"dependencies": {
"@fullcalendar/daygrid": "~6.1.15"
},
"peerDependencies": {
"@fullcalendar/core": "~6.1.15"
}
},
"node_modules/@fullcalendar/vue3": {
"version": "6.1.15",
"resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-6.1.15.tgz",

1
package.json
View file

@ -27,6 +27,7 @@
"@fullcalendar/core": "^6.1.15",
"@fullcalendar/daygrid": "^6.1.15",
"@fullcalendar/interaction": "^6.1.15",
"@fullcalendar/timegrid": "^6.1.15",
"@fullcalendar/vue3": "^6.1.15",
"@headlessui/vue": "^1.7.13",
"@heroicons/vue": "^2.1.5",

3
src/main.css
View file

@ -98,3 +98,6 @@ textarea[disabled] {
.fc-button-active {
@apply !bg-red-500 !border-red-500;
}
.fc-toolbar {
@apply flex-wrap;
}

22
src/views/admin/club/calendar/Calendar.vue
View file

@ -20,6 +20,7 @@ import MainTemplate from "@/templates/Main.vue";
import FullCalendar from "@fullcalendar/vue3";
import deLocale from "@fullcalendar/core/locales/de";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
</script>
@ -29,25 +30,36 @@ export default defineComponent({
return {
calendarOptions: {
locale: deLocale,
plugins: [dayGridPlugin, interactionPlugin],
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
headerToolbar: {
left: "today",
left: "dayGridMonth,timeGridWeek",
center: "title",
right: "prev,next",
right: "prev,today,next",
},
eventDisplay: "block",
weekends: true,
editable: true,
selectable: true,
selectMirror: true,
selectMirror: false,
dayMaxEvents: true,
weekNumbers: true,
displayEventTime: false,
displayEventTime: true,
nowIndicator: true,
weekText: "KW",
select: this.select,
eventClick: this.eventClick,
},
};
},
methods: {
select(e: any) {
console.log("s", e);
},
eventClick(e: any) {
console.log("ec", e);
},
},
});
/**