mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
[Review]
This commit is contained in:
Matej Glasnák committed
1 parent
79f563a82d
commit
d46a9151fc
27 files changed
+279
-339
No files matched your search
@@ -1,96 +1,104 @@
|
||||
<template>
|
||||
<div id="calendar" class="mb-12">
|
||||
<FullCalendar ref="fullCalendar" :options="calendarOptions"/>
|
||||
<Z-master-task-modal ref="z-master-task-modal" />
|
||||
</div>
|
||||
<div id="calendar" class="mb-12">
|
||||
<V-full-calendar ref="fullCalendar" :options="calendarOptions" />
|
||||
<Z-master-task-modal ref="z-master-task-modal" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FullCalendar from '@fullcalendar/vue3'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import ZMasterTaskModal from '@/plugins/tm@modal/master-task/z-master-task-modal.vue'
|
||||
import VFullCalendar from '@fullcalendar/vue3'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import ZMasterTaskModal from '@/plugins/tm@modal/master-task/z-master-task-modal.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FullCalendar,
|
||||
ZMasterTaskModal
|
||||
},
|
||||
props: ['events', 'month'],
|
||||
methods: {
|
||||
editTask(masterTask, editMode) {
|
||||
this.$refs['z-master-task-modal'].create(masterTask, editMode)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calendarOptions() {
|
||||
return {
|
||||
plugins: [ dayGridPlugin ],
|
||||
initialView: 'dayGridMonth',
|
||||
headerToolbar: false,
|
||||
locale: 'sk',
|
||||
height: 650,
|
||||
firstDay: 1,
|
||||
dayHeaderClassNames: ['w-day-header'],
|
||||
events: this.events,
|
||||
eventContent: function(eventInfo) {
|
||||
return { html: eventInfo.event.extendedProps.title_html }
|
||||
},
|
||||
eventClick: (info) => {
|
||||
console.log(info.event._def)
|
||||
// alert(JSON.stringify(info.event._def))
|
||||
this.editTask(info.event._def.publicId, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
month(selectedMonth) {
|
||||
const currentYear = (new Date()).getFullYear()
|
||||
this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, selectedMonth, 1))
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const currentYear = (new Date()).getFullYear()
|
||||
this.calendarOptions.events = this.events
|
||||
this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, this.month, 1))
|
||||
}
|
||||
components: {
|
||||
VFullCalendar,
|
||||
ZMasterTaskModal
|
||||
},
|
||||
|
||||
// Kravarik: Prepisat propy na objektovy zapis
|
||||
props: ['events', 'month'],
|
||||
|
||||
methods: {
|
||||
editTask(masterTask, editMode) {
|
||||
this.$refs['z-master-task-modal'].create(masterTask, editMode)
|
||||
}
|
||||
},
|
||||
|
||||
// Kravarik: Comuted ma byt za data hned
|
||||
computed: {
|
||||
calendarOptions() {
|
||||
return {
|
||||
plugins: [dayGridPlugin],
|
||||
initialView: 'dayGridMonth',
|
||||
headerToolbar: false,
|
||||
locale: 'sk',
|
||||
height: 650,
|
||||
firstDay: 1,
|
||||
dayHeaderClassNames: ['w-day-header'],
|
||||
events: this.events,
|
||||
// Kravarik: Skus toto prepisat na arrow function ako je v eventClick
|
||||
eventContent: function (eventInfo) {
|
||||
return { html: eventInfo.event.extendedProps.title_html }
|
||||
},
|
||||
eventClick: (info) => {
|
||||
this.editTask(info.event._def.publicId, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Kravarik: Toto nechat na konci
|
||||
watch: {
|
||||
month(selectedMonth) {
|
||||
const currentYear = new Date().getFullYear()
|
||||
this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, selectedMonth, 1))
|
||||
}
|
||||
},
|
||||
|
||||
// Kravarik: Posunut nad methods
|
||||
mounted() {
|
||||
const currentYear = new Date().getFullYear()
|
||||
this.calendarOptions.events = this.events
|
||||
this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, this.month, 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
|
||||
a
|
||||
background: #3700B3
|
||||
width: 32px
|
||||
height: 32px
|
||||
color: white
|
||||
text-align: center
|
||||
border-radius: 50%
|
||||
border: 5px solid white
|
||||
line-height: 15px
|
||||
</style>
|
||||
&: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
|
||||
a
|
||||
background: #3700B3
|
||||
width: 32px
|
||||
height: 32px
|
||||
color: white
|
||||
text-align: center
|
||||
border-radius: 50%
|
||||
border: 5px solid white
|
||||
line-height: 15px
|
||||
</style>
|
||||
Reference in new issue
Block a user