mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
107 lines
2.2 KiB
Vue
107 lines
2.2 KiB
Vue
<template>
|
|
<div id="calendar" class="mb-12">
|
|
<V-full-calendar ref="fullCalendar" :options="calendarOptions" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import VFullCalendar from '@fullcalendar/vue3'
|
|
import dayGridPlugin from '@fullcalendar/daygrid'
|
|
|
|
export default {
|
|
emits: ['open-detail'],
|
|
|
|
components: {
|
|
VFullCalendar
|
|
},
|
|
|
|
props: {
|
|
events: {
|
|
required: true
|
|
},
|
|
|
|
month: {
|
|
required: true
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
calendarOptions() {
|
|
return {
|
|
plugins: [dayGridPlugin],
|
|
initialView: 'dayGridMonth',
|
|
headerToolbar: false,
|
|
locale: 'sk',
|
|
height: 650,
|
|
firstDay: 1,
|
|
dayHeaderClassNames: ['w-day-header'],
|
|
events: this.events,
|
|
eventContent: (eventInfo) => {
|
|
return { html: eventInfo.event.extendedProps.title_html }
|
|
},
|
|
eventClick: (info) => this.$emit('open-detail', info.event._def.publicId)
|
|
}
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
const currentYear = new Date().getFullYear()
|
|
this.calendarOptions.events = this.events
|
|
this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, this.month, 1))
|
|
},
|
|
|
|
watch: {
|
|
month(selectedMonth) {
|
|
const currentYear = new Date().getFullYear()
|
|
this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, selectedMonth, 1))
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="sass" scoped>
|
|
#calendar
|
|
&:deep(.w-day-header)
|
|
text-align: left
|
|
padding-left: 10px
|
|
&:deep(.fc-daygrid-day-number)
|
|
color: black
|
|
&:deep(.fc-col-header-cell-cushion)
|
|
font-size: 20px
|
|
font-weight: 500
|
|
line-height: 45px
|
|
text-transform: capitalize
|
|
color: black
|
|
&:deep(.fc-theme-standard .fc-scrollgrid)
|
|
border: none
|
|
&:deep(.fc-event-start)
|
|
border-top-left-radius: 30px
|
|
border-bottom-left-radius: 30px
|
|
&:deep(.fc-event-end)
|
|
border-top-right-radius: 30px
|
|
border-bottom-right-radius: 30px
|
|
&:deep(.fc-event)
|
|
font-size: 12px
|
|
padding-left: 10px
|
|
margin-top: 5px
|
|
&:after
|
|
background: unset
|
|
&:deep(.fc-day-today)
|
|
background: white
|
|
|
|
.fc-daygrid-day-top a
|
|
background: #3700B3
|
|
width: 28px
|
|
color: white
|
|
text-align: center
|
|
border-radius: 50%
|
|
height: 28px
|
|
line-height: 27px
|
|
position: relative
|
|
padding: 0
|
|
margin: 0
|
|
border: none
|
|
top: 2px
|
|
right: 4px
|
|
&:deep(.fc-daygrid-day-frame)
|
|
min-height: 100px
|
|
</style>
|