Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                #q-app
  div(class="row q-gutter-md")
    q-select(class="col-2" v-model="mini" :options="miniOptions" label="Mini mode" outlined dense options-dense)
    q-toggle(v-model="dark") Dark
    q-select(class="col" v-model="firstDayWeek" label="First day week" outlined dense options-dense :options="days" map-options emit-value)
  br
  q-calendar(:events="events" @event="onEvent" :mini="mini" :dark="dark" :first-day-week="firstDayWeek")
              
            
!

CSS

              
                $primary = #4c7aae


$shadow-calendar = 0 1px 3px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12)
$color-border = #bdbdbd
$color-holiday = lightness($color-border, 85%)

/** TEXT */
text-first-capitalize()
    &:first-letter
        text-transform: uppercase !important

text-first-only()
    display block
    visibility hidden

    &:first-letter
        visibility visible
/** TEXT */

.calendar-event-sub
    $size-subevent = 1.2em
    width $size-subevent
    height $size-subevent
    line-height $size-subevent
    font-size $size-subevent
    min-width 0
    border-radius 50%
    border 1px solid #ffffff
    display inline-block
    margin-right 4px
    text-align center
    font-weight bold
    color #ffffff
    .q-icon
      font-size inherit
      line-height inherit

.q-calendar
    .calendar-day,
    .calendar-week-item
        width 14.285%

    .calendar-event
        width 14.285%
        white-space nowrap
        text-overflow ellipsis
        overflow hidden
        box-shadow $shadow-calendar
        font-size .8em
        cursor pointer
        margin 2px 0
        padding 4px 6px
        color #ffffff
        background-color $primary
        position relative

        &.calendar-event-void
            color transparent
            background-color transparent
            box-shadow none
            cursor auto
        
        &.calendar-event-first
            border-top-left-radius 1em
            border-bottom-left-radius 1em
        &.calendar-event-last
            border-top-right-radius 1em
            border-bottom-right-radius 1em

    for size in (1..7)
        .calendar-event-size-{size}
            width floor((size/7) * 100%, 2)

    .calendar-header
        .calendar-header-title
            text-align center
            font-weight 600

    .calendar-header
        padding 2px

    .calendar-body
        padding 0
        .calendar-week
            border-top 1px solid $color-border
            border-bottom 1px solid $color-border
            color #757575

            .calendar-week-item
                font-size 1em
                text-align center
                border-right 1px solid $color-border
                padding 2px
                &:last-child
                    border-right none
                &.calendar-week-item-holiday
                    // background-color $color-holiday
        
        .calendar-content
            $size-day = 2em
            .calendar-week-row
                border-bottom 1px solid $color-border
                min-height 6em
                position relative

                &:last-child
                    border-bottom none

                .calendar-week-days
                    position absolute
                    width 100%
                    height 100%
                .calendar-week-events
                    padding-top $size-day

            .calendar-day
                border-right 1px solid $color-border
                position relative

                &:last-child
                    border-right none

                .calendar-day-number
                    font-size 0.9em
                    height $size-day
                    width $size-day
                    text-align center
                    line-height $size-day

                &.calendar-day-current
                    .calendar-day-number
                        border-radius 50%
                        color #ffffff
                        background-color $primary !important
                        box-shadow $shadow-calendar

                &.calendar-day-other
                    .calendar-day-number
                        opacity 0.6
                &.calendar-day-holiday
                    // background-color $color-holiday
                    color #ff0000

    &.mobile
        .calendar-body
            padding 0
            .calendar-week
                padding 0
                border none

            .calendar-week-item
                text-align center
                padding-left 1em
                text-first-only()
                border none

            .calendar-content
                $size-day = 3em
                .calendar-week-row
                    min-height $size-day
                    border none
                    .calendar-day-number
                        width $size-day
                        height $size-day
                        margin 0 auto
                        line-height $size-day
                        border-radius 50%
                        cursor pointer

                        &:hover,
                        &:focus
                            background-color rgba(0,0,0,0.1)
                
                .calendar-day
                    border none
                    &.calendar-day-event
                        &:after
                            $size-event = 0.4em
                            content ''
                            position absolute
                            background-color $primary
                            width ($size-event * 1.5)
                            height $size-event
                            border-radius 50%
                            bottom $size-event
                            margin 0 auto
                            left 0
                            right 0
                            box-shadow $shadow-calendar
                        &.calendar-day-current:after
                            background-color: #ffffff

