Horizontal Calendar with VueJS and Vis.js

timeline.vue

<template>
    <div class="wrapper">
        <p>
            Timeline test 2
        </p>
        <div id="visualization"></div>
    </div>
</template>

<script>
    import { Timeline } from 'vis-timeline/standalone';
    export default {
        data() {
            return {
                items: [],
                groups: [],
                options: {
                    orientation: "top",
                    itemsAlwaysDraggable:true,
                    timeAxis: {scale: 'hour', step: 1, },
                    zoomMax: 150000000,
                    minHeight:'500px',
                    start: '2020-04-01',
                    hiddenDates: {
                        start: '2020-03-04 18:00:00',
                        end: '2020-03-05 06:00:00',
                        repeat: 'daily'
                    },
                    editable: {
                        add: true,         // add new items by double tapping
                        updateTime: true,  // drag items horizontally
                        updateGroup: true, // drag items from one group to another
                        remove: true,       // delete an item by tapping the delete button top right
                        overrideItems: false  // allow these options to override item.editable
                    },
                    onUpdate: function (item, callback) {
                        item.content = prompt('Edit items text:', item.content);
                        if (item.content != null) {
                            callback(item); // send back adjusted item
                        }
                        else {
                            callback(null); // cancel updating the item
                        }
                    },
                    onMove: function (item, callback) {
                        if (item.content != null) {
                            axios
                                .post('/appointments/update/' + item.id, item)
                        }
                        else {
                            callback(null); // cancel updating the item
                        }
                    }
                },
                dataLoaded: null,
            }
        },
        created() {
            axios.get('/users/users').then((res) => {
                res.data.forEach((user) => {
                    let group = {};
                    group.id = user.external_id;
                    group.content = "<div style='float:left; margin-right: 10px;'><img src='https://picsum.photos/400' style='border-radius:50%;' width='60em'></div>" +
                        "<div style='float:right;'><p style='margin: 0'>" + user.name + "</p>" +
                        "<span style='font-size:11px; font-weight: 300; font-color:#eee;'>" + user.department[0].name +  "<span></div>";
                    group.style = "width: 240px";
                    this.groups.push(group);
                })
            });
            this.dataLoaded = axios.get('/appointments/data').then((res) => {
                res.data.forEach((appointment) => {
                    let item = {};
                    item.id = appointment.external_id;
                    item.group = appointment.user.external_id;
                    item.content = "<span style='font-size:9px; margin:0; padding: 0 0 0 0'>"+ appointment.start_at +"</span> <p style='margin:0; padding: 0; line-height: 0.8;'>" + appointment.title+ "</p>";
                    item.start = appointment.start_at;
                    item.end = appointment.end_at;
                    this.items.push(item);
                })
            });
        },
        async mounted() {
            await this.dataLoaded
            // Create a Timeline
            let timeline = new Timeline(document.getElementById('visualization'));
            timeline.setOptions(this.options);
            timeline.setGroups(this.groups);
            timeline.setItems(this.items);
        }
    }
</script>
<style>
  .vis-time-axis .vis-grid.vis-odd {
      background: #f5f5f5;
  }
  .vis-time-axis .vis-grid.vis-saturday,
  .vis-time-axis .vis-grid.vis-sunday {
      background: gray;
  }
  .vis-time-axis .vis-text.vis-saturday,
  .vis-time-axis .vis-text.vis-sunday {
      color: white;
  }
  .vis-item {
      background-color: #d6e6ff;
      border-color: #1371fe;
      color: #0155d3;
      border-left-width: 3px;
      border-left-style: solid;
      font-weight: 500;
      opacity: .8;
      font-size: 13px;
      height: 55px;
  }
  .vis-h0 .vis-h01 .vis-h15 .vis-h16 {
      color: blue !important;
      height: 100px;
      text-align: center;
  }
</style>