The calendar uses the great Moment.js, so for every prop or config involving a date you can pass either a Javascript Date Object or a Moment object.

If you are working with dates or times in your application I highly recommend you use Moment, it will make your life easier.

Global configuration

If you want your settings to apply to every instance of the calendar just pass an object with any of the supported settings to the constructor:

Vue.use(VueScheduler, {
  locale: 'es',
  minDate: null,
  maxDate: null,
  labels: {
     today: 'Hoy',
     back: 'Atrás',
     next: 'Siguiente',
     month: 'Mes',
     week: 'Semana',
     day: 'Día',
     all_day: 'Todo el día'
  timeRange: [11,20],
  availableViews: ['month'],
  initialDate: new Date(),
  initialView: 'week',
  use12: true,
  showTimeMarker: true,
  showTodayButton: false,
  eventDisplay: null

Instance configuration

You can also apply settings to individual instances of the calendar using props. Please note that this would override any settings you set globally.


Note that the disableDialog and eventDialogConfig settings work only on individual instances of the calendar. To learn more about the Event dialog check the events section.

        today: 'Hoy',
        back: 'Atrás',
        next: 'Siguiente',
        month: 'Mes',
        week: 'Semana',
        day: 'Día',
        all_day: 'Todo el día'
    :available-views="['month', 'week', 'day']"


  // ...
  methods: {
    eventDisplay: event => event.customAttribute;
  // ...  

Available settings (props)


You can set the calendar locale globally using any locale supported by Moment.js.

SettingDescriptionTypeDefault value
localeMoment.js supported locale. Works as a global setting only.String'en'
min-dateMinimum date for the calendar on any view.Date - Moment.js objectnull
max-dateMaximum date for the calendar on any view.Date - Moment.js objectnull
labelsTexts for the labels that are not dependant on Moment, such as the buttons at the top.Array[String]Check labels table below
time-rangeSets the time range for the week and day views.Array[Number][0, 23]
available-viewsEnables/disables views for the calendar.Array[String]['month', 'week', 'day']
initial-dateSets the date the calendar will display on load.Stringnew Date()
initial-viewSets the view the calendar will display on load.String'month'
use12Toggles the use of 12-hour time format.Booleanfalse
show-time-markerEnables/disables the horizontal time marker for the week and day views.Booleanfalse
show-today-buttonToggles the display of the Today button on the top left corner of the calendar.Booleantrue
event-displayAttribute that will be displayed for each event in the calendar. This can be either an attribute key or a callback function that receives the event as parameter. Learn more.String, Functionnull
disable-dialogDisables the Event dialog that appears when an user clicks on a day or time. Only works as a prop on individual instances.Booleanfalse
event-dialog-configConfigures the Event dialog. Only works as a prop on individual instances.ObjectCheck dialog config here.


todayLabel for the 'today' button.'Today'
backLabel for the 'back' button.'Back'
nextLabel for the 'next' button.'Next'
monthLabel for the 'month' button.'Month'
weekLabel for the 'week' button.'Week'
dayLabel for the 'day' button.'Day'
all_dayLabel for the 'All day' section in 'week' and 'day' views.'all day'