.q-modal-month
  .q-list
    padding 0
    border 0
  .calendar-month-detail.q-item
    border-width 1px 0 0 0.3rem
    border-style solid
    margin 2px 0 0 0
    border-top none
    border-bottom 1px solid #e0e0e0
    background-color #ffffff
  .q-card
    background-color #eeeeee
  .calendar-chip
    background-color #562598
    color white
    border-radius 8px
    width 30px
    height 16px
    text-align center
    line-height 16px
  .calendar-event-sub
    margin-right 0
    width auto
    height auto
    color #000
    display flex
              
            
!

JS

              
                /*************** UTILS **********************/
const { date } = Quasar.utils;
const {
  QCard,
  QTooltip,
  QBtn,
  QIcon,
  QDialog,
  QList,
  QItem,
  QItemSection,
  QItemLabel
} = Quasar;

function format(day, format) {
  return date.formatDate(day, format);
}

function getLabelMonth(day) {
  return format(day, "MMMM YYYY");
}

function getFormatDate(day, isOnlyDate) {
  return format(day, "DD/MM/YYYY" + (isOnlyDate ? "" : " hh:mm:ss A"));
}

function getDate(day) {
  const cloneDate = new Date(day);
  cloneDate.setHours(0, 0, 0, 0);
  return cloneDate;
}

function getTime(day) {
  return getDate(day).getTime();
}

function diffDays(day, daySecond) {
  return (getTime(day) - getTime(daySecond)) / (1000 * 60 * 60 * 24);
}

function getFirstDateMonth(day) {
  const newDate = getDate(day);
  newDate.setDate(1);
  return newDate;
}

/*function isBetweenDate(day, first, last) {
  const time = getDate(day).getTime();
  return getDate(first).getTime() <= time && time <= getDate(last).getTime();
}*/

function getDayIdentifier (day) {
  return day.getFullYear() * 10000 + (day.getMonth() + 1) * 100 + day.getDate()
}


function isBetweenDate(day, first, last) {
  const time = getDayIdentifier(day);
  return getDayIdentifier(first) <= time && time <= getDayIdentifier(last);
}

function equalDate(day, daySecond) {
  return getDate(day).getTime() === getDate(daySecond).getTime();
}

// Others
function isGreater(breakPoint = "md") {
  // xs: x <= 576
  // sm: 576 < x < 768
  // md: 768 < x < 992
  // lg: 992 < x < 1200
  // xl: 1200 < x
  return Quasar.Screen.gt[breakPoint] || Quasar.Screen[breakPoint];
}

function indexOf(arr, cb, initial = 0) {
  if (typeof cb === "function") {
    for (; initial < arr.length; initial++) {
      if (cb(arr[initial], initial)) {
        return initial;
      }
    }
  } else {
    for (; initial < arr.length; initial++) {
      if (cb === arr[initial]) {
        return initial;
      }
    }
  }
  return -1;
}
/************** END UTILS *********************/

const QCalendarMixin = {
  props: {
    optionTitle: {
      type: String,
      default: "title"
    },
    optionStart: {
      type: String,
      default: "start"
    },
    optionEnd: {
      type: String,
      default: "end"
    },
    optionColor: {
      type: String,
      default: "color"
    },
    optionSubcolor: {
      type: String,
      default: "subcolor"
    },
    optionCharacter: {
      type: String,
      default: "character"
    },
    optionIcon: {
      type: String,
      default: "icon"
    },
    optionHoliday: {
      type: String,
      default: "holiday"
    },
    optionOnlydate: {
      type: String,
      default: "onlydate"
    }
  }
};

