Search code examples
vue.jsvis.jsvis.js-timeline

Custom locale in vis.js timeline using vue.js


I am using vis.js timeline in a Vue.js project. Although it seems pretty easy to customize the locale using vanilla javascript (see codepen and documentation), I just can't get it done with Vue. I have already added moment.js and moment-with-locales-es6 to my project. Is this the right way to apply the locale to moment.js so it also applies to vis timeline?

This is my vue.js component:

<template>
    <div className="wrapper">
        <div id="visualization"></div>
    </div>
</template>

<script>

import {Timeline} from 'vis-timeline/standalone';
import tr from 'moment/locale/tr'
import moment from "moment-with-locales-es6";

export default {
    data() {
        return {
            items: [
                {
                    id: 1,
                    content: "1",
                    start: new Date(2021, 2, 23),
                    group: 0
                },
            options: {
                locale: "tr",
                locales: {
                    tr: {
                        current: "geçerli",
                        time: "kere",
                    },
                },
            },
            timeline: null
        }
    },
    mounted() {
        this.timeline = new Timeline(document.getElementById('visualization'));
        this.timeline.setOptions(this.options);
        this.timeline.setItems(this.items);
        moment.locale('tr')
    }
}
</script>

Solution

  • I managed to do it by adding this to my index.html file:

    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/tr.js'></script>
    

    I am pretty sure there's a better solution for this...