我在学校的项目中使用Fullcalendar，并从此视频（https://www.youtube.com/watch?v=x_WMkIKztRQ）中获取代码。日历有效，但我无法获得一张以上的表来填充日历。
我的组件代码：
<template>
<div class="">
<div class="row justify-content-center">
<div class="col-md-12">
<Fullcalendar
@eventClick="showEvent"
@select="handleSelect"
:plugins="calendarPlugins"
:header="{
left: 'title',
center: 'dayGridMonth, timeGridWeek, listWeek',
right: 'prev today next'
}"
:buttonText="{
today: 'Heute',
month: 'Monat',
week: 'Woche',
list: 'Liste'
}"
:events="EVENTS"
:weekends="true"
:selectable="true"
:firstDay="1"
locale="de"
setAllDay= "true"
/>
</div>
</div>
</div>
</template>
<script>
import Fullcalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import TimeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import ListPlugin from "@fullcalendar/list";
import deLocale from '@fullcalendar/core/locales/de';
import axios from "axios";
Vue.use(axios);
import FullCalendar from 'vue-full-calendar';
Vue.use(FullCalendar);
export default {
components: {
Fullcalendar
},
data() {
return {
calendarPlugins: [dayGridPlugin, interactionPlugin, TimeGridPlugin, ListPlugin],
EVENTS: "",
newEvent: {
event_name: "",
start_date: "",
end_date: "",
},
addingMode: true,
indexToUpdate: ""
};
},
created() {
this.getEvents();
},
methods: {
handleSelect(arg) {
console.log(arg)
},
addNewEvent() {
axios
.post("/api/calendar", {
...this.newEvent
})
.then(data => {
this.getEvents(); // update our list of events
this.resetForm(); // clear newEvent properties (e.g. title, start_date and end_date)
})
.catch(err =>
console.log("Unable to add new event!", err.response.data)
);
},
showEvent(arg) {
this.addingMode = false;
const { id, title, start, end, day } = this.events.find(
event => event.id === +arg.event.id
);
this.indexToUpdate = id;
this.newEvent = {
event_name: title,
start_date: start,
end_date: end,
allDay: true
};
},
updateEvent() {
axios
.put("/api/calendar/" + this.indexToUpdate, {
...this.newEvent
})
.then(resp => {
this.resetForm();
this.getEvents();
this.addingMode = !this.addingMode;
})
.catch(err =>
console.log("Unable to update event!", err.response.data)
);
},
deleteEvent() {
axios
.delete("/api/calendar/" + this.indexToUpdate)
.then(resp => {
this.resetForm();
this.getEvents();
this.addingMode = !this.addingMode;
})
.catch(err =>
console.log("Unable to delete event!", err.response.data)
);
},
getEvents() {
axios
.get("/api/calendar")
.then(resp => (this.EVENTS = resp.data.data))
.catch(err => console.log(err.response.data));
},
resetForm() {
Object.keys(this.newEvent).forEach(key => {
return (this.newEvent[key] = "");
});
}
},
watch: {
indexToUpdate() {
return this.indexToUpdate;
}
}
};
</script>
<style lang="css">
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
.fc-title {
color: #fff;
}
.fc-title:hover {
cursor: pointer;
}
</style>
我的App JS：
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('calendar-component', require('./components/CalendarComponent.vue').default);
Vue.component('calendar-component1', require('./components/CalendarComponent1.vue').default);
Vue.component('example-component', require('./components/ExampleComponent.vue'));
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
window.onload = function () {
// const app = new Vue({
//
//
// el: '#app',
// });
}
const app = new Vue({
state: {
events: []
},
getters: {
EVENTS: state => state.events
},
mutations: {
ADD_EVENT: (state, event) => {
state.events.push(event)
}
},
actions: {}
}).$mount('#app')
我的控制器：
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Resources\CalendarResource;
use Symfony\Component\HttpFoundation\Response;
use App\up_calendar;
use App\up_request;
use App\Calendar;
use DB;
class CalendarController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return CalendarResource::collection(Calendar::all());
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$new_calendar = Calendar::create($request->all());
return response()->json([
'data' => new CalendarResource($new_calendar),
'message' => 'Successfully added new event!',
'status' => Response::HTTP_CREATED
]);
}
/**
* Display the specified resource.
*
* @param \App\Calendar $calendar
* @return \Illuminate\Http\Response
*/
public function show(Calendar $calendar)
{
return response($calendar, Response::HTTP_OK);
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Calendar $calendar
* @return \Illuminate\Http\Response
*/
public function edit(Calendar $calendar)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Calendar $calendar
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Calendar $calendar)
{
$calendar->update($request->all());
return response()->json([
'data' => new CalendarResource($calendar),
'message' => 'Successfully updated event!',
'status' => Response::HTTP_ACCEPTED
]);
}
/**
* Remove the specified resource from storage.
*
* @param \App\Calendar $calendar
* @return \Illuminate\Http\Response
*/
public function destroy(Calendar $calendar)
{
$calendar->delete();
return response('Event removed successfully!', Response::HTTP_NO_CONTENT);
}
资源：
<?php
namespace App\Http\Resources;
use Illuminate\Http\Resources\Json\JsonResource;
class CalendarResource extends JsonResource
{
/**
* Transform the resource into an array.
*
* @param \Illuminate\Http\Request $request
* @return array
*/
public function toArray($request)
{
return [
'id' => $this->id,
'title' => $this->event_name,
'start' => $this->start_date,
'days' => $this->calendar_holyday,
'end' => $this->end_date
];
}
}
型号：
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class up_calendar extends Model
{
protected $guarded = [];
}
我仅从一个表中获取事件。而且我不知道如何在同一日历中获得更多。
只需要用不同的颜色突出显示同一表中的事件和需求。
希望有人可以帮助我。
我将不胜感激
请为您发表评论。对不起，我来自德国，我的英语不好。eventSources看起来与我正在寻找的完全一样。我尝试使用它，但是如果实现了，我会从VUE中收到一个错误
./ resources / js / components / CalendarComponent2.vue？vue＆type = script＆lang = j s＆（./node_modules/babel-loader/lib??ref--4-0!../node_modules/vue-loader中的错误/ lib ?? vue-loader-options！./ resources / js / components / CalendarComponent2.vue？vue＆type = script＆lang = js＆）
这是CalendarComponent2.vue
<template>
<div class="">
<div class="row justify-content-center">
<div class="col-md-12">
<Fullcalendar
:event-sources="eventSources"
:weekends="true"
:selectable="true"
:firstDay="1"
locale="de"
setAllDay= "true"
/>
</div>
</div>
</div>
</template>
<script>
import Fullcalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import TimeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import ListPlugin from "@fullcalendar/list";
import deLocale from '@fullcalendar/core/locales/de';
import axios from "axios";
Vue.use(axios);
import FullCalendar from 'vue-full-calendar';
Vue.use(FullCalendar);
export default{
data() {
return {
calendarPlugins: [dayGridPlugin, interactionPlugin, TimeGridPlugin, ListPlugin],
eventSources: [
{
events(start_date, end_date, event_name, callback) {
axios.get('http://localhost:8000/events').then(response => {
callback(response.data.calendardata)
})
},
color: 'yellow',
textColor: 'black',
}
]
}
}
};