const QCalendarDay = {
  mixins: [QCalendarMixin],
  props: {
    events: {
      type: Array,
      default: () => []
    },
    date: {
      type: [Date, String, Number]
    }
  },
  computed: {
    title() {
      return format(this.date, "DD MMMM YYYY");
    }
  },
  methods: {
    onClick(event) {
      this.$emit("click", event);
    }
  },
  render(h) {
    return h(QList, [
      h(
        "q-item-label",
        {
          class: "text-primary text-bold row",
          props: {
            header: true
          }
        },
        [
          h(
            "div",
            {
              class: "col"
            },
            this.title
          ),
          h(
            "div",
            {
              class: "calendar-chip"
            },
            this.events.length
          )
        ]
      ),
      this.events.map(event => {
        return h(
          "q-item",
          {
            class: "calendar-month-detail",
            style: {
              "border-left-color": event[this.optionColor]
            },
            props: {
              clickable: true
            },
            directives: [{ name: "ripple" }],
            on: {
              click: () => {
                this.onClick(event);
              }
            }
          },
          [
            event[this.optionSubcolor] !== void 0 ||
            event[this.optionCharacter] !== void 0 ||
            event[this.optionIcon] !== void 0
              ? h(
                  "q-item-section",
                  {
                    class: "calendar-event-sub",
                    props: {
                      avatar: true
                    },
                    domProps: {
                      innerHTML:
                        event[this.optionIcon] === void 0
                          ? event[this.optionCharacter] === void 0
                            ? event[this.optionCharacter]
                            : "&nbsp;"
                          : void 0
                    },
                    style: {
                      "background-color": event[this.optionSubcolor]
                    }
                  },
                  event[this.optionIcon] !== void 0
                    ? [
                        h(QIcon, {
                          props: {
                            name: event[this.optionIcon]
                          }
                        })
                      ]
                    : void 0
                )
              : void 0,
            h(QItemSection, [
              h(QItemLabel, event[this.optionTitle]),
              h(
                QItemLabel,
                {
                  props: {
                    caption: true
                  }
                },
                [
                  h("span", "Start: "),
                  h(
                    "span",
                    getFormatDate(
                      event[this.optionStart],
                      event[this.optionOnlydate]
                    )
                  )
                ]
              ),
              h(
                QItemLabel,
                {
                  props: {
                    caption: true
                  }
                },
                [
                  h("span", "End: "),
                  h(
                    "span",
                    getFormatDate(
                      event[this.optionEnd],
                      event[this.optionOnlydate]
                    )
                  )
                ]
              )
            ]),
            h(
              QItemSection,
              {
                props: {
                  avatar: true
                }
              },
              [
                h(QIcon, {
                  props: {
                    name: "keyboard_arrow_right",
                    color: "secondary"
                  }
                })
              ]
            )
          ]
        );
      })
    ]);
  }
};

/**
 * {
 * title <String> - Title,
 * start <Date> - Date start,
 * end <Date> - Date end,
 * color <String> - Hexadecimal color in background,
 * subcolor <String> - Hexadecimal color in border,
 * icon <String> - Icon name for the event,
 * character <String> - Character inside subcolor node,
 * holiday <Boolean> - Is holiday event,
 * onlydate <Boolean> - Only date without hours
 * }
 */

