Skip to content

Instantly share code, notes, and snippets.

@voidfire
Created August 19, 2021 21:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save voidfire/a12d19fdbb6a272c769b76072c001858 to your computer and use it in GitHub Desktop.
Save voidfire/a12d19fdbb6a272c769b76072c001858 to your computer and use it in GitHub Desktop.
Create a calendar vue component for twill 2.0
You will need to install the npm packages for the component to work
npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction
Create the files and ask twill to compile the vue component with
php artisan twill:build --noInstall
any changes you do to the vue file will need to be recompiled
///resources\assets\js\blocks
<template>
<!-- eslint-disable -->
<div class="block__body">
<FullCalendar :options="calendarOptions" />
</div>
</template>
<script>
import BlockMixin from '@/mixins/block'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
export default {
mixins: [BlockMixin],
components: {
FullCalendar // make the <FullCalendar> tag available
},
data: function() {
return {
eventSources: [
{
url: 'http://localhost/events',
type: 'GET',
data: {
id: this.$store.getters.user
},
error: function() {
alert('there was an error while fetching events!');
},
}
],
calendarOptions: {
plugins: [ dayGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
dateClick: this.handleDateClick,
events: [
{ title: 'event 1', date: '2019-04-01' },
{ title: 'event 2', date: '2019-04-02' }
]
}
}
},
}
</script>
///resource\views\admin\blocks
<br>
<br>
<a17-block-calendar
name="name"
>
</a17-block-calendar>
// Add it to your Twill form for your resource
@extends('twill::layouts.form')
@section('fieldsets')
@formFieldset(['id' => 'Calendar', 'title' => 'Reservations'])
@include('admin.blocks.calendar')
@endformFieldset
@stop
<?php
//Specific to Twill 2.0 higher versions wont need this
return [
'block_editor' => [
'crops' => [],
'blocks' => [
'calendar' => [
'title' => 'Calendar',
'components' => 'a17-block-calendar',
'compiled' => true
],
],
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment