根据日期更改资源完整日历Vue

yftpprvb  于 2023-10-23  发布在  Vue.js
关注(0)|答案(1)|浏览(193)

我正在尝试根据完整日历中的日期更改资源。我正在使用resourcetimegridday视图。每个资源都是一个人,只有在可用时才应该出现。我有一个查询,返回的人,根据这一天,没有休假。
当我使用eventDidMount时,它只在day有事件(资源正确更改)时工作,而在没有事件时不工作。我找不到完整的日历文档,选项来完成我所期望的。
如果我使用datesSet,我有这个错误:Pickup.vue:97 Uncaught(in promise)TypeError:无法读取undefined的属性(阅读“未定义的选项”)
PickupController.php

  1. public function getResources(Request $request){
  2. /**
  3. * TODO
  4. *
  5. * SELECT
  6. * employees.id
  7. * FROM employees
  8. * left JOIN appointments
  9. * ON appointments.employee_id = employees.id
  10. * WHERE employees.id NOT IN (
  11. * SELECT appointments.employee_id WHERE (date(appointments.start_time) <= CURDATE() AND date(appointments.finish_time) >= CURDATE()))
  12. * AND employees.department_id = 3
  13. * GROUP BY employees.id
  14. */
  15. $employees = Employee::select('employees.id','employees.name','employees.business_start_time','employees.business_finish_time')
  16. ->leftjoin('appointments','employees.id','=','appointments.employee_id')
  17. ->whereNotIn('employees.id',
  18. DB::table('appointments')->select('appointments.employee_id')->whereDate(('appointments.start_time'),'<=',$request->date)->whereDate(('appointments.finish_time'),'>=',$request->date))
  19. ->where('employees.department_id','=',3)
  20. ->groupBy('employees.id')
  21. ->get();
  22. $resources = [];
  23. foreach($employees as $employee) {
  24. $resource = [];
  25. $resource['id'] = $employee->id;
  26. $resource['title'] = $employee->name;
  27. $resource['businessHours']['daysOfWeek'] = [ 1, 2, 3, 4, 5];
  28. $resource['businessHours']['startTime'] = $employee->business_start_time;
  29. $resource['businessHours']['endTime'] = $employee->business_finish_time;
  30. $resources[] = $resource;
  31. }
  32. return response()->json($resources);
  33. }