const QCalendar = {
  mixins: [QCalendarMixin],
  props: {
    events: {
      type: Array,
      default() {
        return [];
      }
    },
    value: {
      type: Date,
      default() {
        return new Date();
      }
    },
    selectable: Boolean,
    mini: {
      type: [Boolean, String],
      validator: value => [true, false, 'auto'].indexOf(value) !== -1,
      default: "auto"
    },
    dark: Boolean,
    firstDayWeek: {
      type: Number,
      default: 0,
      validator: value => value >= 0 && value <= 7
    }
  },
  data() {
    return {
      date: new Date(),
      mobileModal: false,
      mobileDate: new Date(),
      eventsDay: []
    };
  },
  watch: {
    value(value) {
      this.date = value;
    }
  },
  computed: {
    isMobile() {
      if (this.mini === 'auto') {
        return isGreater() !== true;
      }
      return this.mini === true;
    }
  },
  created() {
    if (this.value) {
      this.date = new Date(this.value);
    }
  },
  methods: {
    changeMonth(add) {
      const cloneDate = new Date(this.date);
      cloneDate.setMonth(this.date.getMonth() + add);
      this.date = cloneDate;
      this.$emit("input", cloneDate);
      this.$emit("change", {
        year: cloneDate.getFullYear(),
        month: cloneDate.getMonth()
      });
    },
    onEvent(event) {
      this.$emit("event", event);
    },
    clickDay(day, events) {
      if (this.isMobile === true) {
        if (Array.isArray(events) && events.length > 0) {
          this.clickMobile(day, events);
        }
      } else if (this.selectable === true) {
        this.$emit("select", day);
      }
    },
    clickMobile(day, events) {
      this.mobileModal = true;
      this.mobileDate = day;
      this.eventsDay = events;
    },
    createEvent(h, size, event, startWeek, endWeek) {
      const classSize = `calendar-event-size-${size}`;
      if (event) {
        const colorEvent =
          event[this.optionHoliday] === true
            ? "#d09dc2"
            : event[this.optionColor];
        return h(
          "div",
          {
            class: {
              "calendar-event": true,
              [classSize]: true,
              "calendar-event-first":
                getTime(startWeek) <= getTime(event[this.optionStart]),
              "calendar-event-last":
                getTime(event[this.optionEnd]) <= getTime(endWeek)
            },
            style: {
              "background-color": colorEvent
            },
            on: {
              click: () => {
                this.onEvent(event);
              }
            }
          },
          [
            event[this.optionSubcolor] !== void 0 ||
            event[this.optionCharacter] !== void 0 ||
            event[this.optionIcon]
              ? h(
                  "span",
                  {
                    staticClass: "calendar-event-sub",
                    style: {
                      "background-color": event[this.optionSubcolor],
                      border:
                        event[this.optionIcon] !== void 0 ? "none" : void 0
                    },
                    domProps: {
                      innerHTML:
                        event[this.optionIcon] === void 0
                          ? this.event[this.optionCharacter] !== void 0
                            ? event[this.optionCharacter]
                            : "&nbsp;"
                          : void 0
                    }
                  },
                  event[this.optionIcon] !== void 0
                    ? [
                        h(QIcon, {
                          props: {
                            name: event[this.optionIcon]
                          }
                        })
                      ]
                    : void 0
                )
              : void 0,
            h("span", event[this.optionTitle]),
            h(QTooltip, [
              h("div", event[this.optionTitle]),
              h("div", [
                h("span", "Start: "),
                h(
                  "span",
                  getFormatDate(
                    event[this.optionStart],
                    event[this.optionOnlydate]
                  )
                )
              ]),
              h("div", [
                h("span", "End: "),
                h(
                  "span",
                  getFormatDate(
                    event[this.optionEnd],
                    event[this.optionOnlydate]
                  )
                )
              ])
            ])
          ]
        );
      } else {
        return h("div", {
          class: ["calendar-event", classSize, "calendar-event-void"],
          domProps: {
            innerHTML: "&nbsp;"
          }
        });
      }
    },
    insertEventWeek(
      h,
      events,
      infoWeek,
      dayStartWeek,
      dayEndWeek,
      index,
      availableDays,
      level
    ) {
      const iWeek = infoWeek[index];
      if (iWeek && iWeek.start >= availableDays) {
        // Si tiene disponible colocar más eventos
        if (iWeek.start - availableDays) {
          events.push(this.createEvent(h, iWeek.start - availableDays));
        }
        // Se construye el evento
        events.push(
          this.createEvent(h, iWeek.size, iWeek.event, dayStartWeek, dayEndWeek)
        );

        if (level !== 0) {
          // Si entro en la recursividad, entonces se elimina el item
          infoWeek.splice(index, 1);
        }

        const currentAvailableDays = iWeek.start + iWeek.size;
        if (currentAvailableDays < 7) {
          // Lo mismo que !!iWeek.end
          const indexNextEvent = indexOf(
            infoWeek,
            w => w.id !== iWeek.id && w.start >= currentAvailableDays
          );
          if (indexNextEvent >= 0) {
            this.insertEventWeek(
              h,
              events,
              infoWeek,
              dayStartWeek,
              dayEndWeek,
              indexNextEvent,
              currentAvailableDays,
              level + 1
            );
          } else {
            this.insertEventWeek(
              h,
              events,
              infoWeek,
              dayStartWeek,
              dayEndWeek,
              index,
              currentAvailableDays,
              level + 1
            );
          }
        } else {
          // Ya no hay más días disponibles
          // End iteration
        }
      } else {
        events.push(this.createEvent(h, 7 - availableDays));
        // End iteration
      }
    },
    getEventsDay(eventsWeek, nDay) {
      if (this.isMobile) {
        return eventsWeek.filter(event => {
          return isBetweenDate(
            nDay,
            event[this.optionStart],
            event[this.optionEnd]
          );
        });
      } else {
        return [];
      }
    }
  },
  render(h) {
    // v0.17: this.$q.i18n
    // v1+: this.$q.lang
    const daysShort = this.$q.lang.date.daysShort;

    // const currentDate = getFirstDateMonth()

    const currentDateMonth = getFirstDateMonth(this.date);
    const year = currentDateMonth.getFullYear();
    const month = currentDateMonth.getMonth();
    const rows = 6; // weekCount(year, month, this.firstDayWeek)
    const weeks = [];

    const initialDay =
      1 - (currentDateMonth.getDay() - this.firstDayWeek + 7) % 7;

    for (let numberWeek = 0; numberWeek < rows; numberWeek++) {
      const events = [];
      const countDaysAux = 7 * numberWeek;
      const dayStartWeek = new Date(year, month, countDaysAux + initialDay);
      const dayEndWeek = new Date(year, month, countDaysAux + initialDay + 6);

      // Calculando eventos por semana
      const eventsWeek = this.events.filter(event => {
        return (
          (getTime(event[this.optionEnd]) < getTime(dayEndWeek) &&
            getTime(event[this.optionEnd]) >= getTime(dayStartWeek)) ||
          getTime(event[this.optionEnd]) === getTime(dayEndWeek) ||
          (getTime(event[this.optionEnd]) > getTime(dayEndWeek) &&
            getTime(event[this.optionStart]) <= getTime(dayEndWeek))
        );
      });

      if (!this.isMobile) {
        const infoWeek = eventsWeek
          .map((event, i) => {
            const start =
              getTime(event[this.optionStart]) <= getTime(dayStartWeek)
                ? 0
                : diffDays(event[this.optionStart], dayStartWeek);
            const end =
              getTime(event[this.optionEnd]) >= getTime(dayEndWeek)
                ? 0
                : diffDays(dayEndWeek, event[this.optionEnd]);
            return {
              start, // Position initial day [0-6]
              end, // Number days available
              size: 7 - (start + end), // Size current event (in days)
              event, // Info
              id: i
            };
          })
          .sort((a, b) => a.start - b.start);

        infoWeek.forEach((item, i) => {
          this.insertEventWeek(
            h,
            events,
            infoWeek,
            dayStartWeek,
            dayEndWeek,
            i,
            0,
            0
          );
        });
      }

      // Building each day number
      const arrDays = [];
      for (let i = 0; i < 7; i++) {
        const nDay = getDate(dayStartWeek);
        nDay.setDate(nDay.getDate() + i);

        const eventsDay = Object.freeze(this.getEventsDay(eventsWeek, nDay));

        arrDays.push(
          h(
            "div",
            {
              class: {
                "calendar-day": true,
                "calendar-day-event": eventsDay.length,
                "calendar-day-current": equalDate(nDay, new Date()),
                "calendar-day-other": nDay.getMonth() !== month,
                "calendar-day-holiday": nDay.getDay() === 0
              },
              on: {
                click: () => {
                  this.clickDay(nDay, eventsDay);
                }
              }
            },
            [
              h(
                "div",
                {
                  class: "calendar-day-number"
                },
                nDay.getDate()
              )
            ]
          )
        );
      }

      const week = h(
        "div",
        {
          staticClass: "calendar-week-row"
        },
        [
          h(
            "div",
            {
              staticClass: "calendar-week-days row"
            },
            arrDays
          ),
          h(
            "div",
            {
              staticClass: "calendar-week-events row"
            },
            events
          )
        ]
      );
      weeks.push(week);
    }

    const weeksComponent = daysShort.map((value, i) => {
      const newIndex = (i + this.firstDayWeek) % 7;

      return h(
        "div",
        {
          staticClass: "calendar-week-item"
          /* class: {
          // 'calendar-week-item-holiday': newIndex === 0
        } */
        },
        daysShort[newIndex]
      );
    });

    return h(
      QCard,
      {
        class: {
          "q-calendar": true,
          mobile: this.isMobile
        },
        props: {
          dark: this.dark
        }
      },
      [
        h(
          "div",
          {
            class: "calendar-header row"
          },
          [
            h(QBtn, {
              props: {
                icon: "chevron_left",
                flat: true,
                round: true
              },
              on: {
                click: () => {
                  this.changeMonth(-1);
                }
              }
            }),
            h(
              "div",
              {
                class: "calendar-header-title col self-center"
              },
              getLabelMonth(currentDateMonth)
            ),
            h(QBtn, {
              props: {
                icon: "chevron_right",
                flat: true,
                round: true
              },
              on: {
                click: () => {
                  this.changeMonth(1);
                }
              }
            })
          ]
        ),
        h(
          "div",
          {
            class: "calendar-body"
          },
          [
            h(
              "div",
              {
                class: "calendar-week row"
              },
              weeksComponent
            ),
            h(
              "div",
              {
                class: "calendar-content"
              },
              weeks
            )
          ]
        ),
        h(
          QDialog,
          {
            props: {
              contentClass: "q-modal-month",
              value: this.mobileModal,
              title: "Seleccione un evento",
              ok: false,
              footer: false
            },
            on: {
              input: value => {
                this.mobileModal = false;
              }
            }
          },
          [
            h(QCard, [
              h(QCalendarDay, {
                props: {
                  events: this.eventsDay,
                  date: this.mobileDate,
                  // mixin props
                  optionTitle: this.optionTitle,
                  optionStart: this.optionStart,
                  optionEnd: this.optionEnd,
                  optionColor: this.optionColor,
                  optionSubcolor: this.optionSubcolor,
                  optionIcon: this.optionIcon,
                  optionCharacter: this.optionCharacter,
                  optionHoliday: this.optionHoliday,
                  optionOnlydate: this.optionOnlydate
                },
                on: {
                  click: this.onEvent
                }
              })
            ])
          ]
        )
      ]
    );
  }
};

