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

<template>
  <ci-calendar
    :unavailable-time="unavailableTime"
    :timezones="timeZones"
    :timezone="timezone"
    :create-event-options="selectOptions"
    :event-content-func="eventContent"
    :time-window="['00:00:00', '24:00:00']"
  />
</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: {
            "id": "Pacific Standard Time",
            "displayName": "(UTC-07:00) Pacific Time (US & Canada)",
            "standardName": "Pacific Standard Time",
            "iana": "America/Los_Angeles",
            "shortName": "PT",
            "utcOffset": "-07:00:00"
        },
      unavailableTime: [],
      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'
        }
      ]
    }
  },
  mounted () {
    const now = new Date()
    const today = () => new Date(now.getFullYear(), now.getMonth(), now.getDate())

    const formatDateOnly = (date) => {
      return date.toISOString().split('T')[0]
    }

    const daysAfter = (days) => {
      return new Date(+today() + 1000 * 60 * 60 * 24 * days)
    }

    this.unavailableTime.push(...[
      {
        start: new Date(today().setHours(12, 0, 0)).toISOString(),
        end: new Date(today().setHours(13, 0, 0)).toISOString()
      },
      {
        start: new Date(daysAfter(1).setHours(13, 0, 0)).toISOString(),
        end: new Date(daysAfter(1).setHours(14, 0, 0)).toISOString()
      },
      {
        start: new Date(daysAfter(1).setHours(14, 30, 0)).toISOString(),
        end: new Date(daysAfter(1).setHours(16, 45, 0)).toISOString()
      },
      {
        start: formatDateOnly(daysAfter(3)),
        end: formatDateOnly(daysAfter(3))
      }
    ])
  }
}
</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'.

<template>
  <ci-calendar
    :unavailable-time="unavailableTime"
    :timezones="timeZones"
    :timezone="timezone"
    :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: {
            "id": "Pacific Standard Time",
            "displayName": "(UTC-07:00) Pacific Time (US & Canada)",
            "standardName": "Pacific Standard Time",
            "iana": "America/Los_Angeles",
            "shortName": "PT",
            "utcOffset": "-07:00:00"
        },
      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'
        }
      ]
    }
  },

  mounted () {
    const now = new Date()
    const today = () => new Date(now.getFullYear(), now.getMonth(), now.getDate())

    const formatDateOnly = (date) => {
      return date.toISOString().split('T')[0]
    }

    const daysAfter = (days) => {
      return new Date(+today() + 1000 * 60 * 60 * 24 * days)
    }

    this.unavailableTime.push(...[
      {
        start: new Date(today().setHours(12, 0, 0)).toISOString(),
        end: new Date(today().setHours(13, 0, 0)).toISOString()
      },
      {
        start: new Date(daysAfter(1).setHours(13, 0, 0)).toISOString(),
        end: new Date(daysAfter(1).setHours(14, 0, 0)).toISOString()
      },
      {
        start: new Date(daysAfter(1).setHours(14, 30, 0)).toISOString(),
        end: new Date(daysAfter(1).setHours(16, 45, 0)).toISOString()
      },
      {
        start: formatDateOnly(daysAfter(3)),
        end: formatDateOnly(daysAfter(3))
      }
    ])
  }
}
</script>

Events

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