The Event Calendar for Webflow that you've always searched for by No Code Flow
Ever searched desperately through the Internet and Webflow forum to find a solution to build a 100% styleable and CMS ready calendar Webflow? Yep, we never found good solutions neither. So we built it for all of us.
Because everything is 100% built and styled within Webflow, only using plain JS embeds for functionality, you can customize everything. Because no one wants a shitty iFrame that doesn't fit the overall visual approach of a website in 2022 anymore.
Once added to your project, you can just start to style the classes – like you do it with everything else you build in Webflow.
We'll send you a set of classes and some custom code, that you can add to your site with a little tutorial. We provide a text version and a video. It fells a bit like building an Ikea cupboard.
The whole data in the component comes out of the Webflow CMS, so that your clients can easily add and change items on the live website.
We took care of the functionalities and the code, so that you can focus on the style and User Interface.
There is no third party interface, no shitty surprise, no random UI bugs because everything is all in Webflow. If there is a problem, text us and we'll help you. As easy as that.
In case you just want to start super fast or are searching for style inspiration, we provide with a styled and ready to use version.
Webflow is charging you on a monthly basis, we don't. With the purchase of this tool you can add as many filters as you want within one Webflow project. Made for Agencys and Freelancer, because you simply use your client budget, but don't have to built it yourself.
Search and buy a component on the No Code Flow Website. The Payment fulfillment is 100% secure and run by Gumroad – this is more secure and easier for every one of us.
We'll send you this little form to give us your Webflow account E-Mail adress and to type in the license key you will get via E-Mail to verify your purchase.
We'll send you 2 projects to your Webflow account E-Mail adress. The first will be the template file, in this case "NCF Calendar Styled Template" and the other one is the plain project, which you can style from 0 "NCF Calendar Plain Version".
Also you will get a little tutorial video to implement the component on your website.
Things that might be unclear
Can I see how it works before purchasing?
Yes! You can see the Webflow Demo of our Demo File. It is build with the exact same code that you're going to use to. You can even check it in the inspector if you want to.
Can I customise every UI element?
Yes, in our tutorial and the file we'll provide, you get a "template" for every different state, that you just can style. So can customize EVERYTHING.
Is there a pre-styled version?
Yes, we will provide you with the template file which you can style from zero and with our demo file that you modify in any way you want to.
For how many different sites can I add the CMS Filter List?
Per purchase you can add the item to 1 Webflow project. You can transfer the project while doing so, but you can't clone the site and use it double. The idea is that it's fair for you and your client. You save the hours of work for one single project. No monthly fee, just one single payment.
Is it possible to switch the breakpoint for the calendar?
Yes this easily possible and we show you how in the tutorial that you will get to implement the website.
Are there more views than the 4-day-week-view?
Yes this easily possible and we show you how in the tutorial that you will get to implement the website.
Is it possible to use the calendar as month view?
No, but we're working on solution for that too. Sign-Up to get the latest update once we released the component.
Is the time of the calendar infinte?
No, the calendar works from today -1 month in the past and +2 months in the future. This means when today the 01.01.2022 is, your users can view the dates from 01.12.2021 - 01.03.2022 – starting always with the current day.
What do other people say
Without any unreasonable effort, I was able to use the No Code Flow components to create different landing pages. It worked awesome and the best is: once paid you're good to go. Not another sign-up or other monthly fee.
A component that enables you to create different items / events within a 4-week-day calendar view. Through this you can style your websites very own calendar while using your Webflow CMS without any additional coding effort required.
Turn your Webflow website into an overview for coming and past events. A component that works with up to 100 CMS items in Webflow and saves you a lot of time.
Easy editable for clients and yourself within the editor and ready for 100% custom Webflow styling.
Included in your purchase
You will get an E-Mail with all important data that you need to get started in your project
Plain Filter Version for a rapid styling from zero in your Webflow file
Pre-Styled Version (demo file) that you can instantaneously use within your project as a template
A video tutorial that guides you through the step by step installation guide
The License of your purchase for a one time usage with which you can make sure that you're using it legit
*this is a one time payment, once paid you can start immediately :)
* 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!
First, create an Eventbrite account and create your first event
Copy the link of your event in Eventbrite to your clipboard
Add a “booking link” field to your Webflow CMS calendar collection list
Paste the booking link in the "booking link" field your Webflow collection list item
Create and link a booking button in the No Code Flow Webflow calendar plugin to the "booking link" CMS field
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
So... for who did we build this?
People who build websites with Webflow and have no idea how to code at all
This tool helps with a high-quality prebuilt JS component which is fully integrated in Webflow. No coding required, 100% Webflow styleable, used in live websites and working at this very moment.
People that love to safe a load of money and time while building Websites in Webflow
To build this you’ll need between 8-16 hours. If you earn 70€ per hour you spent 560€-1.120€ on creating this filter list on your own. You save actually at least 541€ with this solution.
No Code Flow provides no code components and tools for the Webflow CMS. Our approach is to build components that help you to build more awesome Webflow sites without using custom code or relying on third-party stuff.