Teams

The Teams feature allows you to organize events across different calendars, departments, or team members.

Pro Feature: The Teams feature requires a NuxtCalendar Pro license.

Setup

Enable and configure teams in your nuxt.config.ts:

export default defineNuxtConfig({
  NuxtCalendar: {
    licenseKey: process.env.NUXT_CALENDAR_LICENSE_KEY,
    teams: [
      {
        id: 'default',
        name: 'Calendars',
        members: [
          {
            id: 'user-1',
            name: 'My Company Calendar',
            color: {
              background: '#3b82f6',
              border: '#2563eb',
              backgroundDimmed: '#3b82f620',
            },
            visible: true,
          },
        ],
      },
    ]
  }
})

How it Works

When teams are enabled, Nuxt Calendar adds a sidebar that allows users to toggle the visibility of different calendars.

Team Object Structure

The teams configuration follows this structure:

interface Team {
  id: string | number
  name: string
  members: TeamMember[]
}

interface TeamMember {
  id: string | number
  name: string
  email?: string
  src?: string
  alt?: string
  color: {
    background: string
    border: string
    backgroundDimmed?: string
  }
  visible: boolean
}

Assigning Events to Teams

To assign an event to specific team members, use the teamMemberIds property in your event object:

const events = [
  {
    id: 1,
    title: 'Team Meeting',
    start: new Date(),
    end: new Date(),
    teamMemberIds: ['user-1']
  }
]

Customizing the UI

You can use slots to customize how teams are displayed in the calendar. See the Slots documentation for more details.