YouTube Icon

Code Playground.

How to implement Fullcalendar in Vue Laravel?


How to implement Fullcalendar in Vue Laravel?

Vue and laravel combination is the best and I have done lots of working examples in my blog.

Here is the working and tested coding steps for implement Fullcalendar in Vue Laravel:
1. Here are the basics command to install fresh laravel setup on your machine:

$ composer create-project --prefer-dist laravel/laravel blogvuefullcalendar
$ cd blogvuefullcalendar

2. Now here are the some npm commands you need to run into your terminal to install node module and fullcalendar:

$ npm install //install node modules
$ npm install --save vue-full-calendar //install full calendar
$ npm install --save babel-runtime //full calendar dependency
$ npm install babel-preset-stage-2 --save-dev //full calendar dependency

3. Now, you need to add below code into resources\js\app.js file:

import 'fullcalendar/dist/fullcalendar.css';
window.Vue = require('vue');
import FullCalendar from 'vue-full-calendar'; //Import Full-calendar

Vue.component('example-component', require('./components/ExampleComponent.vue'));
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key)))

const app = new Vue({
    el: '#app'

4. Now, you need to add below code into resources\js\components\ExampleComponent.vue file:

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <full-calendar :events="events"></full-calendar>
    export default {
    data() {
    return {
    events: [
    title : ‘event1’,
    start : ‘2018-12-13’,
    mounted() {
    console.log(‘Component mounted.’)

5. Now, you need to add below code into resources\views\welcome.blade.php file:

<div id="app"><example-component></example-component></div>
<script src="{{asset('js/app.js')}}"></script>

6. Finally, you need to run below command into your terminal and you will see working full calendar example:

$ php artisan serve