Introducing the Schedule Module

  • #Modules
  • #Updates
Read time: 2 minutes
Mitchell Christ
Mitchell Christ
Delorian in front of tire marks in flames, the movie title text "Scheduler" in the style of Back to the Future. Elon Musk wearing a red down jacket and wearing sunglasses standing next to the Delorian, Big Ben London in the back, 70s film still

Welcome to time-Based Content Management in SanityPress

We're excited to announce a powerful new addition to SanityPress: the Schedule module. This feature brings time-based content management to your Next.js + Sanity.io website, allowing you to schedule when specific content modules appear and disappear automatically.

What is the Schedule Module?

The Schedule module is a sophisticated wrapper component that enables you to control the visibility of any existing SanityPress module based on date and time. Built as a client component while maintaining compatibility with server components, it provides seamless integration with your existing content structure.

Key Features

  • Flexible Date Range Control: Set specific start and end dates for content visibility.
  • Module Nesting: Wrap any existing SanityPress module to make it time-sensitive.
  • Real-Time Updates: Automatic content updates through efficient interval checking with the wrapper client component.
  • Server Component Compatible: Works seamlessly with both client and server components.

How It Works

The Schedule module is built around the <Scheduler> wrapper React component, which handles all the timing logic. It uses setInterval to continuously check if the current time falls within the specified datetime ranges, ensuring your content appears and disappears exactly when you want it to.

This works without the need for Sanity's Scheduled publishing paid feature—it will work on the free plan! All that's needed are a start and end "datetime" schema type.

Feel free to repurpose this code into your project—SanityPress or not!

How to Use

To start using the Schedule module, simply add it to your Page document. Then, add start and/or end dates and times. Lastly, populate your content with the list of modules from the dropdown.

Select the Schedule module from the list of modules
Select the Schedule module from the list of modules

You can add more modules to use in the Scheduler by editing the schedule-module.ts Sanity schema file:

📁 src/sanity/schemas/modules/schedule-module.ts
export default defineType({
  name: 'schedule-module',
  // ...
  fields: [
    // ...
    defineField({
      name: 'modules',
      type: 'array',
      of: [
        { type: 'callout' },
        { type: 'custom-html' },
        { type: 'hero' },
        { type: 'hero.saas' },
        { type: 'hero.split' },
        { type: 'testimonial.featured' },
        // ... add more modules here
      ],
    }),
  ],
})

Real-World Applications

Seasonal Website Themes

Using the Schedule module with our Custom HTML module, you can automatically apply seasonal styling to your website. Imagine automatically activating holiday decorations during December.

Custom HTML module with seasonal CSS, nested in a Schedule module
Custom HTML module with seasonal CSS, nested in a Schedule module

Temporary Announcements

The Schedule module powers our Announcement component, allowing you to display time-sensitive notifications above your site header, such as:

  • Flash announcements
  • Limited-time offers
  • Temporary service notifications

Dynamic Homepage Content

Schedule different hero banners to showcase various content throughout the year:

  • Seasonal promotions
  • Event highlights
  • Time-limited features
  • Campaign-specific messaging

Looking Forward

The Schedule module is just the beginning of our efforts to make content management more dynamic and flexible in SanityPress. We're excited to see how you'll use this feature to create more engaging, timely content experiences for your users.

Have questions or want to contribute? Join our GitHub discussion or or give us a star on GitHub!

Delorian with the text "SanityPress", levitating above LA rush hour traffic in sunset, Back to the Future 70s film still