const CURRENT_DAY = new Date();

function getCurrentDay(day) {
  const newDay = new Date(CURRENT_DAY);
  newDay.setDate(day);
  return newDay;
}

const app = new Vue({
  el: "#q-app",
  components: { QCalendar },
  data() {
    return {
      miniOptions: [true, false, 'auto'],
      mini: false,
      dark: false,
      events: [
        {
          id: 1,
          title: "April Foold Day",
          color: "#ff9800",
          start: getCurrentDay(1),
          end: getCurrentDay(1)
        },
        {
          id: 2,
          title: "Sisters Birthday",
          color: "#4caf50",
          start: getCurrentDay(4),
          end: getCurrentDay(4),
          icon: "cake"
        },
        {
          id: 3,
          title: "Meeting",
          color: "#f44336",
          start: getCurrentDay(8),
          end: getCurrentDay(8),
          icon: "group"
        },
        {
          id: 4,
          title: "Lunch",
          color: "#009688",
          start: getCurrentDay(8),
          end: getCurrentDay(8),
          icon: "free_breakfast"
        },
        {
          id: 5,
          title: "Visit Mom",
          color: "#607d8b",
          start: getCurrentDay(20),
          end: getCurrentDay(20),
          icon: "card_giftcard"
        },
        {
          id: 6,
          title: "Conference",
          color: "#2196f3",
          start: getCurrentDay(22),
          end: getCurrentDay(22),
          icon: "ondemand_video"
        },
        {
          id: 7,
          title: "Girlfriend",
          color: "#009688",
          start: getCurrentDay(22),
          end: getCurrentDay(22),
          icon: "fastfood"
        },
        {
          id: 8,
          title: "Rowing",
          color: "#9c27b0",
          start: getCurrentDay(27),
          end: getCurrentDay(28),
          icon: "rowing"
        },
        {
          id: 9,
          title: "Vacation",
          color: "#9c27b0",
          start: getCurrentDay(29),
          end: getCurrentDay(34),
          icon: "flight"
        }
      ],
      firstDayWeek: 0,
      days: this.$q.lang.date.days.map((label, value) => ({ label, value }))
    };
  },
  methods: {
    onEvent(event) {
      this.$q.dialog({
        title: "Event",
        message: JSON.stringify(event)
      });
    }
  }
});

              
            
!
999px

Console