28

Vue Cal

v. 4.10.2

Vue.js full cal  --no-deps --no-bs  :metal:

Examples

In addition to all the examples below, you can try these common use cases on Codepen.

If you have a doubt about the setup, check back the examples of theinstallation section.

doneBasic

# Basic with no timeline & hidden weekends

Double click cell to go to a narrower view and click the title to go to a broader view.
By default the calendar theme is grey to match with most of web pages.
You can easily change the color theme (learn how): try thisblue theme

<vue-cal :time="false" hide-weekends />

priority_highFor all the options details, refer to the API section.

# Small calendar, no time, hidden view selector & custom arrows

Extra-small, no timeline, hidden view selector & custom arrows (using the reserved slots arrow-prev & arrow-next).
With a hidden view selector, you can still navigate between the different views: double click cell to go to a narrower view, click title to go to a broader view.

<vue-cal
  hide-view-selector
  :time="false"
  active-view="month"
  xsmall>
  <template #arrow-prev>
    <i class="icon material-icons">arrow_back</i>
  </template>
  <template #arrow-next>
    <i class="icon material-icons">arrow_forward</i>
  </template>
</vue-cal>

priority_highFor all the options details, refer to the API section.

# Calendar themes - Rounded cells & date picker

You can easily change the calendar color theme or use the rounded-cells theme by applying the corresponding CSS class on the <vuecal> tag.
E.g. vuecal--rounded-theme, vuecal--green-theme, vuecal--blue-theme.
Read more about calendar themes in the CSS Notes section.

Because Vue Cal has the potential out of the box, you can also use it as a date picker.
Apply the css class vuecal--date-picker to have the date picker layout below.
you can also disable the transitions to have a faster effect.

<vue-cal
    class="vuecal--rounded-theme vuecal--green-theme"
    xsmall
    hide-view-selector
    :time="false"
    active-view="month"
    :disable-views="['week']"
    style="width: 270px;height: 300px">
</vue-cal>

<vue-cal
    class="vuecal--date-picker"
    xsmall
    hide-view-selector
    :time="false"
    :transitions="false"
    active-view="month"
    :disable-views="['week']"
    style="width: 210px;height: 230px">
</vue-cal>

priority_highRefer to the API section to read more about all the options.

# Disable views, active view

To hide views, you can use the disable-views option and provide an array of views to disable.
The views are not only hidden from the menu bar, they are totally disabled, even when navigating from cells and title bar clicks.

By default all the views are visible and the default active view is the week view.

<vue-cal :time="false" active-view="month" :disable-views="['years', 'year', 'week']" />

# Minimum / maximum dates & single click to navigate

With the options minDate & maxDate, you can set a time range of selectable cells. All the cells before and after are still visible but will be disabled and not selectable.
You can still navigate through them with arrows.
In this example, the minimum date is set to 10 days behind and the maximum date to 10 days ahead.

wb_incandescentNotes

• the min and max options accept a formatted string or plain Javascript Date object.
• 2 different CSS class are available on out of range cells: .before-min & .after-max.

<vue-cal
  xsmall
  hide-view-selector
  click-to-navigate
  :time="false"
  active-view="month"
  :min-date="minDate"
  :max-date="maxDate">
</vue-cal>

// Using Vue Cal Date Prototypes (activated by default).
computed: {
  minDate () {
    return new Date().subtractDays(10)
  },
  maxDate () {
    return new Date().addDays(10)
  }
}

