Someday

<p align="center"> <img src="./someday-logo.svg" width="250" alt="someday logo"/> </p>

Free to host calendar availability picker - open-source cal.com / calendly alternative built on Google-Apps-Script for Gmail users.

Demo (mocked endpoints)

https://someday-demo.vercel.app/

What is Someday?

Someday is a simple, open-source scheduling tool designed specifically for Gmail users. Uses Google Apps Scripts to host and clasp to manage. Built with modern technologies like React, TypeScript, Shadcn/UI, and Vite. A simple alternative to traditional scheduling apps like Calendly.

Key Features

• Free to Host: Using Google Apps Script, hosting is free via your google account.
• Open Source: Someday is completely free to use and open for contributions.
• Effortless Integration: Designed as a Google Apps Script, Someday integrates seamlessly with your Gmail, making it easy to manage your schedule directly from your inbox.
• Developer-Friendly: Built with modern, developer-preferred technologies, Someday is easy to customize and extend to meet your specific needs.
• Customizable Work Hours: Set your availability with precision, allowing others to book time slots that fit your schedule perfectly.
• Simple Booking Process: Users can select a date and time slot, then fill out a straightforward form with their name, email, phone, and an optional note.
• Privacy First: No data sharing beyond google to 3rd party apps

Getting Started

Customize

Change the following variables in backend/src/app.ts to customize your availability settings:

// backend/src/app.ts
const CALENDAR = "primary";
const TIME_ZONE = "America/New_York";
const WORKDAYS = [1, 2, 3, 4, 5];
const WORKHOURS = {
  start: 9,
  end: 13,
};
const TIMESLOT_DURATION = 30;

Self host iframe html / remove google app scripts banner

• Google apps script has a banner that says "This application was created by a Google Apps Script user", to remove you can host the html file yourself and embed the script as an iframe

• Use the hosted-iframe-example.html file, github pages is a good option for this, add your script url to the iframe src

Develop

• cd ./frontend
• npm install
• npm run dev
• dummyData will be generated on the fly using the generateDummyData function ~line 42 in frontend/hooks/useGoogleTimeSlots.ts

Install

Step 1: Set Up Your Environment

you may need to sign out of all accounts, and only into your target account

1. Install clasp:

   • Ensure you have Node.js installed.
   • Install clasp globally using npm:

     npm install -g @google/clasp@^2.5.0
     

2. Login with clasp:

   • Execute the following command to log in:

     clasp login
     

3. Remove Existing Configuration (if necessary):

   • If you encounter issues, remove the existing .clasp.json file:

     rm .clasp.json
     

4. Enable Apps Script API:

   • Visit Google Apps Script API settings.
   • Enable the Apps Script API.
   • Wait a few minutes for the changes to propagate.

Step 2: Create and Deploy the Script

1. Create a New Project:

   • Create a new Apps Script project as a web app:

     clasp create --type webapp
     

2. Deploy the Script:

   • Use the following command to deploy your script:

     npm run deploy
     

3. Access the Web App:

   • Visit the URL provided after deployment.
   • You will see the message "Authorization is required to perform that action."

4. Authorize the Web App: (!!! IMPORTANT !!!)

   • run clasp open to open the editor
   • go to dist/app.gs
   • in the drop down at the top, select fetchAvailability then hit run
   • Authorization modal will pop up, 'Review permissions', select your account, you will see a warning, go to advanced, then Go to <your script>(unsafe) then click Allow
   • if it worked, refresh the page/editor then run the function again and it should complete without issue.

5. Calendar Access:

   • By default, the script uses your primary calendar
   • To use other calendars, make sure they are added to your Google Calendar with appropriate permissions
   • You can change which calendar to use by modifying the CALENDAR variable in backend/src/app.ts
   • Note: The script needs at least read access to the calendar you specify
   • To use multiple calendars, you'll need to add them as Script Properties in the Apps Script editor:
     1. Open the script editor with clasp open
     2. Go to Project Settings (⚙️ icon)
     3. Under "Script Properties", click "Add Script Property"
     4. Add a property named "CALENDARS" with a comma-separated list of calendar IDs

Cheat Sheet

• npm run deploy - build and delpoy

• npm run build - build only

• undeployall.sh - undeploy all versions of the script

• deployments.sh - list all deployments web-urls

• clasp open - open the script editor

Screen Captures

<img src="./screencap1.jpg" width="350" /> <img src="./screencap2.jpg" width="350" />

Contributing

Open a pull request or issue to contribute to Someday. welcoming all contributions, including bug fixes, feature requests, and documentation improvements.

License

MIT