Scheduler

Month View Interface
Week View Interface

Inspiration

I (Kamille) was first inspired by Jeremy Oglesby's "Schedule conflicts" script (later released as a block), which displays records with conflicting date ranges. I just knew someone would need a solution that would prevent users from creating conflicting records in the first place. I've made a few scripts which do this, and soon afterward Custom Blocks was announced. When building the block, I had in mind anyone who rents out equipment, who hosts events, or who has frequent meetings.

What it does

Scheduler allows users to select one or more records in a grid view, and then displays all of the related "schedule" records on a calendar interface. Users are then able to click and drag dates on the calendar to select a start and end time, but only if that day/time slot is unoccupied by an existing record. Once dates are selected, a new scheduled record is added to the calendar and is opened in Airtable's expanded record modal to allow users to quickly fill in the remaining fields.

How we built it

Calendar elements are not included in Airtable's Blocks SDK, so this project instead uses FullCalendar.io. The block also makes minor use of Moment.js to ensure proper conversion of date/time values for use in Airtable fields.

Challenges we ran into

Date and date/time fields required a different approach to being displayed on the calendar. Additionally, the use of FullCalendar meant that stylesheets would need to be loaded, but there wasn't a very elegant way of doing so without Webpack, which is currently incompatible with Custom Blocks.

Accomplishments that we're proud of

This is the first project I built in React. I'm very proud that I was able to translate a simple script into a user-friendly, fully-functional solution.

What's next for Scheduler

Right now, developers can't properly import styles from external packages (like FullCalendar.io) using Webpack. Once that ability is added, Scheduler should be able to compile the necessary stylesheets the "normal" way.