rdv: add fullcalendar.js as a vuejs component (POC)

This commit is contained in:
nobohan 2021-07-20 22:01:43 +02:00
parent 5c8b247f40
commit f508971b6a
4 changed files with 27 additions and 4 deletions

View File

@ -1,14 +1,17 @@
<template>
<concerned-groups></concerned-groups>
<calendar-range></calendar-range>
</template>
<script>
import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
import CalendarRange from '../_components/CalendarRange/CalendarRange.vue';
export default {
name: "App",
components: {
ConcernedGroups,
CalendarRange
}
}
</script>

View File

@ -0,0 +1,23 @@
<template>
<FullCalendar :options="calendarOptions" />
</template>
<script>
import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
data() {
return {
calendarOptions: {
plugins: [ dayGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth'
}
}
}
}
</script>

View File

@ -19,7 +19,6 @@
{% block js %}
{{ parent() }}
{{ encore_entry_link_tags('async_upload') }}
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function (e) {
chill.displayAlertWhenLeavingModifiedForm('form[name="{{ form.vars.form.vars.name }}"]',
@ -32,6 +31,5 @@
{% block css %}
{{ parent() }}
{{ encore_entry_link_tags('async_upload') }}
{{ encore_entry_link_tags('vue_calendar') }}
{% endblock %}

View File

@ -19,7 +19,6 @@
{% block js %}
{{ parent() }}
{{ encore_entry_script_tags('async_upload') }}
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function (e) {
chill.displayAlertWhenLeavingUnsubmittedForm('form[name="{{ form.vars.form.vars.name }}"]',
@ -32,7 +31,7 @@
{% block css %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('build/async_upload.css') }}"/>
<link rel="stylesheet" href="{{ asset('build/vue_calendar.css') }}"/>
{% endblock %}