The Week and Event Calendar for Webflow – by No Code Flow

* How can you create a calendar within Webflow to show your latest events or to handle bookings?

Currently, there exists one way of creating an event and booking calendar within Webflow that needs no usage of custom coding. This approach is called third party integrations.

With the No Code Flow week calendar for Webflow, we created an alternative way for you to build an event calendar with a real week view within Webflow, that allows you to show or allow people to book events on your Website.

Both of these approaches work for different use cases – so let’s see which one suits you better.

In the next 8 minutes we want to help you decide on how to create an events and booking calendar for Webflow site.

Create an events calendar in Webflow

Starting off with the case, that you only need to show events without any booking functionality whatsoever. In this case, Webflow's out of the box features might be already the answer to your problems: You can create a CMS collection list in which each item contains a date. These items then represent your event dates. In the next step you can sort these CMS items in different ways, to allow your users to navigate through these events.

Webflow provides this awesome video tutorial that’ll guide through this with a step by step guide.

So that’s it, right? Well yes, if you want a calendar on your website that feels more like a vertical list instead of a calendar view we used to see every day in our devices, you are good to go!

In our opinion though, this approach lacks a proper user experience. The solution to show a list view – like in the Webflow tutorial – might be fitting for the case, that you have only very few events to show every month. Otherwise it gets overwhelming and doesn't really provide a proper overview of the different choices at a glance. Even worse: the more events you want to fit into a list, the messier it gets for your users.

For a smooth user experience, we think it's important to provide an interface that fits. Looking at the best practice and industry standard to show events in a user interface we see mostly week calendar views. This approach combines the overview of different days within a week (horizontal view) with a list of the events below each day (vertical). We use this kind of interface every day in applications like Google Calendar or event Platforms like Eventbrite – and are therefore used to.

Because of this, our approach is to deliver you a calendar for Webflow that can show events in Webflow in a week view format. It works basically like the solution from Webflow itself – in which you can add your CMS items and style them afterwards. The only difference is, that the No Code Flow week calendar enables you to display these items in a real week view calendar format.

‍

Each item gets sorted in the calendar columns according to the dates you fill in the CMS and then sorted within that table column in the given time. Basically like in every other calendar you know. Each item represents a CMS item.

Because we build in Webflow without third party stuff you have all freedom that are used to have from the Webflow Designer. Each event can be styled and modified like every other element – so if you want an event in your calendar to be pink, you can achieve that easily with 2 mouse clicks.

Also, you can modify how many days you want to include in your calendar week view with one simple setting and then style every day accordingly.

‍

After setting all of this up you just have to press publish and the No Code Flow calendar displays your events in a week view calendar in which you browse through the different weeks / days with your mouse or on Mobile via swiping.

Add a booking feature to your calendar in Webflow

Things get a bit more tricky here. For this use case already exists a Webflow integrations page containing solutions for this specific use case. So let’s dive into it.

Current third party solutions

Let’s pick the EventCalendarApp for example. This app enables you to create the whole calendar as an embed on your website. This means you have to place a custom code element on your website to integrate their calendar. After doing that you can start to configure your events, how everything looks, and manage the entire bookings process in their tool. A really nice all-in-one solution to manage your events in one place. Here you can see, how it’s done.

This approach is pretty straightforward – and works for a lot of website builders. But what can possible disadvantages of this approach? We’ll explain it to you in an example of how you can also build a booking system with the No Code Flow Webflow calendar plugin.

Implement a booking calendar with the No Code Flow component x Eventbrite

You can start building your booking calendar using the base of the event calendar you can build using the No Code Flow Webflow calendar component which we described earlier. Since you can modify this calendar in any way you want to, you can add easily links connected to your collection list to each event. These custom links then can be used as booking links.

In our example, we'd like to use Eventbrite as Back-End for the actual event booking process, since it’s one of the most famous and widely accepted tools on the market. Of course, every other tool that you might want to use, would do the job as well. With Eventbrite though, the user adaption in our experience is way better than with far more unknown tools. So let’s go with this example!

1. First, create an Eventbrite account and create your first event
2. Copy the link of your event in Eventbrite to your clipboard
3. Add a “booking link” field to your Webflow CMS calendar collection list
4. Paste the booking link in the "booking link" field your Webflow collection list item
5. Create and link a booking button in the No Code Flow Webflow calendar plugin to the "booking link" CMS field
6. Publish and you're done

Our vision of this calendar for Webflow

We from No Code Flow build websites in Webflow for nearly 4 years. For us, it’s the only tool that makes web design a fun experience. At one point though we built so many workarounds, that we thought: why not share all of this work? It would be awesome if everyone could build more advanced Webflow websites without suffering so much as we did. We are part of the Webflow community and use every one of our tools in our own projects. Therefore, we have a big interest in developing this calendar further and share other created components as well.

So we'd love to get your opinion: If you have any feature idea, that you would need in a calendar component for Webflow, contact us. With every feedback, you'll help us to enable you and other creatives to build more awesome Webflow websites. Happy building!

P.S.: a month calendar is already planned, we'll keep you posted as soon as it's going to be available right here