Giter Club home page Giter Club logo

cal.com's Introduction

Logo

Cal.com (formerly Calendso)

The open-source Calendly successor.
Learn more »

Discord · Website · Issues · Roadmap

Join Cal.com Discord 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 successor. 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 customization.

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.

Recognition

Featured on Hacker News Featured on Hacker News

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

Contact us

Meet our sales team for any commercial inquiries.

Book us with Cal.com

Stay Up-to-Date

Cal.com officially launched as v.1.0 on the 15th of September 2021 and we've come a long way so far. Watch releases of this repository to be notified of 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.com.

  • Node.js (Version: >=18.x)
  • PostgreSQL (Version: >=13.x)
  • 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

    If you are on Windows, run the following command on gitbash with admin privileges:
    > git clone -c core.symlinks=true https://github.com/calcom/cal.com.git
    See docs for more details.

  2. Go to the project folder

    cd cal.com
  3. Install packages with yarn

    yarn
  4. Set up your .env file

    • Duplicate .env.example to .env
    • Use openssl rand -base64 32 to generate a key and add it under NEXTAUTH_SECRET in the .env file.
    • Use openssl rand -base64 32 to generate a key and add it under CALENDSO_ENCRYPTION_KEY in the .env file.
  5. Setup Node If your Node version does not meet the project's requirements as instructed by the docs, "nvm" (Node Version Manager) allows using Node at the version required by the project:

    nvm use

    You first might need to install the specific version and then use it:

    nvm install && nvm use

    You can install nvm from here.

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

Gitpod Setup

  1. Click the button below to open this project in Gitpod.

  2. This will open a fully configured workspace in your browser with all the necessary dependencies already installed.

Open in Gitpod

