Calendar

The calendar component allows a user to view and create events in a day, week or month view. See the Full Calendar docs (opens new window) for more information.

Importing

For code splitting optimizations, Calendar is exported separately and must be imported as shown here:

import { CiCalendar } from '@ci/stratus-components/build/calendar'

Demo

Click here to view this demo fullsceen.

<template>
  <ci-calendar
    :unavailable-time="unavailableTime"
    :timezones="timeZones"
    :create-event-options="selectOptions"
    :event-content-func="eventContent"
  />
</template>

<script>
export default {
  methods: {
    dateToTimeString (date) {
      return date.toLocaleString('en-US', {
        hour: 'numeric',
        minute: 'numeric',
        hour12: true
      }).replace(/\s+/g, '')
    },

    getEventTimeWithTimezone (startDate, endDate, timezone) {
      const startDateStr = startDate !== null ? this.dateToTimeString(startDate) : '?'
      const endDateStr = endDate !== null ? this.dateToTimeString(endDate) : '?'
      return `${startDateStr} (${endDateStr} ${timezone})`
    },

    eventContent (arg) {
      return this.getEventTimeWithTimezone(arg.event.start, arg.event.end, this.timezone)
    }
  },

  data() {
    return {
      selectOptions: {
        duration: 45
      },
      timezone: 'UTC',
      unavailableTime: [
        {
          start: '2021-11-16T10:00:00',
          end: '2021-11-16T11:00:00'
        },
        {
          start: '2021-11-17T09:30:00',
          end: '2021-11-17T01:00:00'
        },
        {
          start: '2021-11-18T09:00:00',
          end: '2021-11-18T01:00:00'
        },
        {
          start: '2021-11-19',
          end: '2021-11-19'
        }
      ],
      timeZones: [
        {
          id: 'Pacific Standard Time',
          utcOffset: '-08:00',
          displayName: '(UTC-08:00) Pacific Time (US & Canada)',
          text: 'Pacific Standard Time',
          value: 'America/Los_Angeles',
          shortName: 'PT'
        },
        {
          id: 'Mountain Standard Time',
          utcOffset: '-07:00',
          displayName: '(UTC-07:00) Mountain Time (US & Canada)',
          text: 'Mountain Standard Time',
          value: 'America/Denver',
          shortName: 'MT'
        },
        {
          id: 'Central Standard Time',
          utcOffset: '-06:00',
          displayName: '(UTC-06:00) Central Time (US & Canada)',
          text: 'Central Standard Time',
          value: 'America/Chicago',
          shortName: 'CT'
        },
        {
          id: 'Eastern Standard Time',
          utcOffset: '-05:00',
          displayName: '(UTC-05:00) Eastern Time (US & Canada)',
          text: 'Eastern Standard Time',
          value: 'America/New_York',
          shortName: 'ET'
        }
      ]
    }
  }
}
</script>

Calendar height and default scroll position

It is possible to make the calendar scrollable by using the default-scroll-position prop combined with the calendar-height prop.

default-scroll-position accepts calendar view start time string in the 'HH:mm:ss' format. calendar-height accepts height in px. This makes the calendar scrollable and sets its height, timezone selector included, to the given value.

By default calendar height is set to 'auto'.

Click here to view scrollable calendar demo fullsceen.

<template>
  <ci-calendar
    :unavailable-time="unavailableTime"
    :timezones="timeZones"
    :create-event-options="selectOptions"
    :event-content-func="eventContent"
    :defaultScrollPosition="'08:00:00'"
    :time-window="['00:00:00', '24:00:00']"
    :calendar-height="getCalendarHeight()"
  />
</template>

<script>
export default {
  methods: {
    dateToTimeString (date) {
      return date.toLocaleString('en-US', {
        hour: 'numeric',
        minute: 'numeric',
        hour12: true
      }).replace(/\s+/g, '')
    },

    getEventTimeWithTimezone (startDate, endDate, timezone) {
      const startDateStr = startDate !== null ? this.dateToTimeString(startDate) : '?'
      const endDateStr = endDate !== null ? this.dateToTimeString(endDate) : '?'
      return `${startDateStr} (${endDateStr} ${timezone})`
    },

    eventContent (arg) {
      return this.getEventTimeWithTimezone(arg.event.start, arg.event.end, this.timezone)
    },

    getCalendarHeight () {
      return window.innerHeight
    }
  },

  data() {
    return {
      selectOptions: {
        duration: 45
      },
      timezone: 'UTC',
      unavailableTime: [
        {
          start: '2021-11-16T10:00:00',
          end: '2021-11-16T11:00:00'
        },
        {
          start: '2021-11-17T09:30:00',
          end: '2021-11-17T01:00:00'
        },
        {
          start: '2021-11-18T09:00:00',
          end: '2021-11-18T01:00:00'
        },
        {
          start: '2021-11-19',
          end: '2021-11-19'
        }
      ],
      timeZones: [
        {
          id: 'Pacific Standard Time',
          utcOffset: '-08:00',
          displayName: '(UTC-08:00) Pacific Time (US & Canada)',
          text: 'Pacific Standard Time',
          value: 'America/Los_Angeles',
          shortName: 'PT'
        },
        {
          id: 'Mountain Standard Time',
          utcOffset: '-07:00',
          displayName: '(UTC-07:00) Mountain Time (US & Canada)',
          text: 'Mountain Standard Time',
          value: 'America/Denver',
          shortName: 'MT'
        },
        {
          id: 'Central Standard Time',
          utcOffset: '-06:00',
          displayName: '(UTC-06:00) Central Time (US & Canada)',
          text: 'Central Standard Time',
          value: 'America/Chicago',
          shortName: 'CT'
        },
        {
          id: 'Eastern Standard Time',
          utcOffset: '-05:00',
          displayName: '(UTC-05:00) Eastern Time (US & Canada)',
          text: 'Eastern Standard Time',
          value: 'America/New_York',
          shortName: 'ET'
        }
      ]
    }
  }
}
</script>

Events

Event	Payload	Description
@navigation	{ startDate: '...', endDate: '...'}	Emitted when prev, next, today, day, week or month buttons are clicked