directus/docs/cookbook/flows/scheduling-content-dynamic-sites.md

description, tags, skill_level, directus_version, author_override, author

description	tags	skill_level	directus_version	author_override	author
This recipe explains how to schedule content to be published for a future date depending on your front-end approach.			9.21.2		Bryant Gillespie

Scheduling Content for Dynamic Sites

{{ $frontmatter.description }}

:::tip Author: {{$frontmatter.author}}

Directus Version: {{$frontmatter.directus_version}}

:::

Explanation

This recipe explains how to schedule content to be published on a future date for dynamic sites.

Scheduling content has fewer steps for a dynamic site. Since you are calling your Directus API at the time that a visitor requests a page from your site, all you need to do is add a filter to your query.

:::info Note

If your site is statically generated and your content fetched at build time, please follow the recipe for static sites.

:::

How To Guide

:::tip Requirements

You’ll need to have already created a collection for your site content like articles or posts or pages with a field status that controls the published state.

:::

Add a Field To Control Publish Date and Time

1. Under Settings, go to Data Model.

2. Choose your content Collection.

3. Add a new field to your content Collection.

   

   a. Choose Datetime for the Type.

   b. Name the Key date_published.

   c. Save the Field and your Collection.

Add Some Content and Set a Publish Date

4. Create or update an Item inside your Collection

   

   a. Set the status field to published

   b. Add a date for the date_published field

   c. Add the content for other fields and save the Item

Check the Published Date When Calling the Directus API

• When calling the API, add a filter rule that checks the date_published field.
• Use the _lte operator to filter for dates that are less than or equal the current date/time.
• You can use the dynamic variable $NOW to get the current timestamp.

Examples

:::tip

In these examples, we're using an AND logical operator to only return records that match both conditions. This provides a little more control over your published content by ensuring only articles that have a publish date AND have the published state are displayed on your site.

:::

Using the Directus JavaScript SDK (preferred)

const articles = await directus.items('articles').readByQuery({
	filter: {
		_and: [
			{
				status: {
					_eq: 'published',
				},
			},
			{
				date_published: {
					_lte: '$NOW',
				},
			},
		],
	},
});

Using the Fetch API (JavaScript)

const response = await fetch('https://yourdirectusurl.com/items/articles?' + new URLSearchParams({
		filter: {
			_and: [
				{
					status: {
						_eq: "published"
					}
				},
				{
					date_published: {
						_lte: "$NOW"
					}
				},
			]
		}
})
const articles = await response.json()

Final Tips

Tips

• If you're not receiving the data you expect, double-check your filter rule syntax.
• Also be sure you have enabled the proper permissions for your content Collection.