Manual setup

  1. Configure environment variables in the .env file. Replace <user>, <pass>, <db-host>, and <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 local DB
    1. Download and install postgres in your local (if you don't have it already).

    2. Create your own local db by executing createDB <DB name>

    3. Now open your psql shell with the DB you created: psql -h localhost -U postgres -d <DB name>

    4. Inside the psql shell execute \conninfo. And you will get the following info.
      image

    5. Now extract all the info and add it to your DATABASE_URL. The url would look something like this postgresql://postgres:postgres@localhost:5432/Your-DB-Name. The port is configurable and does not have to be 5432.

    If you don't want to create a local DB. Then you can also consider using services like railway.app or render.

  2. Copy and paste your DATABASE_URL from .env to .env.appStore.

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

    In a development environment, run:

    yarn workspace @calcom/prisma db-migrate

    In a production environment, run:

    yarn workspace @calcom/prisma db-deploy
  4. Run mailhog to view emails sent during development

    NOTE: Required when E2E_TEST_MAILHOG_ENABLED is "1"

    docker pull mailhog/mailhog
    docker run -d -p 8025:8025 -p 1025:1025 mailhog/mailhog
  5. Run (in development mode)

    yarn dev

Setting up your first user

Approach 1
  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.

Approach 2

Seed the local db by running

cd packages/prisma
yarn db-seed

The above command will populate the local db with dummy users.

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 the last HTML report run:
yarn playwright show-report test-results/reports/playwright-html-report

Resolving issues

E2E test browsers not installed

Run npx playwright install to download test browsers and resolve the error below when running yarn test-e2e:

Executable doesn't exist at /Users/alice/Library/Caches/ms-playwright/chromium-1048/chrome-mac/Chromium.app/Contents/MacOS/Chromium

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.com is an effort powered by people within the community.

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

The Docker configuration can be found in our docker repository.

Issues with Docker? Find your answer or open a new discussion here to ask the community.

Cal.com, Inc. does not provide official support for Docker, but we will accept fixes and documentation. Use at your own risk.

Railway

Deploy on Railway

You can deploy Cal.com on Railway using the button above. The team at Railway also have a detailed blog post on deploying Cal.com 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

Render

Deploy to Render

Elestio

Deploy on Elestio

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.

Repo Activity

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.

Bounties

Bounties of cal

Contributors

Translations

Don't code but still want to contribute? Join our discord and join the #Translate channel and let us know what language you want to translate.

ar translation bg translation cs translation de translation el translation en translation es translation es-419 translation fr translation he translation hu translation it translation ja translation ko translation nl translation no translation pl translation pt translation pt-BR translation ro translation ru translation sr translation sv translation tr translation uk translation vi translation zh-CN translation zh-TW translation

Enabling Content Security Policy

  • Set CSP_POLICY="non-strict" env variable, which enables Strict CSP except for unsafe-inline in style-src . If you have some custom changes in your instance, you might have to make some code change to make your instance CSP compatible. Right now it enables strict CSP only on login page and on other SSR pages it is enabled in Report only mode to detect possible issues. On, SSG pages it is still not supported.

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 be 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 and <Cal.com URL>/api/auth/callback/google 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.

Adding google calendar to Cal.com App Store

After adding Google credentials, you can now Google Calendar App to the app store. You can repopulate the App store by running

cd packages/prisma
yarn seed-app-store

You will need to complete a few more steps to activate Google Calendar App. Make sure to complete section "Obtaining the Google API Credentials". After that do the following

  1. Add extra redirect URL <Cal.com URL>/api/auth/callback/google
  2. Under 'OAuth consent screen', click "PUBLISH APP"

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 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 an 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 on "Scopes" and then on "+ 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. Visit our Daily.co Partnership Form and enter your information
  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 Basecamp Client ID and Secret

  1. Visit the 37 Signals Integrations Dashboard and sign in.
  2. Register a new application by clicking the Register one now link.
  3. Fill in your company details.
  4. Select Basecamp 4 as the product to integrate with.
  5. Set the Redirect URL for OAuth <Cal.com URL>/api/integrations/basecamp3/callback replacing Cal.com URL with the URI at which your application runs.
  6. Click on done and copy the Client ID and secret into the BASECAMP3_CLIENT_ID and BASECAMP3_CLIENT_SECRET fields.
  7. Set the BASECAMP3_CLIENT_SECRET env variable to {your_domain} ({support_email}). For example, Cal.com ([email protected]).

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/hubspot/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 Webex Client ID and Secret

See Webex Readme

Obtaining ZohoCRM Client ID and Secret

  1. Open Zoho API Console and sign into your account, or create a new one.
  2. From within the API console page, go to "Applications".
  3. Click "ADD CLIENT" button top right and select "Server-based Applications".
  4. Fill in any information you want in the "Client Details" tab
  5. Go to tab "Client Secret" tab.
  6. Now copy the Client ID and Client Secret to your .env file into the ZOHOCRM_CLIENT_ID and ZOHOCRM_CLIENT_SECRET fields.
  7. Set the Redirect URL for OAuth <Cal.com URL>/api/integrations/zohocrm/callback replacing Cal.com URL with the URI at which your application runs.
  8. In the "Settings" section check the "Multi-DC" option if you wish to use the same OAuth credentials for all data centers.
  9. Click the "Save"/ "UPDATE" button at the bottom footer.
  10. You're good to go. Now you can easily add your ZohoCRM integration in the Cal.com settings.

Obtaining Zoho Calendar Client ID and Secret

Follow these steps

Obtaining Zoho Bigin Client ID and Secret

Follow these steps

Obtaining Pipedrive Client ID and Secret

Follow these steps

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
  6. Add your custom sender name to the .env file into the NEXT_PUBLIC_SENDGRID_SENDER_NAME field (fallback is Cal.com)

Setting up Twilio for SMS reminders

  1. Create a Twilio account (https://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. Copy your Twilio phone number to your .env file into the TWILIO_PHONE_NUMBER field
  6. Add your own sender ID to the .env file into the NEXT_PUBLIC_SENDER_ID field (fallback is Cal.com)
  7. Create a messaging service (Develop -> Messaging -> Services)
  8. Choose any name for the messaging service
  9. Click 'Add Senders'
  10. Choose phone number as sender type
  11. Add the listed phone number
  12. Leave all other fields as they are
  13. Complete setup and click ‘View my new Messaging Service’
  14. Copy Messaging Service SID to your .env file into the TWILIO_MESSAGING_SID field
  15. Create a verify service
  16. Copy Verify Service SID to your .env file into the TWILIO_VERIFY_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:

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

cal.com's People

Contributors

agustif avatar alannnc avatar alishaz-polymath avatar baileypumfleet avatar carinawolli avatar crowdin-bot avatar dependabot[bot] avatar dmytrohryshyn avatar emrysal avatar femyeda avatar g3root avatar github-actions[bot] avatar gitstart avatar gitstart-calcom avatar hariombalhara avatar jeroenreumkens avatar joeauyeung avatar katt avatar keithwillcode avatar leog avatar malte-d avatar mihaic195 avatar peerrich avatar roae avatar sean-brydon avatar somaychauhan avatar supalarry avatar thyminimaldev avatar udit-takkar avatar zomars avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cal.com's Issues

2 Factor Authentication Support

Guess the title should be self explainatory. 2FA via TOTP is a open standard which should normally be relatively easy to implement and is getting more important in this modern and connected time.

Corresponding feature voting in GitHub discussions: #72

Caldav support

In order to be able to integrate with existing calendar software, ability to sync to a caldav server would be covering the majority of calendar integrations (including Google Calendar but also most on-prem solutions).

No releases?

I see this project doesn't have any official releases, how should we know about changes or versions?

Change available booking times

I personally think there isn't any reason why a 1 hour and 30 minute meeting should only be bookable every 1 hour and 30 minutes starting from 0:00. The system should be changed.

For example:
If my whole calendar is empty so there can't be colliding events, I'm still not able to book a 90 minute meeting at 14:00 even though it's logically possible.

The times shown there should be based on an API call to Google and therefore based on the real calendar. It's much more work to do but it just doesn't make any sense for the times to be generated based on event type length.

image

Can't create an appointment

I get the following on the console after I select the date. It won't let me select time...it just keeps spinning.

image

TypeError: Cannot read property '0' of undefined
    at authorise (webpack-internal:///./pages/api/availability/[user].ts:32:88)
    at handler (webpack-internal:///./pages/api/availability/[user].ts:24:3)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async apiResolver (/home/testo101/test/calendso/node_modules/next/dist/next-server/server/api-utils.js:8:1)
    at async DevServer.handleApiRequest (/home/testo101/test/calendso/node_modules/next/dist/next-server/server/next-server.js:64:462)
    at async Object.fn (/home/testo101/test/calendso/node_modules/next/dist/next-server/server/next-server.js:56:492)
    at async Router.execute (/home/testo101/test/calendso/node_modules/next/dist/next-server/server/router.js:23:67)
    at async DevServer.run (/home/testo101/test/calendso/node_modules/next/dist/next-server/server/next-server.js:66:1042)
    at async DevServer.handleRequest (/home/testo101/test/calendso/node_modules/next/dist/next-server/server/next-server.js:34:504)
TypeError: Cannot read property '0' of undefined
    at authorise (webpack-internal:///./pages/api/availability/[user].ts:32:88)
    at handler (webpack-internal:///./pages/api/availability/[user].ts:24:3)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async apiResolver (/home/testo101/test/calendso/node_modules/next/dist/next-server/server/api-utils.js:8:1)
    at async DevServer.handleApiRequest (/home/testo101/test/calendso/node_modules/next/dist/next-server/server/next-server.js:64:462)
    at async Object.fn (/home/testo101/test/calendso/node_modules/next/dist/next-server/server/next-server.js:56:492)
    at async Router.execute (/home/testo101/test/calendso/node_modules/next/dist/next-server/server/router.js:23:67)
    at async DevServer.run (/home/testo101/test/calendso/node_modules/next/dist/next-server/server/next-server.js:66:1042)
    at async DevServer.handleRequest (/home/testo101/test/calendso/node_modules/next/dist/next-server/server/next-server.js:34:504)

OS: Windowsfx (Ubuntu 20,04 LTS)
Node: v14.16.1
Yarn: 1.22.10

Switch between 12 and 24 hour times

Maybe you could implement the option to switch from 12hr time format to 24hr time format. 24hr time format is used almost everywhere at least in Germany, the rest of Europe and I think also many other parts of the world.

Corresponding feature voting link

[CAL-720] SCIM 2.0 Automatic User provisioning

It would be nice if the user list could be provisioned from a connected LDAP instance. This would allow Admins to have a calendar link generated automatically when a new user is added, and also have the link automatically become invalid if the user gets deactivated/removed from LDAP.

Ideally one would be able to configure a LDAP filter string for the application to get a list of valid users.
The calendar link could simply be your.calendso.instance/the_username_from_ldap

CAL-720

Calendar layout (day alignment is incorrect)

First of all, thanks for open sourcing this project! Congrats on the launch, the product looks really great and I'm excited to use it!

There's an issue with the alignment of the days on the calendar when I take a look at the demo (https://app.calendso.com/bailey/1). It looks like the first day of the month starts in the top left of the month view, regardless of which day of the week the first day of the month actually is. That causes all the following days to be misaligned, so clicking on the 23rd of April for example is a Friday, but it's spatially in the column that would typically be a Monday on most calendars.

This is summed up in a comment on hacker News (https://news.ycombinator.com/item?id=26818957):

Also, what an odd calendar layout. Starting with the first day of the month at the top left means all the days are off for most months. Why would Thursday be at the very left side (as is the case in April)?? (I was initially trying to find out if the layout was Sunday or Monday starting, but apparently it's neither)

Demo Screenshot

april

Correct layout for April 2021 Screenshot

april2

Zoom integration

This is an issue to track zoom integration (a zoom link should be generated for the meeting automatically).

Star count

Hello!

This looks like a nice and promising project. I'm glad to have found out about it.

However, I'm more than a bit perplexed at the fact that yesterday (https://star-history.t9t.io/#calendso/calendso) it had 30 stars, and at the time I'm writing this (01:00 UTC Apr 16) there's 975 stars. About every 1 minute, when I reload the page, I see it has another star 🤔

Any reason for this?

Feature suggestion: CalDav support

Alongside Google & Office 365 calendar support maybe you could implement CalDav support as it's a nicely standardized, specified (RFC4791) and widely used protocol in stacks which try to rely on "Big Tech" as little as needed.

Error on startup if running on custom port

When running calendso on a port other than 3000, the console reports an issue with the auth API
https://next-auth.js.org/errors#client_fetch_error csrf FetchError: request to http://localhost:3000/api/auth/csrf failed, reason: connect ECONNREFUSED 127.0.0.1:3000 at ClientRequest.<anonymous> (C:\opt\calendso\node_modules\node-fetch\lib\index.js:1461:11) at ClientRequest.emit (events.js:223:5) at Socket.socketErrorListener (_http_client.js:406:9) at Socket.emit (events.js:223:5) at emitErrorNT (internal/streams/destroy.js:92:8) at emitErrorAndCloseNT (internal/streams/destroy.js:60:3) at processTicksAndRejections (internal/process/task_queues.js:81:21) { message: 'request to http://localhost:3000/api/auth/csrf failed, reason: connect ECONNREFUSED 127.0.0.1:3000', type: 'system', errno: 'ECONNREFUSED', code: 'ECONNREFUSED' }

I believe this is due to the code expecting the server to be on port 3000

Add input validation

Email validation should be added to the the /book page email field. If an invalid email is given this later becomes an error whilst contacting the google calendar API. "There was an error contacting the Calendar service: Error: Invalid attendee email.". The call fails and the booking does not show up in the agent calendar.

Expected behaviour: Invalid email should become a client side validation error.

Add a loading state for the book now button

Often when people book an event, because the booking API call isn’t that fast, they press it twice. And if they press the button twice, it books it twice.

Need to add a loading state for when the button has been pressed, so it displays a spinner in the button or something and disables the button while it loads.

Layout on mobile vs desktop

Mobile view (small widths)

image

Some buttons like Teams and Bookings are visible. And none of the tab links work, since I guess the hrefs are not specified.

Desktop view (larger widths)

image

Teams and Bookings tab buttons are invisible and links work, which is the intended behaviour I believe at the moment?

Time zones inconsistencies & duplicate entries.

Recently, a new time zone feature was contributed 👏. Whilst this was a very welcome contribution, I think there are currently too many time zones — unnecessarily cluttering the code and the dropdown. I can see that the inspiration was drawn from here, but I'd make some changes to the options available. For example, at the moment, we have 13 different Argentinian cities, despite Argentina having one time zone...

image

We also have now three "Americas". US at the top, and then "America", which has both Latin American cities and ... Canadian cities, like Toronto. There is also inconsistency regarding time zone abbreviations - US ones have abbreviations of the time zones they are in, and the rest does not. Whilst I can appreciate why abbreviations could be high-maintenance as UK is in GMT but changes into BSM between March and October, it's either all or none, for the sake of consistency, imo.

image

Therefore, I'd refactor this by removing unnecessary entries, clean up the inconsistencies and ideally merge some options, as for example, Central European Time is used by the vast majority of European countries, with few exceptions, and yet every single country appears separately. Usually, for example, Dublin and London appear under the same option, since they are in the same time zone (with Ireland also switching into Irish Standard Time between March and October).

image

I am raising this as an issue, as I don't want to change things around myself as I wasn't the one implementing them — happy to discuss it further and change it myself if there are no volunteers.

Unable to login if running on custom port

Currently the default port for nextjs is 3000. If a process is currently using this port, yarn dev will not work.

This can be corrected with yarn dev -p 3030 but the callback etc. will fail when trying to login as it is expecting port 3000.

Check availability in multiple calendars

I offer "office hours" to my Github sponsors, and would love to use Calendso for booking. One necessarily feature for this use-case, that Calendly does not offer in its free tier, is to check availability across multiple calendars.

That is, I have a work calendar and a personal calendar. I want to book the event in my personal calendar, but I want to make sure that there isn't already something booked in either my personal or my work calendar.

start and end times skewed

Hi guys,

great work with this first public version, off to a great start.

In my playing around with this I noticed odd behaviour with the start/end times: When setting start and end times to (for instance) 09:00-17:00 this results in guests being able to plan from 9:15 (or similar, depending on chosen event duration) till 17:00. Expected behaviour would be being able to plan from 9:00 till 16:45.

I think this should be a simple comparison bug somewhere (< vs <= or similar) but I'm still starting to find my way around this codebase, so I thought I'd report it here.

request: video tutorial setup install

congrats on product hunt achievement! i think it would be cool if you did a basic / simple self-hosted video tutorial on installing Calendso... perhaps using Laragon or something.

good luck!

Able to book a slot that conflicts with a smaller event within the slot

Bit of an accidental find; When booking a slot, if the slot being booked > the length of an existing event E.g. I have an event in my calendar from 9:15 until 9:30, this is properly blocked from booking in 15 minute booking slot times, but if I by chance have 1-hour event types as well, I am still able to book 9:00-10:00. This is due to the code checking whether the slot you are booking time is between the start and end busyTime, but not whether the slot you are booking overlaps with a smaller, other event.

Redis support

Suggestion: Please add support to Redis for all reads and write, update delete should be done on PostgreSQL as well Redis, so Redis will remain always updated.
Thank you

Can't pull calendar even after Google Integration

Hey, I posted about this in the Slack channel but got no response

I managed to go through setup and add the Google Calendars integration and set busy times/make a new event type all on localhost, but nothing's changed for the website in general? I just see the following when I go to the Dashboard, Integration, and Availability pages
Screen Shot 2021-04-20 at 11 54 56 AM

Screen Shot 2021-04-20 at 11 57 12 AM

Screen Shot 2021-04-20 at 11 57 22 AM

Screen Shot 2021-04-20 at 11 57 30 AM

Create one-time use links

Currently Calendso exposes a way for anyone to book a slot in your calendar. For my use-case, I would like to be able to create a one-time use link that I can send to someone and have them book a slot via. Essentially to just to be able to generate a token with an expiry, and then to have the application verify that the token is still valid before accepting the booking.

Feature suggestion: ics file download at booking success page

There could be a fourth button for downloading a ics file for the scheduled meeting. iCalender is standardized by RFC, has pretty good documentation and is universally usable. For example when you open such a file in macOS it starts your Calendar app and gives you the possibility to add it to one of your calendars you have configured. (for example Google, Yahoo, Outlook, CalDav, iCloud, etc)

There are several NodeJS libraries for generating ics files. Download could be done using Data URLs.

Corresponding feature voting link

image

Server Error while logging out

Expected Behavior

  1. Logout and redirect to login page, when user clicks on logout button

Current Behavior

image
on Chrome, with server currently on localhost.
username, name, email, password, bio are filled in DB. Besides startTime, endTime, createdDate,eventTypes and credentials.

Error Log

TypeError: Cannot read property 'user' of null
at getServerSideProps (webpack-internal:///./pages/settings/profile.tsx:429:22)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async renderToHTML (/home/ritom/Desktop/Projects/calendso/node_modules/next/dist/next-server/server/render.js:40:215)
at async /home/ritom/Desktop/Projects/calendso/node_modules/next/dist/next-server/server/next-server.js:109:97
at async /home/ritom/Desktop/Projects/calendso/node_modules/next/dist/next-server/server/next-server.js:102:142
at async DevServer.renderToHTMLWithComponents (/home/ritom/Desktop/Projects/calendso/node_modules/next/dist/next-server/server/next-server.js:134:387)
at async DevServer.renderToHTML (/home/ritom/Desktop/Projects/calendso/node_modules/next/dist/next-server/server/next-server.js:135:522)
at async DevServer.renderToHTML (/home/ritom/Desktop/Projects/calendso/node_modules/next/dist/server/next-dev-server.js:34:578)
at async DevServer.render (/home/ritom/Desktop/Projects/calendso/node_modules/next/dist/next-server/server/next-server.js:72:236)
at async Object.fn (/home/ritom/Desktop/Projects/calendso/node_modules/next/dist/next-server/server/next-server.js:56:580)
at async Router.execute (/home/ritom/Desktop/Projects/calendso/node_modules/next/dist/next-server/server/router.js:23:67)
at async DevServer.run (/home/ritom/Desktop/Projects/calendso/node_modules/next/dist/next-server/server/next-server.js:66:1042)
at async DevServer.handleRequest (/home/ritom/Desktop/Projects/calendso/node_modules/next/dist/next-server/server/next-server.js:34:504)

Support for automatic Google Meet link

Hey guys,

I have everything ready to add support for automatically generate a Google Meet link when creating an event. This is done on a per-event basis with a new column on the EventType table.

There are some nuances, but the main part is this, in the pages/api/book/[user].ts when creating the event:

{
  // ...
  conferenceData: {
    createRequest: {
      requestId: Math.random().toString(36).substring(7), // just generating any random string should do the trick
      conferenceSolutionKey: {
        type: "hangoutsMeet"
      },
    }
  }
}

If this is something you are interested in, I will do a PR.

Allow the inviter to set the meeting duration

As a Calendso user who is invited to meet with the inviter, I want to share my availabilities via Calendso and let the inviter set the meeting duration/ending time, so that I don't need to ask the inviter for the meeting duration.

Timezone support

Currently it looks like the calendar is hard-coded to Europe/London. This should likely be set to the timezone of the calendar, or perhaps a setting on the user.

Not sure what the experience from the user perspective is - if it should show in the timezone of the calendar or if it should be translated into the timezone of the user.

Docker support

I'm new to this project and I love it so much already.

Would be awesome to have a docker-compose file in order to start the environment (postgres and so on) and deploy it easily on a server.

Avatar image

I saw there is a field in the DB for the avatar, that should be a URL or some base64 for the image?

Multiple availability slots

Hello and first things first, thanks for this!

I'm a heavy user of calendly and one things I love so much are availability schedules.
I think is a must have with calendso as well. Pretty happy to help testing or brainstorming it, and adopting it in my company!

Stripe Integration

It would be nice to add Stripe connect or simple copy/paste Stripe API keys and have an option to add price to the first step "Quick Chat $5" or "Demonstration $25" and add a credit card form (Stripe Element) before confirmation.

The getIntegrations function runs repeatedly due to state polling

Within the pages/integrations.tsx page, the getIntegrations() function is called repeatedly, most likely due to the integration data using state, hence it is re-fetching the data constantly as the state refreshes.

Here's the problematic code:

const [integrations, setIntegrations] = useState([]);

function getIntegrations() {
        fetch('/api/integrations')
            .then((response) => response.json())
            .then((data) => setIntegrations(data));
}

// TODO: Stop this function from running repeatedly
getIntegrations()

user setup

I'm new to Calendso. I'd be happy to work through the documentation but I see that docs.calendso.com is without an address. I'm guessing that means docs are not yet developed.

I was finally able to get Calendso installed on an Ubuntu instance. I'm having trouble creating a Calendso user. When I create one through Prisma Studio, the password that I enter is transformed to "null". I was hoping it's just getting hidden from display, but when I attempt to log in as that user, I get "Illegal arguments: string, object An error occurred when logging you in. Head back to the login screen and try again." I'm guessing that the object is "null" and it needs a password string.

Is there something special about the password field? Is it plaintext or a specially-formatted hash?

Doesn't pull busy times from Google Calendar

Hi! very happy to discover this endeavour, try it out and post helpful bugs comments and suggestions.

In this case I notice that after you set up the slot format of the appointment type, then navigate to the public page to book an appointment it displays all slots as available, despite I have several already booked that would conflict.

In the case the app is not capable of fetching the events from the host calendar it should display some sort of error on the web interface and/or the server.

I'm on OSX Catalina. The app was installed and set up on localhost:3000.

Kubernetes Support

I will be starting working on Kubernetes Support. Adding this issue so everbody can follow up here.

Can't log in

Hey, I followed the setup, created an entry using Prisma Studio, saved the record, but whenever I try to log in to the created user on http://localhost:3000/auth/login, it always tells me an "Incorrect Password" screen. I've copied and pasted the password, changed it a couple times, but still get the error

Hidden Event Types

Add the ability to create event types that do not show on the /user page, and instead can only be accessed by going to /user/type

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.