sanity-plugin-events-calendar

This is a Sanity Studio v3 plugin for creating and managing calendar events.

Installation

npm install sanity-plugin-events-calendar

or

yarn add sanity-plugin-events-calendar

or

pnpm add sanity-plugin-events-calendar

Usage

Add it as a plugin in sanity.config.ts (or .js):

import {defineConfig} from 'sanity'
import {calendarPlugin} from 'sanity-plugin-events-calendar'

export default defineConfig({
  //...
  plugins: [calendarPlugin()],
})

Features

This plugin provides a comprehensive event management system with the following:

• Calendar View: A visual monthly calendar that displays all scheduled events

  • Navigate between months
  • View events by day
  • Click events to edit details

• Calendar Events: Create and manage events with support for:

  • Basic event details (title, description, dates)
  • Location information (physical or virtual)
  • Categorization (categories, tags)
  • Recurrence patterns
  • Event status and visibility controls

• Event Categories: Organize events by category with customizable colors and icons

• People: Associate organizers and participants with events

Schema Structure

Calendar Event

The main document type for events includes:

• Title and description
• Start and end date/time
• Location (physical address or virtual meeting link)
• Categories and tags
• Event image
• Organizers (references to people)
• Recurrence settings for repeating events
• Event status (scheduled, cancelled, postponed, etc.)
• Visibility settings
• Attendee management

View the Usage Guide documentation for more information on how to use the plugin.

GROQ Query Examples

View the GROQ Query Examples documentation for more information on how to query calendar events.

Get all upcoming events

*[_type == "calendarEvent" && startDateTime > now()] | order(startDateTime asc)

Get events for a specific month

*[
  _type == "calendarEvent" &&
  startDateTime >= $startDate &&
  startDateTime <= $endDate
] | order(startDateTime asc)

Get events for a specific category

*[
  _type == "calendarEvent" &&
  count(categories[references($categoryId)]) > 0
] | order(startDateTime asc)

Get featured events

*[_type == "calendarEvent" && featured == true] | order(startDateTime asc)

Get events with full references

*[_type == "calendarEvent"] {
  _id,
  title,
  startDateTime,
  endDateTime,
  allDay,
  status,
  featured,
  "categories": categories[]-> {
    _id,
    title,
    color
  },
  "organizers": organizers[]-> {
    _id,
    name,
    role,
    image
  },
  "slug": slug.current
}

Integration with Frontend Libraries

View the Frontend Integration documentation for more information on how to integrate calendar data with your frontend.

License

MIT © Casey Zumwalt

Documentation

For more detailed documentation:

• Usage Guide - How to use the calendar plugin
• GROQ Query Examples - Sample GROQ queries for calendar events
• Frontend Integration - Using events with React Big Calendar, FullCalendar, and frameworks
• Local Development - Guide for local development
• Contributing - Guidelines for contributing to the project

Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.