.vuecal__cell--disabled {text-decoration: line-through;}
.vuecal__cell--before-min {color: #b6d6c7;}
.vuecal__cell--after-max {color: #008b8b;}

priority_highFor all the options details, refer to the API section.

# Disable days

You can use the disable-days option to provide an array of formatted dates (e.g. 2020-09-18) to disable.

<!-- Using Vue Cal Date Prototypes (activated by default): subtractDays, format, addDays -->
<vue-cal
  xsmall
  hide-view-selector
  click-to-navigate
  :time="false"
  active-view="month"
  :disable-views="['week']"
  :disable-days="[
    new Date().subtractDays(2).format(),
    new Date().format(),
    new Date().addDays(2).format()
  ]"
></vue-cal>

.vuecal__cell--disabled {text-decoration: line-through;color: #bbb;}

priority_highFor all the options details, refer to the API section.

# Hide particular week days & show the weeks numbers

If you want to hide particular days of the week, you can use the hide-weekdays option.
It accepts an array of days to hide (day numbers), starting at 1 for Monday, to 7 for Sunday.
This option will apply on month & week views.

If you want to hide Saturday and Sunday you can put `6, 7` in the array or use hide-weekends in supplement of hide-weekdays.

You can show the weeks numbers column on the month view with the show-week-numbers option.
You can also provide a custom renderer to the weeks numbers cells through the week-number-cell slot.

priority_highRefer to the API section to read more about all the options.

<vue-cal :time="false"
         show-week-numbers
         :hide-weekdays="[2, 3, 5]"
         :disable-views="['years', 'year']">
</vue-cal>

translateInternationalization (i18n)

Let you translate the calendar texts into your own language (locale).
Refer to the locale option in the API section to know more or if you want to provide a translation.
Try it in Codepen: Vue Cal - Internationalization.

<vue-cal :time="false" small active-view="year" locale="zh-cn" />

priority_highFor Vue Cal versions that don't support ESM (prior 4.3.4 on Vue 3 or 3.11.0 on Vue 2), the locale file must be loaded separately:
import 'vue-cal/dist/i18n/zh-cn.js'.

Alternative

If you need full control on the texts, you can alternatively provide an object containing all the texts (start from the locale JSON file matching your language).
Keep in mind this is not the recommended way: texts may be added / modified / removed in the library and your provided custom texts may not work anymore.
Always prefer the standard locales!

access_timeTimeline, business hours & Today

# Timeline

Timelines are only visible on week and day views.
This example has a set time range from 08:00 to 19:00, time step of 30 minutes (1 hour by default), 24-hour format, and hidden weekends.

<!-- Time-start time-end & time-step are expected in minutes. -->
<vue-cal
  :time-from="8 * 60"
  :time-to="19 * 60"
  :time-step="30"
  hide-weekends>
</vue-cal>

priority_highFor all the options details, refer to the API section.

# Showing time labels in cells

You can choose to display the time labels in every cells by enabling the showTimeInCells option.

<vue-cal
  :time-from="8 * 60"
  :time-to="19 * 60"
  :time-step="30"
  hide-weekends
  show-time-in-cells>
</vue-cal>

priority_highFor all the options details, refer to the API section.

# Special hours (or business hours)

The special hours are visible on week and day views and allow you to highlight a particular time range on each day of the week individually.

priority_highRefer to the API section to read more about the special-hours option.

<vue-cal
  :disable-views="['years', 'year', 'month']"
  :time-from="8 * 60"
  :time-to="20 * 60"
  :special-hours="specialHours" />

// `from` and `to` are expected in minutes.
const dailyHours = { from: 9 * 60, to: 18 * 60, class: 'business-hours' }

// In your component's data, special hours from Monday to Friday.
// Note that you can provide an array of multiple blocks for the same day.
specialHours: {
  1: dailyHours,
  2: dailyHours,
  3: [
    { from: 9 * 60, to: 12 * 60, class: 'business-hours' },
    { from: 14 * 60, to: 18 * 60, class: 'business-hours' }
  ],
  4: dailyHours,
  5: dailyHours
}

.business-hours {
  background-color: rgba(255, 255, 0, 0.15);
  border: solid rgba(255, 210, 0, 0.3);
  border-width: 2px 0;
}

With the same principle, you could also build a lot more complex layout such as the following one.

<vue-cal
  :disable-views="['years', 'year', 'month']"
  :time-from="7 * 60"
  :time-to="20 * 60"
  :special-hours="specialHours" />

// In your component's data, special hours from Monday to Sunday (1 to 7).
// Note that you can provide an array of multiple blocks for the same day.
specialHours: {
  1: {
    from: 8 * 60,
    to: 17 * 60,
    class: 'doctor-1',
    label: 'Doctor 1Full day shift'
  },
  2: {
    from: 9 * 60,
    to: 18 * 60,
    class: 'doctor-2',
    label: 'Doctor 2Full day shift'
  },
  3: [
    {
      from: 8 * 60,
      to: 12 * 60,
      class: 'doctor-1',
      label: 'Doctor 1Morning shift'
    },
    {
      from: 14 * 60,
      to: 19 * 60,
      class: 'doctor-3',
      label: 'Doctor 3Afternoon shift'
    }
  ],
  4: {
    from: 8 * 60,
    to: 17 * 60,
    class: 'doctor-1',
    label: 'Doctor 1Full day shift'
  },
  5: {
    from: 9 * 60,
    to: 18 * 60,
    class: 'doctor-3',
    label: 'Doctor 3Full day shift'
  },
  6: {
    from: 9 * 60,
    to: 18 * 60,
    class: 'doctor-2',
    label: 'Doctor 2Full day shift'
  },
  7: {
    from: 7 * 60,
    to: 20 * 60,
    class: 'closed',
    label: 'Closed'
  }
}

.vuecal__special-hours {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;

  em {font-size: 0.9em;color: #999;}
}

.doctor-1 {background-color: #f0fff1;color: #81d58b;}
.doctor-2 {background-color: #f0f6ff;color: #689bee;}
.doctor-3 {background-color: #fcf0ff;color: #d168ee;}
.closed {
  background:
    #fff7f0
    repeating-linear-gradient(
      -45deg,
      rgba(255, 162, 87, 0.25),
      rgba(255, 162, 87, 0.25) 5px,
      rgba(255, 255, 255, 0) 5px,
      rgba(255, 255, 255, 0) 15px
    );
  color: #f6984c;
}

# Today's current time

When you choose to show the time in vue-cal, the current time of today's date will be marked with a line (scroll to the current time to see it).
The line position will be updated every time the calendar current view is re-rendered (by interacting).
You can easily customize the now-line as you wish via CSS. Changing the line and arrow color is as easy as:

.vuecal__now-line {color: #06c;}

If you don't want this feature you can simply hide it: .vuecal__now-line {display: none}.
This feature has no impact on performance.

If you want the now line to keep accurate position even while your calendar is iddle, you can use the option watchRealTime (see more in the API section).

<vue-cal xsmall active-view="day" :disable-views="['years', 'year', 'month']" />

# Adding a Today button

By default the selected date is today. But if you get lost in time travel, you can add a Today button to select Today's date with the option today-button.
Like navigation arrows, there is also a slot to customize as you want.
below are the default Today button on the left and a custom one with icon and tooltip on the right.

If you are not satisfied with the position of this button, you can also place it outside of Vue Cal like so:Another Today Button
You might want to change view as well when going to Today's date, here is an example how:Today Button

<vue-cal
  ref="vuecal"
  xsmall
  hide-weekends
  :disable-views="['years']"
  :time="false"
  today-button
  active-view="month"
  :selected-date="selectedDate">
  <!-- Optional slot for the custom button. -->
  <template #today-button>
    <!-- Using Vuetify (but we prefer Wave UI 🤘) -->
    <v-tooltip>
      <template #activator="{ on }">
        <v-btn v-on="on">
          <v-icon>my_location</v-icon>
        </v-btn>
        <span>Go to Today's date</span>
      </template>
    </v-tooltip>
  </template>
</vue-cal>

<button @click="selectedDate = new Date()">ANOTHER TODAY BUTTON</button>

data: () => ({
  // Default to next new year eve.
  selectedDate: new Date(new Date().getFullYear(), 11, 31)
})

eventEvents

# Timeless events

The events have associated dates but no time information.
Timeless events cannot be resized as they have no time or duration information.
Refer to the events option in the API section.

<vue-cal selected-date="2018-11-19"
         :time="false"
         :disable-views="['years', 'year', 'month']"
         hide-weekends
         :events="events">
</vue-cal>

data: () => ({
  events: [
    {
      start: '2018-11-21',
      end: '2018-11-21',
      title: 'Need to go shopping',
      content: '<i class="icon material-icons">shopping_cart</i>',
      class: 'leisure'
    },
    {
      start: '2018-11-21',
      end: '2018-11-21',
      title: 'Golf with John',
      content: '<i class="icon material-icons">golf_course</i>',
      class: 'sport'
    },
    {
      start: '2018-11-22',
      end: '2018-11-22',
      title: 'Dad\'s birthday!',
      content: '<i class="icon material-icons">cake</i>',
      class: 'sport'
    }
  ]

/* Different color for different event types. */
.vuecal__event.leisure {background-color: rgba(253, 156, 66, 0.9);border: 1px solid rgb(233, 136, 46);color: #fff;}
.vuecal__event.sport {background-color: rgba(255, 102, 102, 0.9);border: 1px solid rgb(235, 82, 82);color: #fff;}

# Events with time information

Read-only events (by default events are not editable) with custom HTML content and css class (for event types).
Note that the events are always selectable (drop shadow and higher z-index), even when uneditable. The difference with timeless events is that a time is set in the start and end attributes of the events.

<vue-cal
  selected-date="2018-11-19"
  :time-from="9 * 60"
  :time-to="23 * 60"
  :disable-views="['years', 'year', 'month']"
  hide-weekends
  :events="events">
</vue-cal>

events: [
  {
    start: '2018-11-16 10:30',
    end: '2018-11-16 11:30',
    // You can also define event dates with Javascript Date objects:
    // start: new Date(2018, 11 - 1, 16, 10, 30),
    // end: new Date(2018, 11 - 1, 16, 11, 30),
    title: 'Doctor appointment',
    content: '<i class="icon material-icons">local_hospital</i>',
    class: 'health'
  },
  ...
]

# Open a dialog box on event click / dblclick

By passing a function to the option on-event-click or on-event-dblclick, you can control what happens when you click or double click an event - on any view where the events are displayed.
The callback function you provide will receive 2 arguments:

• event: the clicked calendar event's object
• e: the associated javascript DOM event

wb_incandescentYou can set any custom attribute you want on an event, you will then be able to access it in the dialog box!

<vue-cal
  selected-date="2018-11-19"
  :time-from="9 * 60"
  :time-to="19 * 60"
  :disable-views="['years', 'year']"
  hide-weekends
  :events="events"
  :on-event-click="onEventClick">
</vue-cal>

<!-- Using Vuetify (but we prefer Wave UI 🤘) -->
<v-dialog v-model="showDialog">
  <v-card>
    <v-card-title>
      <v-icon>{{ selectedEvent.icon }}</v-icon>
      <span>{{ selectedEvent.title }}</span>
      <v-spacer/>
      <strong>{{ selectedEvent.start && selectedEvent.start.format('DD/MM/YYYY') }}</strong>
    </v-card-title>
    <v-card-text>
      <p v-html="selectedEvent.contentFull"/>
      <strong>Event details:</strong>
      <ul>
        <li>Event starts at: {{ selectedEvent.start && selectedEvent.start.formatTime() }}</li>
        <li>Event ends at: {{ selectedEvent.end && selectedEvent.end.formatTime() }}</li>
      </ul>
    </v-card-text>
  </v-card>
</v-dialog>

data: () => ({
  selectedEvent: {},
  showDialog: false,
  events: [
    {
      start: '2018-11-20 14:00',
      end: '2018-11-20 18:00',
      title: 'Need to go shopping',
      icon: 'shopping_cart', // Custom attribute.
      content: 'Click to see my shopping list',
      contentFull: 'My shopping list is rather long:<br><ul><li>Avocados</li><li>Tomatoes</li><li>Potatoes</li><li>Mangoes</li></ul>', // Custom attribute.
      class: 'leisure'
    },
    {
      start: '2018-11-22 10:00',
      end: '2018-11-22 15:00',
      title: 'Golf with John',
      icon: 'golf_course', // Custom attribute.
      content: 'Do I need to tell how many holes?',
      contentFull: 'Okay.<br>It will be a 18 hole golf course.', // Custom attribute.
      class: 'sport'
    }
  ]
}),
methods: {
  onEventClick (event, e) {
    this.selectedEvent = event
    this.showDialog = true

    // Prevent navigating to narrower view (default vue-cal behavior).
    e.stopPropagation()
  }
}

.vuecal__event {cursor: pointer;}

.vuecal__event-title {
  font-size: 1.2em;
  font-weight: bold;
  margin: 4px 0 8px;
}

.vuecal__event-time {
  display: inline-block;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.vuecal__event-content {
  font-style: italic;
}

# Events indicators - years, year & month views

When you define events the month view will display an events count per day.
You can use the option eventsCountOnYearView to show the events count on years & year views as well.
You can customize the events count as you wish via CSS.

Choose an indicator style:

<vue-cal
  selected-date="2018-11-19"
  xsmall
  :time-from="10 * 60"
  :disable-views="['day']"
  events-count-on-year-view
  active-view="month"
  :events="events">
</vue-cal>

/* Default indicator is count, but you can override it with one of the following rules. */

/* Dash indicator */
.vuecal__cell-events-count {
  width: 18px;
  height: 2px;
  color: transparent;
}

/* Dot indicator */
.vuecal__cell-events-count {
  width: 4px;
  min-width: 0;
  height: 4px;
  padding: 0;
  color: transparent;
}

/* Cell background indicator */
.vuecal__cell--has-events {background-color: #fffacd;}
.vuecal__cell-events-count {display: none;}

# Display events on month view

With the option events-on-month-view, you can choose whether to display the events on the month view or not.
events-on-month-view accepts a Boolean to show or hide, or the string 'short' to show only the event's title.
If events-on-month-view is set to true, all the informations are displayed, you can then hide any event information via CSS.
If you want all the cells to have the same height on this view, this is also your call, you can do it via CSS.

<vue-cal
  selected-date="2018-11-19"
  :time-from="9 * 60"
  :disable-views="['years', 'year']"
  active-view="month"
  hide-weekends
  events-on-month-view="short"
  :events="events"
  style="height: 600px">
</vue-cal>

.vuecal--month-view .vuecal__cell {height: 80px;}

.vuecal--month-view .vuecal__cell-content {
  justify-content: flex-start;
  height: 100%;
  align-items: flex-end;
}

.vuecal--month-view .vuecal__cell-date {padding: 4px;}
.vuecal--month-view .vuecal__no-event {display: none;}

# Edit & delete events

The editable-events option allows or prevent all these actions when it is set to true or false:

• Edit the event title
• Resize an event by dragging the resizer handle. Not available if no timeline, not possible on background events.
• Drag & drop an event (not from the editable title text selection and not from the resizer). Not possible on background events.
• Delete an event (by clicking and holding an event)
• Create a new event (by clicking and dragging on a cell or clicking and holding on a cell)
  Learn more about event creation in the create events example.

{ title: true, drag: false, resize: true, delete: true, create: true }

wb_incandescent

• On top of the global actions allowance, you can deny each of these actions individually for each event with the event attributes titleEditable: false, deletable: false, draggable: false & resizable: false.
• By default the delete button only appears at the top of the event with a set height (1.4em). If you want a full-height delete button like in this example, you can apply the CSS class .vuecal--full-height-delete to your <vue-cal> tag.

In this example, the event creation and drag ability are disabled to focus on edition and deletion.

<vue-cal selected-date="2018-11-19"
         :time-from="10 * 60"
         :time-to="23 * 60"
         :disable-views="['years', 'year']"
         hide-view-selector
         hide-weekends
         :editable-events="{ title: true, drag: false, resize: true, delete: true, create: false }"
         :events="events"
         class="vuecal--full-height-delete">
</vue-cal>

// In data.
events: [
  {
    start: '2018-11-20 14:00',
    end: '2018-11-20 17:30',
    title: 'Boring event',
    content: '<i class="icon material-icons">block</i><br>I am not draggable, not resizable and not deletable.',
    class: 'blue-event',
    deletable: false,
    resizable: false,
    draggable: false
  },
  // other events.
]

.vuecal__event {background-color: rgba(76, 172, 175, 0.35);}

# Create events

The event creation is only possible on a day cell, so not on years & year views.
There are multiple ways to create an event, let's start with the default one.

You may also want to observe the emitted events in the emitted events example.

priority_highWith the snapToTime option, you can make sure the event starts and end at specific intervals of minutes.
E.g. :snap-to-time="15" will snap the event to the closest :00, :15, :30, :45 while dragging.
This option also applies on event resizing after the drag-creation.

<vue-cal
  hide-view-selector
  hide-title-bar
  hide-weekends
  :time-from="10 * 60"
  :time-to="16 * 60"
  :disable-views="['years', 'year', 'month', 'day']"
  :editable-events="{ title: false, drag: false, resize: true, delete: true, create: true }"
  :drag-to-create-threshold="0">
</vue-cal>

This event creation method can cause difficulty when the calendar allows a click on a cell to navigate: a slightly slipping click would create an event instead of navigating.
For this reason, the dragToCreateThreshold option default is 15 pixels. So if you try to click or double click, it will not create an event.

In this example, the event "drag-creation" only starts after dragging 15 pixels, which allows navigating even with an accidental move while double-clicking.

try to double click on a cell to go to the day view with both dragToCreateThreshold to 15 and 0.

# Other event creation methods

There are 3 other ways to create an event: on cell click & hold, on cell single/double click, or programmatically.

priority_highEvent creation will not trigger with a single/double click or click & hold if your cursor is on an event.

Let's see the 3 cases in order of complexity:

1. On cell single or double click

   As the cell-click & cell-dblclick emitted events return a date and time at cursor position (refer to the emitted events example), you simply need to call the createEvent() function straight away from cell-dblclick:

    24

    25

    26

    27

    28

   10:00

   11:00

   12:00

   13:00

   14:00

   15:00

   <vue-cal
     ref="vuecal"
     small
     hide-view-selector
     hide-weekends
     hide-title-bar
     :time-from="10 * 60"
     :time-to="16 * 60"
     :disable-views="['years', 'year']"
     :cell-click-hold="false"
     :drag-to-create-event="false"
     editable-events
     @cell-dblclick="$refs.vuecal.createEvent(
       $event,
       120,
       { title: 'New Event', class: 'blue-event' }
     )">
   </vue-cal>

   <vue-cal ref="vuecal" small hide-view-selector hide-weekends hide-title-bar :time-from="10 * 60" :time-to="16 * 60" :disable-views="['years', 'year']" :cell-click-hold="false" :drag-to-create-event="false" editable-events @cell-dblclick="$refs.vuecal.createEvent( $event, 120, { title: 'New Event', class: 'blue-event' } )"> </vue-cal>

   You may then want to disable the default event creation on cell click & hold by setting :cell-click-hold="false"

2. Programmatically & externally

   To allow an external button to create events, you will need to call the vue-cal createEvent() function from a Vue ref.

   Thisbuttonwill prompt you to choose a date and time as the event start.
    24

    25

    26

    27

    28

   10:00

   11:00

   12:00

   13:00

   14:00

   15:00

   <button @click="customEventCreation">
     button
   </button>
   
   <vue-cal
     ref="vuecal"
     small
     :time-from="10 * 60"
     :time-to="16 * 60"
     :disable-views="['years', 'year']"
     hide-view-selector
     hide-title-bar
     hide-weekends
     editable-events
     :cell-click-hold="false"
     :drag-to-create-event="false">
   </vue-cal>

   <button @click="customEventCreation"> button </button> <vue-cal ref="vuecal" small :time-from="10 * 60" :time-to="16 * 60" :disable-views="['years', 'year']" hide-view-selector hide-title-bar hide-weekends editable-events :cell-click-hold="false" :drag-to-create-event="false"> </vue-cal>

   Then you can give custom event attributes as you wish:

   // In methods.
   customEventCreation () {
       const dateTime = prompt('Create event on (YYYY-MM-DD HH:mm)', '2025-03-28 13:15')
   
       // Check if date format is correct before creating event.
       if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/.test(dateTime)) {
         this.$refs.vuecal.createEvent(
           // Formatted start date and time or JavaScript Date object.
           dateTime,
           // Event duration in minutes (Integer).
           120,
           // Custom event props (optional).
           { title: 'New Event', content: 'yay! 🎉', class: 'blue-event' }
         )
       } else if (dateTime) alert('Wrong date format.')
   }
   

   // In methods. customEventCreation () { const dateTime = prompt('Create event on (YYYY-MM-DD HH:mm)', '2025-03-28 13:15') // Check if date format is correct before creating event. if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/.test(dateTime)) { this.$refs.vuecal.createEvent( // Formatted start date and time or JavaScript Date object. dateTime, // Event duration in minutes (Integer). 120, // Custom event props (optional). { title: 'New Event', content: 'yay! 🎉', class: 'blue-event' } ) } else if (dateTime) alert('Wrong date format.') }

3. Adding a dialog box to the cell click & hold behavior

   By default, event will be created with these attributes:

   {
       start: {Date}, // Starting from the cursor position in the clicked day cell.
       end: {Date}, // Event start + 2 hours.
       title: '',
       content: '',
       split /* if any */: {Integer | String} // The current day split id that was clicked.
   }
   

   { start: {Date}, // Starting from the cursor position in the clicked day cell. end: {Date}, // Event start + 2 hours. title: '', content: '', split /* if any */: {Integer | String} // The current day split id that was clicked. }

   If you want to customize those attributes you can modify the event directly through the callback function that you provide to :on-event-create as follows:
   

   // :on-event-create="onEventCreate", in template.
   
   /**
   * @param event {Object} The newly created event that you can override.
   * @param deleteEventFunction {Function} Allows you to delete this event programmatically.
   * @return {Object | false} The event to be passed back to Vue Cal, or false to reject creation.
   */
   onEventCreate (event, deleteEventFunction) {
       // You can modify event here and return it.
       // You can also return false to reject the event creation.
       return event
   }
   

   // :on-event-create="onEventCreate", in template. /** * @param event {Object} The newly created event that you can override. * @param deleteEventFunction {Function} Allows you to delete this event programmatically. * @return {Object | false} The event to be passed back to Vue Cal, or false to reject creation. */ onEventCreate (event, deleteEventFunction) { // You can modify event here and return it. // You can also return false to reject the event creation. return event }

   In this example, we are adding a dialog box to the cell click & hold.
   The dialog box will allow you to set all the event attributes.

    24

    25

    26

    27

    28

   10:00

   11:00

   12:00

   13:00

   14:00

   15:00

   <vue-cal
       small
       :time-from="10 * 60"
       :time-to="16 * 60"
       :disable-views="['years', 'year']"
       hide-view-selector
       hide-title-bar
       hide-weekends
       editable-events
       :drag-to-create-event="false"
       :on-event-create="onEventCreate">
   </vue-cal>

   <vue-cal small :time-from="10 * 60" :time-to="16 * 60" :disable-views="['years', 'year']" hide-view-selector hide-title-bar hide-weekends editable-events :drag-to-create-event="false" :on-event-create="onEventCreate"> </vue-cal>

<!-- Using Vuetify (but we prefer Wave UI 🤘) -->
<v-dialog v-model="showEventCreationDialog" :persistent="true" max-width="420">
  <v-card>
    <v-card-title>
      <v-input v-model="selectedEvent.title" placeholder="Event Title" />
    </v-card-title>
    <v-card-text>
      <v-textarea v-model="selectedEvent.content" placeholder="Event Content" />
      <v-flex>
        <v-select
          :items="eventsCssClasses"
          placeholder="Event CSS Class"
          @change="selectedEvent.class = $event"
          :value="selectedEvent.class" />
        <v-switch v-model="selectedEvent.background" label="background Event" />
      </v-flex>
      <v-flex>
        <v-btn @click="cancelEventCreation()">Cancel</v-btn>
        <v-btn @click="closeCreationDialog()">Save</v-btn>
      </v-flex>
    </v-card-text>
  </v-card>

<!-- Using Vuetify (but we prefer Wave UI 🤘) --> <v-dialog v-model="showEventCreationDialog" :persistent="true" max-width="420"> <v-card> <v-card-title> <v-input v-model="selectedEvent.title" placeholder="Event Title" /> </v-card-title> <v-card-text> <v-textarea v-model="selectedEvent.content" placeholder="Event Content" /> <v-flex> <v-select :items="eventsCssClasses" placeholder="Event CSS Class" @change="selectedEvent.class = $event" :value="selectedEvent.class" /> <v-switch v-model="selectedEvent.background" label="background Event" /> </v-flex> <v-flex> <v-btn @click="cancelEventCreation()">Cancel</v-btn> <v-btn @click="closeCreationDialog()">Save</v-btn> </v-flex> </v-card-text> </v-card>

data: () => ({
  selectedEvent: null,
  showEventCreationDialog: false,
  eventsCssClasses: ['leisure', 'sport', 'health']
}),
methods: {
  onEventCreate (event, deleteEventFunction) {
    this.selectedEvent = event
    this.showEventCreationDialog = true
    this.deleteEventFunction = deleteEventFunction

    return event
  },
  cancelEventCreation () {
    this.closeCreationDialog()
    this.deleteEventFunction()
  },
  closeCreationDialog () {
    this.showEventCreationDialog = false
    this.selectedEvent = {}
  }
}

data: () => ({ selectedEvent: null, showEventCreationDialog: false, eventsCssClasses: ['leisure', 'sport', 'health'] }), methods: { onEventCreate (event, deleteEventFunction) { this.selectedEvent = event this.showEventCreationDialog = true this.deleteEventFunction = deleteEventFunction return event }, cancelEventCreation () { this.closeCreationDialog() this.deleteEventFunction() }, closeCreationDialog () { this.showEventCreationDialog = false this.selectedEvent = {} } }

With the same method, you can open a dialog at the end of the event drag-creation.

 24
 25
 26
 27
 28
10:00
11:00
12:00
13:00
14:00
15:00

This example uses the same dialog box and cancelEventCreation & closeCreationDialog functions as the previous example.
Note that event-drag-create gets fired on mouseup of the drag-create, whereas onEventCreate gets called as soon as the event appears on screen, while dragging.

<vue-cal
  small
  :time-from="10 * 60"
  :time-to="16 * 60"
  :disable-views="['years', 'year']"
  hide-view-selector
  hide-title-bar
  hide-weekends
  editable-events
  :on-event-create="onEventCreate"
  @event-drag-create="showEventCreationDialog = true">
</vue-cal>

<vue-cal small :time-from="10 * 60" :time-to="16 * 60" :disable-views="['years', 'year']" hide-view-selector hide-title-bar hide-weekends editable-events :on-event-create="onEventCreate" @event-drag-create="showEventCreationDialog = true"> </vue-cal>

data: () => ({
  selectedEvent: null,
  showEventCreationDialog: false
}),
methods: {
  // Called when drag-create threshold is reached (when the event appears on screen),
  // but before releasing the drag; so, it should not open the dialog box yet.
  onEventCreate (event, deleteEventFunction) {
    this.selectedEvent = event
    this.deleteEventFunction = deleteEventFunction

    return event
  }
}

data: () => ({ selectedEvent: null, showEventCreationDialog: false }), methods: { // Called when drag-create threshold is reached (when the event appears on screen), // but before releasing the drag; so, it should not open the dialog box yet. onEventCreate (event, deleteEventFunction) { this.selectedEvent = event this.deleteEventFunction = deleteEventFunction return event } }

# Event drag & dropLIMITED SUPPORT ON TOUCH DEVICES

In addition to the obvious event dragging itself, there are quite a few things that are good to know about the drag & drop.

priority_high

• Drag & drop is a module (to keep Vue Cal light weight).
  For Vue Cal versions that don't support ESM (prior 4.3.4 on Vue 3 or 3.11.0 on Vue 2), it must be loaded separately:
  import 'vue-cal/dist/drag-and-drop.js'.
• Drag & drop is only available on single day events for now.

Dragging over header

• While you drag an event over the view selector buttons, or the previous and next arrows, or even the today button, they will get into a highlighted state and if you hold over for a few milliseconds they will change the view so you can drop the event you are holding on another date of the calendar.
• while dragged over, the previous and next buttons will keep changing the view until you go away from the button.
• Dragging an event over the today button will take you to Today's date, and if you're in a years or year view it will also go to the next available narrower view from month downwards.

Dragging over a cell

• If you drag an event over a cell or a split (ref. splitting days), the cell/split gets into a highlighted state, showing you where the event would go if you drop it.
• You can drop an event in any cell. But because it does not make much sense to drop it into a years or year view, if you hold over a cell in these views or in month view, it will go to the next available narrower view so you can at least see a day cell.

Dropping the event into a cell or somewhere not allowed

• If you drop the event outside of the calendar or anywhere it's not possible, it will snap back to its original place and the original view will be restored if it was changed by navigating away.
• If you drop the event in a cell and it would start before midnight (00:00), it is placed at midnight, keeping its duration.
• If you drop the event in a cell and it would end after midnight (24:00), its duration will be truncated to end at midnight (24:00).
• By default, when you drop the event it will start exactly where you dropped it, but if you prefer you can use the snapToTime option to dictate where it should snap to (refer to snapToTime in the API section).
  If you wonder why it does not represent the snapping while dragging, it's not possible to do it with the native HTML5 drag & drop.

Emitted events

• When dropping an event into a cell, theevent-drop and event-change events are emitted.

CSS styles

• You can change the highlighted style of the header buttons or cells through these CSS classes:
  • .vuecal__view-btn--highlighted
  • .vuecal__today-btn--highlighted
  • .vuecal__arrow--highlighted
  • .vuecal__cell--highlighted
  • .vuecal__cell-split--highlighted
• You can change the style of the event being dragged through the .vuecal__event--dragging CSS class.
• While dragging, a copy of the original event is made and that's what you drag (native HTML5 drag & drop behavior). The original event receive the .vuecal__event--static CSS class which hides it with opacity: 0.
  You can use that class to give it a different style.

<vue-cal
  selected-date="2018-11-19"
  today-button
  :time-from="10 * 60"
  :time-to="23 * 60"
  hide-weekends
  :snap-to-time="15"
  editable-events
  :events="events"
  :split-days="[{ id: 1, label: 'Dr 1' }, { id: 2, label: 'Dr 2' }]"
  class="vuecal--full-height-delete">
</vue-cal>

.vuecal__event--dragging {background-color: rgba(60, 60, 60, 0.3);}

# External events drag & dropLIMITED SUPPORT ON TOUCH DEVICES

You can drag & drop events from an external source as long as they are HTML5 draggable (this will change when touch devices are supported).
It is also possible to move an event from one calendar to another.

In the external event, you can set a duration property: it will be used to represent the duration of the event on Vue Cal when it has no date.
If the duration is missing, the default will be 2 hours.

wb_incandescentImportant note when dragging external events into Vue Cal: