我正在尝试根据完整日历中的日期更改资源。我正在使用resourcetimegridday视图。每个资源都是一个人,只有在可用时才应该出现。我有一个查询,返回的人,根据这一天,没有休假。
当我使用eventDidMount时,它只在day有事件(资源正确更改)时工作,而在没有事件时不工作。我找不到完整的日历文档,选项来完成我所期望的。
如果我使用datesSet,我有这个错误:Pickup.vue:97 Uncaught(in promise)TypeError:无法读取undefined的属性(阅读“未定义的选项”)
PickupController.php
public function getResources(Request $request){
/**
* TODO
*
* SELECT
* employees.id
* FROM employees
* left JOIN appointments
* ON appointments.employee_id = employees.id
* WHERE employees.id NOT IN (
* SELECT appointments.employee_id WHERE (date(appointments.start_time) <= CURDATE() AND date(appointments.finish_time) >= CURDATE()))
* AND employees.department_id = 3
* GROUP BY employees.id
*/
$employees = Employee::select('employees.id','employees.name','employees.business_start_time','employees.business_finish_time')
->leftjoin('appointments','employees.id','=','appointments.employee_id')
->whereNotIn('employees.id',
DB::table('appointments')->select('appointments.employee_id')->whereDate(('appointments.start_time'),'<=',$request->date)->whereDate(('appointments.finish_time'),'>=',$request->date))
->where('employees.department_id','=',3)
->groupBy('employees.id')
->get();
$resources = [];
foreach($employees as $employee) {
$resource = [];
$resource['id'] = $employee->id;
$resource['title'] = $employee->name;
$resource['businessHours']['daysOfWeek'] = [ 1, 2, 3, 4, 5];
$resource['businessHours']['startTime'] = $employee->business_start_time;
$resource['businessHours']['endTime'] = $employee->business_finish_time;
$resources[] = $resource;
}
return response()->json($resources);
}
Pickup.vue
<script>
import FullCalendar from '@fullcalendar/vue3'
import timeGridPlugin from "@fullcalendar/timegrid"
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid'
import scrollGridPlugin from '@fullcalendar/scrollgrid'
import listPlugin from '@fullcalendar/list'
import esLocale from '@fullcalendar/core/locales/es'
import adaptivePlugin from '@fullcalendar/adaptive'
import PickupModal from '../../Components/Modals/PickupModal.vue'
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import axios from 'axios'
import { router } from "@inertiajs/vue3"
import moment from 'moment'
import { reactive } from "vue";
export default {
name: 'Pickup',
components: {
FullCalendar,
PickupModal,
AuthenticatedLayout
},
emits: {
'deleteEventResource':{
id:'',
},
'editEventResource':{
id:'',
},
'closeModal':true,
'saveEventResource':{id:'',},
},
props: {
errors: Object,
events: Array,
resources: Array,
},
data() {
return {
showModal: false,
editing : false,
newEventResource: {
title: '',
content: '',
date_at: '',
end_at: '',
status: '',
color: '',
content: ''
},
calendarOptions : {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: [ dayGridPlugin, timeGridPlugin, listPlugin,interactionPlugin, adaptivePlugin, resourceTimeGridPlugin, scrollGridPlugin ],
headerToolbar: {
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,resourceTimeGridDay,listMonth",
},
initialView: 'resourceTimeGridDay',
locale: esLocale,
dayMaxEvents: false,
weekends: true,
navLinks: true,
nowIndicator: true,
firstDay: 1,
defaultAllDay: false,
timeZone: 'Europe/Madrid',
resources: [],
dateClick: this.handleDateClick,
eventClick: this.handleEventClick,
events: [],
dayMinWidth: 150,
stickyFooterScrollbar: true,
businessHours: [],
slotDuration: '00:15:00',
eventContent: function(eventInfo) {
return { html: eventInfo.timeText + "<br>" + eventInfo.event.title + "<br>" + eventInfo.event.extendedProps.content }
},
eventDidMount: this.dayDrivers, //works only on days that has events; resources changes
eventMouseEnter: function(info) {info.el.title = info.event.extendedProps.content;},
datesSet:function (dateInfo){
let date = dateInfo.startStr.split("T")[0];
axios.get(route('pickups.index',{date:date})).then(({data}) => {
this.$data.calendarOptions.resources = data; //returns Cannot read properties of undefined (reading 'calendarOptions')
});
},
//lazyFetching: false,
// rerenderDelay: 500,
}
}
},
beforeMount(){
const start = new Date().toISOString().split("T")[0];
this.$data.calendarOptions.resources = {
url: route('pickups.index',{date:start}),
method: 'GET',
failure: error => {
console.log('tenemos este error: ', error.message);
}
},
this.$data.calendarOptions.events = {
url: route('pickupsEvents'),
method: 'GET',
failure: error => {
console.log('tenemos este error: ', error.message);
}
}
},
methods: {
dateClick(arg){
this.$data.showModal = true;
this.setModalOpen(arg);
},
handleDateClick(clickInfo){
this.resetModal();
this.$data.showModal = true;
this.$emit('dateClick',clickInfo);
},
dayDrivers(date){
let calendarApi = this.$refs.fullCalendar.getApi()
const start = calendarApi.getDate().toISOString().split("T")[0];
axios.get(route('pickups.index',{date:start})).then(({data}) => {
// calendarApi.addResource(data);
this.$data.calendarOptions.resources = data;
//this.$refs.fullCalendar.getApi().refetchResources();
});
},
1条答案
按热度按时间nhaq1z211#
我发现了一个简单的解决方案覆盖按钮。