Personal calendar manager https://cal.maronato.dev
Go to file
Carina Wollendorfer 2a73fd8188
Variables for custom templates in workflows (#3602)
* improve functionality to update a step

* remove console logs

* fix issue with active event types

* allow null value for time and timeUnit

* sort steps asc step number

* add action to workflow (frontend)

* add  phone number input for SMS to specific number

* use PhoneInput for number input + input validation

* improve invalid input for phone number

* improve UI of phoneInput

* Improve design and validation

* fix undefined error

* set default action when adding action

* include all team event types

* fix phone number input for editing steps

* fix update muation to add steps

* remove console logs

* fix order of steps

* functionality to delete steps

* add trigger when event is cancelled

* add custom email body

* sms and email reminder updates

* add custom emails

* add custom email subject

* send reminder email to all attendees

* update migration

* fix default value for time and timeUnit

* save email reminders to database

* clean code

* add custom template to SMS actions

* schedule emails with sendgrid

* clean code

* add workflow templates

* keep custom template saved when changing templates

* create reminder template for email

* add dot at the end of sentace for email template

* fix merge error

* fix issue that template was not saved

* include sending emails for when event is cancelled

* fix bug that email was always sent

* add templates to sms reminders

* add info that sending sms to attendees won't trigger for already exisitng bookings

* only schedule sms for attendees when smsReminderNumber exists

* only schedule sms for attendees when smsReminderNumber exists

* set scheduled of workflow reminder to false when longer than 72 hours

* add cron for email scheduling + fixes for for sms an email scheduling

* adjust step number when deleting a step

* cast to boolean with !!

* update cron job for email reminders

* update sms template

* send reminder email not to guests

* remove sendTo from workflow reminder

* fixes sending sms without name + removing sendTo everywhere

* fix undefined name in sms template

* set user name to undefined for sending sms to a specific number

* fix singular and plural for time unit

* set to edit mode when changing action and custom template is selected

* delete reminders when booking cancelled or not active anymore

* fix type errors

* fix error that deleted reminders twice

* create booking reminders for existing bookings when eventType is set active

* improve email and sms templates

* use BookingInfo type instead of calendarEvent for reminder emails

* schedule emails for already existing bookings

* add and remove reminders for new active event types and cancelled events

* connect add action button with last step

* fix step container width for mobile view

* helper functions that return options for select

* fix typo and remove comment

* clean code

* add/improve error messages for forms

* fix typo

* clean code

* improve email template

* clean code

* fix missing prop

* save reference id when scheduling reminder

* fix step not added because of changed id for new steps

* small fixes + code cleanup

* code cleanup

* show error message when number is invalid

* fix typo

* fix phone number input when location is already phone

* set multi select checkbox to read only

* change email scheduling in cron job from 7 days to 72 hours

* show active event types in workflow list

* fix trigger information for workflow list

* improve layout for small screens in workflow list

* remove optional from zod type for workflow name

* order workflows by id

* use link icon to show active event types

* fix plural and add translation for showing nr of active eventtypes

* fix text for sms reminder template

* add reminders for added steps

* remove optional for activeOn

* improve reminder templates

* improve design of custom input fields

* set edit mode to false when phone number isn't needed anymore

* set sendTo in workflow step only for SMS_NUMBER action

* set email body and subject only when custom template

* only delete reminders that belong to workflow steps

* improve text for new event book trigger

* move reminders folder to workflows

* fix issue that save button was sometimes enabled in edit mode

* fix form issues for send to

* delete all scheduled reminders when workflow is deleted

* use enum for method

* fix imports for workflow methods

* add missing import

* fix edit mode

* create reminders when event is confirmed

* add reminderScheduler to reduce duplicate code

* make workflow enterprise and pro only feature

* move all files to /ee/ folder

* move package.json change to /ee/ folder

* add pro badge to shell

* set to edit mode to true if email subject is missing when action changes

* fix loading bug

* add migration

* fix old imports

* don't schedule reminders for opt-ins

* fix style of email body

* code clean up

* Update yarn.lock

* fix isLoading for active on dropdown

* update import for prisma

Co-authored-by: Omar López <zomars@me.com>

* update imports

* remove console

* use session to check if user has valid license

* use defaultHandler

* clean up code

* Create db-staging-snapshot.yml

* move LisenceRequired inside shell

* update import for FormValues

* fix phone input design

* fix disabled save button for edit mode

* squah all migration into a single one

* use isAfter and isBefore instead of isBetween

* import dayjs from @calcom

* validate phone number for sms reminders when booking event

* Allows auto approvals for crowdin

* add dropdown for adding dynamic variables to string

* use lighter text colour for disabled button

* change textarea for email subject to one row only

* add function to create custom template with dynamic variables

* add location to dynamic variables

* add missing locations to custom template

* add variables at cursor position

* remove second curly brakets from variables

* code cleanup

* fix names for attendee and organizer

* enable internationaliztion for custom reminders

* disabled add workflow button when mutation is loading

* fix translation keys

* internationalize dates

* code clean up

* add translation for email subject

* skip translation for english

* remove language from BookingInfo type

* add additional notes as variable

* add custom inputs as variables

* add information for custom inputs

* add translation

* Add formated variables in additional input information

* fix type errors

* code clean up

* Update AddVariablesDropdown.tsx

* Update variableTranslations.ts

* Update variableTranslations.ts

* Formatting

* Update [workflow].tsx

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: zomars <zomars@me.com>
2022-08-03 22:22:38 +00:00
.github Fixes depth (#3555) 2022-07-27 13:50:10 -06:00
.husky Fixes over Turborepo improvements (#3144) 2022-06-24 09:38:17 -06:00
.snaplet Updates snaplet transform script (#3199) 2022-06-29 13:03:13 -06:00
.vscode Routing Forms (#2785) 2022-07-14 12:40:53 +00:00
apps Variables for custom templates in workflows (#3602) 2022-08-03 22:22:38 +00:00
packages Variables for custom templates in workflows (#3602) 2022-08-03 22:22:38 +00:00
scripts Adds script to regulate staging deploys (#1979) 2022-02-24 12:17:49 -07:00
tests/config Routing Forms (#2785) 2022-07-14 12:40:53 +00:00
.editorconfig Added .editorconfig file as suggested in #270 2021-07-03 17:02:26 +00:00
.env.appStore.example Remove '{}' to prevent overwriting .env.appStore value (#3200) 2022-06-29 16:56:31 -06:00
.env.example Team Impersonation (#3450) 2022-07-21 17:02:20 +00:00
.eslintrc.js Eslint fixes (#1898) 2022-02-18 16:53:45 +00:00
.gitignore Feat/design system (#3051) 2022-07-22 18:39:50 -06:00
.gitmodules Relocates admin to console 2022-05-20 17:40:51 -06:00
.kodiak.toml Allows auto approvals for crowdin 2022-07-11 18:49:40 -06:00
.npmrc chore: add some dx configs (#650) 2021-09-29 09:41:38 +00:00
.nvmrc Trailing unlocking node <17 (#2711) 2022-06-07 11:53:11 +01:00
.prettierignore Extract prisma to it's own package (#1823) 2022-02-15 13:30:52 -07:00
.prettierrc.js Linting (#2083) 2022-03-09 17:52:48 +00:00
app.json Add NEXTAUTH_URL to app.json to address heroku deploy failure (#3091) 2022-06-18 18:47:38 +01:00
CODE_OF_CONDUCT.md Runs format script 2022-06-24 07:37:56 -06:00
CONTRIBUTING.md Update CONTRIBUTING.md (#3226) 2022-07-04 19:41:22 -06:00
crowdin.yml Ignores vital for now 2022-06-03 14:18:43 -06:00
LICENSE Update LICENSE 2022-08-03 14:36:43 +02:00
package.json Sorts root scripts and adds prisma alias 2022-08-01 13:50:30 -06:00
Procfile fix: deployment setup to Heroku (#1834) 2022-02-14 16:29:48 +00:00
README.md change prerequistic of node.js from min 14.x to 15.x (#3587) 2022-07-30 16:54:42 +02:00
SECURITY.md Formatting 2022-07-12 11:52:13 -06:00
turbo.json Fixes dotenv replacements 2022-07-29 19:30:02 -06:00
vercel.sh Update vercel.sh (#1983) 2022-02-25 13:13:56 -07:00
yarn.lock Tweaks for Website signup form (#3635) 2022-08-03 13:59:40 -03:00

Logo

Cal.com (formerly Calendso)

The open-source Calendly alternative.
Learn more »

Slack · Website · Issues · Roadmap

Join Cal.com Slack Product Hunt Uptime Github Stars Hacker News License Commits-per-month Pricing Jitsu Tracked Checkly Availability

About The Project

booking-screen

Scheduling infrastructure for absolutely everyone

The open source Calendly alternative. You are in charge of your own data, workflow and appearance.

Calendly and other scheduling tools are awesome. It made our lives massively easier. We're using it for business meetings, seminars, yoga classes and even calls with our families. However, most tools are very limited in terms of control and customisations.

That's where Cal.com comes in. Self-hosted or hosted by us. White-label by design. API-driven and ready to be deployed on your own domain. Full control of your events and data.

Product of the Month: April

Support us on Product Hunt

Cal.com - The open source Calendly alternative | Product Hunt Cal.com - The open source Calendly alternative | Product Hunt Cal.com - The open source Calendly alternative | Product Hunt

Built With

Stay Up-to-Date

Cal officially launched as v.1.0 on 15th of September, however a lot of new features are coming. Watch releases of this repository to be notified for future updates:

cal-star-github

Getting Started

To get a local copy up and running, please follow these simple steps.

Prerequisites

Here is what you need to be able to run Cal.

  • Node.js (Version: >=15.x <17)
  • PostgreSQL
  • Yarn (recommended)

If you want to enable any of the available integrations, you may want to obtain additional credentials for each one. More details on this can be found below under the integrations section.

Development

Setup

  1. Clone the repo into a public GitHub repository (or fork https://github.com/calcom/cal.com/fork). If you plan to distribute the code, keep the source code public to comply with AGPLv3. To clone in a private repository, acquire a commercial license)

    git clone https://github.com/calcom/cal.com.git
    
  2. Go to the project folder

    cd cal.com
    
  3. Install packages with yarn

    yarn
    
  4. Use openssl rand -base64 32 to generate a key and add it under NEXTAUTH_SECRET in the .env file.

Quick start with yarn dx

  • Requires Docker and Docker Compose to be installed
  • Will start a local Postgres instance with a few test users - the credentials will be logged in the console
yarn dx

Development tip

Add NEXT_PUBLIC_DEBUG=1 anywhere in your .env to get logging information for all the queries and mutations driven by trpc.

echo 'NEXT_PUBLIC_DEBUG=1' >> .env

Manual setup

  1. Configure environment variables in the packages/prisma/.env file. Replace <user>, <pass>, <db-host>, <db-port> with their applicable values

    DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'
    
    If you don't know how to configure the DATABASE_URL, then follow the steps here to create a quick DB using Heroku
    1. Create a free account with Heroku.

    2. Create a new app. Create an App

    3. In your new app, go to Overview and next to Installed add-ons, click Configure Add-ons. We need this to set up our database. image

    4. Once you clicked on Configure Add-ons, click on Find more add-ons and search for postgres. One of the options will be Heroku Postgres - click on that option. image

    5. Once the pop-up appears, click Submit Order Form - plan name should be Hobby Dev - Free. Submit Order Form

    6. Once you completed the above steps, click on your newly created Heroku Postgres and go to its Settings. image

    7. In Settings, copy your URI to your Cal.com .env file and replace the postgresql://<user>:<pass>@<db-host>:<db-port> with it. image image

    8. To view your DB, once you add new data in Prisma, you can use Heroku Data Explorer.

  2. Set a 32 character random string in your .env file for the CALENDSO_ENCRYPTION_KEY (You can use a command like openssl rand -base64 24 to generate one).

  3. Set up the database using the Prisma schema (found in packages/prisma/schema.prisma)

    yarn workspace @calcom/prisma db-deploy
    
  4. Run (in development mode)

    yarn dev
    

Setting up your first user

  1. Open Prisma Studio to look at or modify the database content:

    yarn db-studio
    
  2. Click on the User model to add a new user record.

  3. Fill out the fields email, username, password, and set metadata to empty {} (remembering to encrypt your password with BCrypt) and click Save 1 Record to create your first user.

    New users are set on a TRIAL plan by default. You might want to adjust this behavior to your needs in the packages/prisma/schema.prisma file.

  4. Open a browser to http://localhost:3000 and login with your just created, first user.

E2E-Testing

Be sure to set the environment variable NEXTAUTH_URL to the correct value. If you are running locally, as the documentation within .env.example mentions, the value should be http://localhost:3000.

# In a terminal just run:
yarn test-e2e

# To open last HTML report run:
yarn workspace @calcom/web playwright-report

Upgrading from earlier versions

  1. Pull the current version:

    git pull
    
  2. Check if dependencies got added/updated/removed

    yarn
    
  3. Apply database migrations by running one of the following commands:

    In a development environment, run:

    yarn workspace @calcom/prisma db-migrate
    

    (this can clear your development database in some cases)

    In a production environment, run:

    yarn workspace @calcom/prisma db-deploy
    
  4. Check for .env variables changes

    yarn predev
    
  5. Start the server. In a development environment, just do:

    yarn dev
    

    For a production build, run for example:

    yarn build
    yarn start
    
  6. Enjoy the new version.

Deployment

Docker

The Docker configuration for Cal is an effort powered by people within the community. Cal.com, Inc. does not provide official support for Docker, but we will accept fixes and documentation. Use at your own risk.

If you want to contribute to the Docker repository, reply here.

The Docker configuration can be found in our docker repository.

Heroku

Deploy

Railway

Deploy on Railway

You can deploy Cal on Railway using the button above. The team at Railway also have a detailed blog post on deploying Cal on their platform.

Vercel

Currently Vercel Pro Plan is required to be able to Deploy this application with Vercel, due to limitations on the number of serverless functions on the free plan.

Deploy with Vercel

Roadmap

Cal.com Roadmap

See the roadmap project for a list of proposed features (and known issues). You can change the view to see planned tagged releases.

Contributing

Please see our contributing guide.

Good First Issues

We have a list of help wanted that contain small features and bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.

Integrations

Obtaining the Google API Credentials

  1. Open Google API Console. If you don't have a project in your Google Cloud subscription, you'll need to create one before proceeding further. Under Dashboard pane, select Enable APIS and Services.
  2. In the search box, type calendar and select the Google Calendar API search result.
  3. Enable the selected API.
  4. Next, go to the OAuth consent screen from the side pane. Select the app type (Internal or External) and enter the basic app details on the first page.
  5. In the second page on Scopes, select Add or Remove Scopes. Search for Calendar.event and select the scope with scope value .../auth/calendar.events, .../auth/calendar.readonly and select Update.
  6. In the third page (Test Users), add the Google account(s) you'll using. Make sure the details are correct on the last page of the wizard and your consent screen will be configured.
  7. Now select Credentials from the side pane and then select Create Credentials. Select the OAuth Client ID option.
  8. Select Web Application as the Application Type.
  9. Under Authorized redirect URI's, select Add URI and then add the URI <Cal.com URL>/api/integrations/googlecalendar/callback replacing Cal.com URL with the URI at which your application runs.
  10. The key will be created and you will be redirected back to the Credentials page. Select the newly generated client ID under OAuth 2.0 Client IDs.
  11. Select Download JSON. Copy the contents of this file and paste the entire JSON string in the .env file as the value for GOOGLE_API_CREDENTIALS key.

Obtaining Microsoft Graph Client ID and Secret

  1. Open Azure App Registration and select New registration
  2. Name your application
  3. Set Who can use this application or access this API? to Accounts in any organizational directory (Any Azure AD directory - Multitenant)
  4. Set the Web redirect URI to <Cal.com URL>/api/integrations/office365calendar/callback replacing Cal.com URL with the URI at which your application runs.
  5. Use Application (client) ID as the MS_GRAPH_CLIENT_ID attribute value in .env
  6. Click Certificates & secrets create a new client secret and use the value as the MS_GRAPH_CLIENT_SECRET attribute

Obtaining Slack Client ID and Secret and Signing Secret

To test this you will need to create a Slack app for yourself on their apps website.

Copy and paste the app manifest below into the setting on your slack app. Be sure to replace YOUR_DOMAIN with your own domain or your proxy host if you're testing locally.

App Manifest
display_information:
 name: Cal.com Slack
features:
 bot_user:
   display_name: Cal.com Slack
   always_online: false
 slash_commands:
   - command: /create-event
     url: https://YOUR_DOMAIN/api/integrations/slackmessaging/commandHandler
     description: Create an event within Cal!
     should_escape: false
   - command: /today
     url: https://YOUR_DOMAIN/api/integrations/slackmessaging/commandHandler
     description: View all your bookings for today
     should_escape: false
oauth_config:
 redirect_urls:
   - https://YOUR_DOMAIN/api/integrations/slackmessaging/callback
 scopes:
   bot:
     - chat:write
     - commands
     - chat:write.public 
settings:
 interactivity:
   is_enabled: true
   request_url: https://YOUR_DOMAIN/api/integrations/slackmessaging/interactiveHandler
   message_menu_options_url: https://YOUR_DOMAIN/api/integrations/slackmessaging/interactiveHandler
 org_deploy_enabled: false
 socket_mode_enabled: false
 token_rotation_enabled: false

Add the integration as normal - slack app - add. Follow the oauth flow to add it to a server.

Next make sure you have your app running yarn dx. Then in the slack chat type one of these commands: /create-event or /today

NOTE: Next you will need to setup a proxy server like ngrok to allow your local host machine to be hosted on a public https server.

Obtaining Zoom Client ID and Secret

  1. Open Zoom Marketplace and sign in with your Zoom account.
  2. On the upper right, click "Develop" => "Build App".
  3. On "OAuth", select "Create".
  4. Name your App.
  5. Choose "User-managed app" as the app type.
  6. De-select the option to publish the app on the Zoom App Marketplace.
  7. Click "Create".
  8. Now copy the Client ID and Client Secret to your .env file into the ZOOM_CLIENT_ID and ZOOM_CLIENT_SECRET fields.
  9. Set the Redirect URL for OAuth <Cal.com URL>/api/integrations/zoomvideo/callback replacing Cal.com URL with the URI at which your application runs.
  10. Also add the redirect URL given above as a allow list URL and enable "Subdomain check". Make sure, it says "saved" below the form.
  11. You don't need to provide basic information about your app. Instead click at "Scopes" and then at "+ Add Scopes". On the left, click the category "Meeting" and check the scope meeting:write.
  12. Click "Done".
  13. You're good to go. Now you can easily add your Zoom integration in the Cal.com settings.

Obtaining Daily API Credentials

  1. Open Daily and sign into your account.
  2. From within your dashboard, go to the developers tab.
  3. Copy your API key.
  4. Now paste the API key to your .env file into the DAILY_API_KEY field in your .env file.
  5. If you have the Daily Scale Plan set the DAILY_SCALE_PLAN variable to true in order to use features like video recording.

Obtaining HubSpot Client ID and Secret

  1. Open HubSpot Developer and sign into your account, or create a new one.
  2. From within the home of the Developer account page, go to "Manage apps".
  3. Click "Create app" button top right.
  4. Fill in any information you want in the "App info" tab
  5. Go to tab "Auth"
  6. Now copy the Client ID and Client Secret to your .env file into the HUBSPOT_CLIENT_ID and HUBSPOT_CLIENT_SECRET fields.
  7. Set the Redirect URL for OAuth <Cal.com URL>/api/integrations/hubspotothercalendar/callback replacing Cal.com URL with the URI at which your application runs.
  8. In the "Scopes" section at the bottom of the page, make sure you select "Read" and "Write" for scope called crm.objects.contacts
  9. Click the "Save" button at the bottom footer.
  10. You're good to go. Now you can see any booking in Cal.com created as a meeting in HubSpot for your contacts.

Obtaining Vital API Keys

  1. Open Vital and click Get API Keys.
  2. Create a team with the team name you desire
  3. Head to the configuration section on the sidebar of the dashboard
  4. Click on API keys and you'll find your sandbox api_key.
  5. Copy your api_key to VITAL_API_KEY in the .env.appStore file.
  6. Open Vital Webhooks and add <CALCOM BASE URL>/api/integrations/vital/webhook as webhook for connected applications.
  7. Select all events for the webhook you interested, e.g. sleep_created
  8. Copy the webhook secret (sec...) to VITAL_WEBHOOK_SECRET in the .env.appStore file.

Workflows

Setting up SendGrid for Email reminders

  1. Create a SendGrid account (https://signup.sendgrid.com/)
  2. Go to Settings -> API keys and create an API key
  3. Copy API key to your .env file into the SENDGRID_API_KEY field
  4. Go to Settings -> Sender Authentication and verify a single sender
  5. Copy the verified E-Mail to your .env file into the SENDGRID_EMAIL field

Setting up Twilio for SMS reminders

  1. Create a Twilio account (https://www.twilio.com/try-twilio)
  2. Click Get a Twilio phone number
  3. Copy Account SID to your .env file into the TWILIO_SID field
  4. Copy Auth Token to your .env file into the TWILIO_TOKEN field
  5. Create a messaging service (Develop -> Messaging -> Services)
  6. Choose any name for the messaging service
  7. Click 'Add Senders'
  8. Choose phone number as sender type
  9. Add the listed phone number
  10. Leave all other fields as they are
  11. Complete setup and click View my new Messaging Service
  12. Copy Messaging Service SID to your .env file into the TWILIO_MESSAGING_SID field

License

Distributed under the AGPLv3 License. See LICENSE for more information.

Acknowledgements

Special thanks to these amazing projects which help power Cal.com:

Jitsu.com

Cal.com is an open startup and Jitsu (an open-source Segment alternative) helps us to track most of the usage metrics.