Event model

The Event model represents an event in the calendar. The most basic instance consists of date, startTime and endTime.

It also contains some hidden logic that allows the calendar to perform validations and store some meta data without exposing this data to you, so the objects you pass to the calendar remain as you added them.

Setting or adding events

To add your events to the calendar simply pass an array with your events to the events prop of the calendar.

<template>
  <v-scheduler :events="events"/>
</template>
<script>
  export default {
    data() {
      return {
        events: [
          {
            date: new Date()
          },
          {
            date: new Date(),
            startTime: "13:00",
            endTime: "15:00",
          }
        ]
      }
    }
  }  
</script>

You can pass events with just a Date object.
If there is no startTime the event will show on the all day section of the week and day views. The startTime is also used to sort events with the same date on the month view.

If you pass an event with a startTime but without an endTime you will get an error.

The format for the times is "HH:mm", using 24-hour.

TIP

Any event you later to the array, as well as any event created using the Event dialog, will appear in the calendar automatically.

Custom attributes

If you want to add more attributes to your events, like a name, simple add them to each event object.

// ...
export default {
    data() {
      return {
        events: [
          {
            date: new Date(),
            startTime: "13:00",
            endTime: "15:00",
            name: "Date with David",
            comments: "MUST bring chocolate.",
            customAttribute: "I'm a custom attribute"
          }
        ]
      }
    }
}
// ...

Setting the event display

By default the events on the calendar display only the startTime if any.
If you want to display something else for each event, set the event-display prop on the calendar instance (check available props).

The props takes a String as the key for the attribute you want to display. It can also take a callback function in case you need more control. This callback receives the event as a parameter and should return a String with the value you want to display.

Using a string as key:

<template>
  <v-scheduler :events="events" event-display="name" /> <!-- Using the custom attribute 'name' as display key. -->
</template>
<script>
  export default {
    data() {
      return {
        events: [
          {
            date: new Date(),
            startTime: "13:00",
            endTime: "15:00",
            name: "Date with David",
            comments: "MUST bring chocolate.",
            customAttribute: "I'm a custom attribute"
          }
        ]
      }
    }
  }  
</script>

Using a callback function:

<template>
  <v-scheduler :events="events" :event-display="eventDisplay" /> <!-- Using a callback function. -->
</template>
<script>
  export default {
    data() {
      return {
        events: [
          {
            date: new Date(),
            startTime: "13:00",
            endTime: "15:00",
            name: "Date with David",
            comments: "MUST bring chocolate.",
            customAttribute: "I'm a custom attribute"
          }
        ]
      }
    },
    methods: {
      eventDisplay(event) {
        return event.name + ' - ' + event.comments;
      }
    }
  }  
</script>

Event dialog

The default, basic dialog looks like this:

Event dialog

If the user clicks on a date on the month view the dialog will populate the Date and leave the Start Time and End Time empty.
If the user clicks on a time block on the week or day views the dialog will populate the Date, the Start Time and the End Time.

Dialog settings

To change any setting of the dialog, pass an object with your settings to the event-dialog-config prop of the calendar.

These settings are not global.

Remember that these settings work per instance only.

Setting	Description	Type	Default
title	Sets the dialog title.	String	`'Create event'`
inputClass	Additional classes for the dialog inputs. Classes are added to input parent, not the input itself.	String	`null`
overrideInputClass	By default classes set with `inputClass` are appended to the default class. This setting removes default classes.	Boolean	`false`
createButtonLabel	Text for the `Create` button of the dialog.	String	`'Create'`
enableTimeInputs	Toggles the `startTime` and `endTime` inputs.	Boolean	`true`
fields	Additional fields.	Array[Object]. Check Custom fields.

Custom fields

Each field consists of the following attributes:

Input type support

Checkboxes, radio and selects are not supported yet. This will be fixed in the next release.

Attribute	Description	Type	Default	Required
name	Sets the name of the html input. It should match the name of the custom attribute you want to set.	String	N/A	Yes
type	Sets the input type. Supports almost any HTML5 input type and textarea.	String	`'text'`	No
label	Sets the input label. Defaults to the `name` attribute.	String	`name` attribute	No
showLabel	Shows/hides the input label.	Boolean	`true`	No
required	Adds/removes the `required` HTML attribute.	Boolean	`false`	No
value	Sets the initial input value.	Mixed	`null`	No

Inline fields

You can group fields to display them inline (like the default time fields).
To do this, pass an object with a fields array and an optional label. Check the example below.

Dialog example

<template>
    <vue-scheduler :event-dialog-config="dialogConfig"/>
</template>
<script>
  export default {
    data() {
      return {
        dialogConfig: {
          title: 'Custom dialog title',
          createButtonLabel: 'Save event thingy',
          enableTimeInputs: false,
          fields: [
              {
                  name: 'name',
                  label: 'Event name'
              },
              {
                  name: 'email',
                  type: 'email',
                  required: true,
                  label: 'E-mail',
                  value: 'email@example.com'
              },
              {
                  label: 'Grouped',
                  fields: [
                      {
                          name: 'Field 1'
                      },
                      {
                          name: 'Field 2'
                      }
                  ]
              },
              {
                  name: 'comments',
                  type: 'textarea',
                  label: 'comments'
              }
          ]
        }
      }
    }
  }
</script>

This produces the following dialog:

Event dialog example

# Event model

# Setting or adding events

# Custom attributes

# Setting the event display

# Using a string as key:

# Using a callback function:

# Event dialog

# Dialog settings

# Custom fields

# Dialog example

# This produces the following dialog:

Event model

Setting or adding events

Custom attributes

Setting the event display

Using a string as key:

Using a callback function:

Event dialog

Dialog settings

Custom fields

Dialog example

This produces the following dialog: