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> <template>
<concerned-groups></concerned-groups> <concerned-groups></concerned-groups>
<calendar-range></calendar-range>
</template> </template>
<script> <script>
import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue'; import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
import CalendarRange from '../_components/CalendarRange/CalendarRange.vue';
export default { export default {
name: "App", name: "App",
components: { components: {
ConcernedGroups, ConcernedGroups,
CalendarRange
} }
} }
</script> </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 %} {% block js %}
{{ parent() }} {{ parent() }}
{{ encore_entry_link_tags('async_upload') }}
<script type="text/javascript"> <script type="text/javascript">
window.addEventListener('DOMContentLoaded', function (e) { window.addEventListener('DOMContentLoaded', function (e) {
chill.displayAlertWhenLeavingModifiedForm('form[name="{{ form.vars.form.vars.name }}"]', chill.displayAlertWhenLeavingModifiedForm('form[name="{{ form.vars.form.vars.name }}"]',
@ -32,6 +31,5 @@
{% block css %} {% block css %}
{{ parent() }} {{ parent() }}
{{ encore_entry_link_tags('async_upload') }}
{{ encore_entry_link_tags('vue_calendar') }} {{ encore_entry_link_tags('vue_calendar') }}
{% endblock %} {% endblock %}

View File

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