<template>
    <div class="col-one-layout">
    <calendar id="calendar" :events="data"  :config="config"
              ></calendar>
    </div>
</template>
<!--https://codesandbox.io/s/zlzo712vpm
https://fullcalendar.io/docs/theming
https://github.com/CroudTech/vue-fullcalendar
-->
<script>

    import { FullCalendar } from 'vue-full-calendar'
        import '../static/pl.js'
        import 'fullcalendar/dist/fullcalendar.css' 
        export default {
            components: {
                'calendar': FullCalendar
            },
            name: 'CalendarView',
            data() {
                return {
                    config: {
                        locale: 'pl',
                        height: 'auto'
                    },
                    data: [
                        {
                            title: 'event1',
                            start: '2018-01-01',
                        },
                        {
                            title: 'event2',
                            start: '2018-10-05',
                            end: '2018-10-07',
                        }
                        ,
                        {
                            title: 'event3',
                            start: '2018-10-09T12:30:00',
                            allDay: false,
                        }
                        
                    ]}
            }
          
        }
</script> 
<style>
    #calendar{
        max-width: 1200px;
        width: 90%;
        margin:  auto;
        padding: 0 10px;
    }
</style>