Pickup.vue

  1. <script>
  2. import FullCalendar from '@fullcalendar/vue3'
  3. import timeGridPlugin from "@fullcalendar/timegrid"
  4. import dayGridPlugin from '@fullcalendar/daygrid'
  5. import interactionPlugin from '@fullcalendar/interaction'
  6. import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid'
  7. import scrollGridPlugin from '@fullcalendar/scrollgrid'
  8. import listPlugin from '@fullcalendar/list'
  9. import esLocale from '@fullcalendar/core/locales/es'
  10. import adaptivePlugin from '@fullcalendar/adaptive'
  11. import PickupModal from '../../Components/Modals/PickupModal.vue'
  12. import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
  13. import axios from 'axios'
  14. import { router } from "@inertiajs/vue3"
  15. import moment from 'moment'
  16. import { reactive } from "vue";
  17. export default {
  18. name: 'Pickup',
  19. components: {
  20. FullCalendar,
  21. PickupModal,
  22. AuthenticatedLayout
  23. },
  24. emits: {
  25. 'deleteEventResource':{
  26. id:'',
  27. },
  28. 'editEventResource':{
  29. id:'',
  30. },
  31. 'closeModal':true,
  32. 'saveEventResource':{id:'',},
  33. },
  34. props: {
  35. errors: Object,
  36. events: Array,
  37. resources: Array,
  38. },
  39. data() {
  40. return {
  41. showModal: false,
  42. editing : false,
  43. newEventResource: {
  44. title: '',
  45. content: '',
  46. date_at: '',
  47. end_at: '',
  48. status: '',
  49. color: '',
  50. content: ''
  51. },
  52. calendarOptions : {
  53. schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
  54. plugins: [ dayGridPlugin, timeGridPlugin, listPlugin,interactionPlugin, adaptivePlugin, resourceTimeGridPlugin, scrollGridPlugin ],
  55. headerToolbar: {
  56. left: "prev,next today",
  57. center: "title",
  58. right: "dayGridMonth,timeGridWeek,resourceTimeGridDay,listMonth",
  59. },
  60. initialView: 'resourceTimeGridDay',
  61. locale: esLocale,
  62. dayMaxEvents: false,
  63. weekends: true,
  64. navLinks: true,
  65. nowIndicator: true,
  66. firstDay: 1,
  67. defaultAllDay: false,
  68. timeZone: 'Europe/Madrid',
  69. resources: [],
  70. dateClick: this.handleDateClick,
  71. eventClick: this.handleEventClick,
  72. events: [],
  73. dayMinWidth: 150,
  74. stickyFooterScrollbar: true,
  75. businessHours: [],
  76. slotDuration: '00:15:00',
  77. eventContent: function(eventInfo) {
  78. return { html: eventInfo.timeText + "<br>" + eventInfo.event.title + "<br>" + eventInfo.event.extendedProps.content }
  79. },
  80. eventDidMount: this.dayDrivers, //works only on days that has events; resources changes
  81. eventMouseEnter: function(info) {info.el.title = info.event.extendedProps.content;},
  82. datesSet:function (dateInfo){
  83. let date = dateInfo.startStr.split("T")[0];
  84. axios.get(route('pickups.index',{date:date})).then(({data}) => {
  85. this.$data.calendarOptions.resources = data; //returns Cannot read properties of undefined (reading 'calendarOptions')
  86. });
  87. },
  88. //lazyFetching: false,
  89. // rerenderDelay: 500,
  90. }
  91. }
  92. },
  93. beforeMount(){
  94. const start = new Date().toISOString().split("T")[0];
  95. this.$data.calendarOptions.resources = {
  96. url: route('pickups.index',{date:start}),
  97. method: 'GET',
  98. failure: error => {
  99. console.log('tenemos este error: ', error.message);
  100. }
  101. },
  102. this.$data.calendarOptions.events = {
  103. url: route('pickupsEvents'),
  104. method: 'GET',
  105. failure: error => {
  106. console.log('tenemos este error: ', error.message);
  107. }
  108. }
  109. },
  110. methods: {
  111. dateClick(arg){
  112. this.$data.showModal = true;
  113. this.setModalOpen(arg);
  114. },
  115. handleDateClick(clickInfo){
  116. this.resetModal();
  117. this.$data.showModal = true;
  118. this.$emit('dateClick',clickInfo);
  119. },
  120. dayDrivers(date){
  121. let calendarApi = this.$refs.fullCalendar.getApi()
  122. const start = calendarApi.getDate().toISOString().split("T")[0];
  123. axios.get(route('pickups.index',{date:start})).then(({data}) => {
  124. // calendarApi.addResource(data);
  125. this.$data.calendarOptions.resources = data;
  126. //this.$refs.fullCalendar.getApi().refetchResources();
  127. });
  128. },
nhaq1z21

nhaq1z211#

我发现了一个简单的解决方案覆盖按钮。

  1. customButtons: {
  2. prev: {
  3. text: "prev",
  4. click: () => {
  5. let calendarApi = this.$refs.fullCalendar.getApi();
  6. calendarApi.prev();
  7. this.dayDrivers(calendarApi.getDate().toISOString().split("T")[0]);
  8. }
  9. },
  10. next: {
  11. text: "next",
  12. click: () => {
  13. let calendarApi = this.$refs.fullCalendar.getApi();
  14. calendarApi.next();
  15. this.dayDrivers(calendarApi.getDate().toISOString().split("T")[0]);
  16. }
  17. },
  18. today: {
  19. text: 'today',
  20. click: () => {
  21. let calendarApi = this.$refs.fullCalendar.getApi();
  22. calendarApi.today();
  23. this.dayDrivers(calendarApi.getDate().toISOString().split("T")[0]);
  24. }
  25. }
  26. },
展开查看全部

相关问题