How to set another first day of the week?

[webwakko]

Hi,

i've been searching the code to found the settings for week or month view. More in particular, how to set the first day of the week to a monday instead of a sunday?

[mannro]

Before init DaySpanVuetify plugin set moment.js to your desired locale. e.g.

momentLocale.js

import moment from 'moment'
moment.locale('sk')

then in DaySpanVuetify plugin init

Vue.use(DaySpanVuetify, {
    data: {
        defaults: {
            dsWeeksView: {
                weekdays: moment.weekdaysShort(true)
            },...

[ClickerMonkey]

If @mannro 's code works, that's great!

Better configuration for which days show in a week - and which day is the first day - will be added at some unknown point in the future.

I'm working on a Vuetify calendar component which has this functionality and it will be available there before here.

[mtx-z]

@mannro I can't get monday as first day using your code. Is it still working under 0.3.6 ? thanks!

[ClickerMonkey]

It can't be done yet

[mtx-z]

neither for MonthView nor DayView?

[ClickerMonkey]

For any view

[mtx-z]

As @mannro said, when I checkout the dayspan-vuetify demo I'm able to correctly change the entire locale, and to change the first day of the week with monday:

By updating dayspan-vuetify to 0.3.6 & changing main.js to:

import Vue from 'vue'
import Vuetify from 'vuetify'
import DaySpanVuetify from 'dayspan-vuetify'
import App from './App.vue'
import dsFr from 'dayspan-vuetify/src/locales/fr';
import moment from 'moment'
import 'moment/locale/fr';
import 'vuetify/dist/vuetify.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import 'dayspan-vuetify/dist/lib/dayspan-vuetify.min.css'

Vue.config.productionTip = false
moment.locale('fr');

Vue.use(Vuetify);

Vue.use(DaySpanVuetify, {
  methods: {
    getDefaultEventColor: () => '#1976d2'
  }
});

Vue.$dayspan.addLocale('fr', dsFr);
Vue.$dayspan.setLocale('fr', true);

new Vue({
  el: '#app',
  render: h => h(App)
})

But I'm still not able to use it in my own project.

Also, demo src/docs.js is using deprecated moment.lang() instead of moment.locale()

UPDATE: Trying to replicate this on my own project, I made some test. This change is very "unstable". From the demo, adding any package to package.json (like axios), will put every moment related item in the calendar back to EN. I didn't find any way to get the french back unless by cloning the demo again. So just adding another package to the package.json reverse the lang switch... It's related to something I don't get.

So in the end:

• I'm able to translate dayspan-calendar values
• I'm able to translate moment values from dayspan, but only after example clone, dayspan-calendar update and build.

[scoutrul]

Monday for first day of week in monthly calendar is prop :weekdays="[1, 2, 3, 4, 5, 6, 0]"

[JeppePepp]

:weekdays="[1, 2, 3, 4, 5, 6, 0]"