24 Free Bootstrap Calendar Templates 2026
These free Bootstrap calendar templates cover month views, inline and pop-up date pickers, date range pickers, event calendars and a full-screen calendar with month, week, day and list views.
Updated September 2026: the list has 24 items. We rebuilt the 20 Colorlib calendars as dependency-free HTML, CSS and vanilla JavaScript, with no jQuery, date plugin or moment.js, and 18 of the 20 downloads are now under 200 KB. We have also added the uiCookies calendar pack and three 2026 snippets that put a calendar to work: a call scheduler with time-zone conversion, clinic time slots and event cards that add to your calendar.
Each works on its own or inside a Bootstrap 4, 5 or 6 project and is a free download with a live demo. Tips for choosing a calendar and answers to common questions follow the list.
Ultimate Free Bootstrap Calendars
uiCookies Calendar Templates (10 templates)
Ten calendars covering more than the month grid: a mini date picker, a dark events calendar, a week schedule, an agenda list, a year overview, a booking range picker, a glass widget, a printable planner and a calendar with an events sidebar.
The date logic is vanilla JavaScript, so there is no moment.js or FullCalendar to pull in for what is usually a small piece of a page. From our own uiCookies library, free for commercial use.
1. Bootstrap Calendar V01
Let’s begin with a clean, simplistic, and highly versatile free calendar widget that drops into any Bootstrap project. It showcases the month and year at the top with clickable arrows for the next or previous month.
Below are the weekdays, starting with Sunday and going to Saturday.
Moreover, you will see the current day HIGHLIGHTED with a round blue mark.
Lastly, the days your user selects turn gray, which you can pre-test by visiting the live demo preview. The calendar is plain JavaScript, and the download shrank from 256 KB to 58 KB.
2. Calendar V02
This unique template helps you embed a neat calendar into your application with a SPECIAL section on the left for the day you pick.
By default, it displays the current date, but it will change if you select a different day of the month.
With the left and right pointers, you switch between months.
Also, you will notice the reset button, which you can activate to make the selection go back to default.
3. Calendar V03
If you would like to offer your users the option to view two months instead of one on a calendar, this is the free template you should choose.
It readjusts smoothly to different screen sizes: horizontal on the desktop and vertical on mobile. That comes from its own CSS, so it behaves the same with or without Bootstrap on the page.
Today’s date is purple, which you can EDIT however you want. You can also pick a set period, which turns gray when on.
4. Calendar V04
Calendar V04 is a fantastic solution for combining a calendar with different events.
It features a split-screen design that works equally awesome on mobile and desktop.
The left side is for the daily calendar with the year at the top, followed by months, weekdays, and exact dates.
The template features a CONVENIENT section on the right side for pushing events and sharing other useful details.
5. Calendar V05
If you are particularly searching for a free grid calendar template for a Bootstrap or plain HTML site, voila, this one will do you well. The first column is for years, the second is for months and the third is for days.
The template highlights the current day, which is right in the middle.
Even though it comes with different purple tones, you can brand the calendar with your color scheme.
This way, it will smoothly INTEGRATE into your website application, keeping the nice flow intact.
6. Calendar V06
Some like it basic and some like it with special effects. If the latter appeals to you, this is the calendar that sorts you out with a cool animation, driven by a few lines of vanilla JavaScript.
Not only does the calendar shift and change color, but the background color also changes.
Other than that, it highlights the current day but does not allow you to select custom periods. If you want to SPICE THINGS UP, do it with Calendar V06.
7. Bootstrap Calendar V07 by Colorlib
A calendar can consist of just the date or feature an image and other special effects. This is a great example of a calendar with an image, rocking a split-screen layout.
You will find an image background on the left side with the date you select from the right-hand calendar.
The image area also displays month and year.
Another cool feature of this free snippet is the shortcut/default button that takes you back to today.
8. Calendar V08
This modern and easy-to-use free Bootstrap calendar template features more than the year, months, weekdays and dates, and it needs no Bootstrap files to run.
At the bottom is an additional banner with planned events for a specific date.
Moreover, the widget also features an integrated “Add Event” button that opens a new feature for adding events.
You can specify the event’s name and the number of attendees. Calendar V08 works smoothly across all popular devices.
9. Calendar V09
Calendar V09 is more of a datepicker snippet than anything else. It showcases month, day, year and current time. The user can configure it to the last detail with that in mind.
In fact, to the very last second.
Along with the main datepicker functionality, you will find a time icon and a chevron to change the seconds.
Also, users can delete their settings or hit the X icon to close the widget. The picker keeps its look but no longer needs its plugin or moment.js.
10. Calendar V10
What is today’s date if you would like to feature on your application or website? This is the free calendar to go with, on its own or in a Bootstrap layout.
Instead of creating it yourself from the ground up, Calendar V10 rocks it all for smooth inclusion.
It displays the weekday at the top, the month and day in the middle, and the year at the bottom. The design is also very clean and effectively integrates with different branding regulations.
But if you would like to alter it (color-wise), by all means, make it happen.
11. Calendar V11
With Calendar V11, you can allow your users to pick their ideal date for whatever purpose you have. It is a neat datepicker that appears as a pop-up, keeping the presence on your application or website minimalist.
It comes with a shortcut for today’s date, but anyone can pick any date. In addition, there’s also a clear function that deletes everything and a close button.
The tool comfortably caters to different themes and branding out of the box, so you are welcome to use it as is. The rebuild dropped the old plugin and moment.js, taking the download from 1.2 MB to 171 KB.
12. Calendar V12
You are welcome to use ours instead of building your datepicker to include in your application.
Calendar V12 is free of charge and built with plain HTML, CSS and vanilla JavaScript, with no plugin or moment.js to load.
It works great on mobile, tablet, and desktop devices, ensuring great UX.
Due to its cleanness, you can embed the “pick a date” bar almost anywhere. But once you click on it, a drop-down date picker appears, offering quick selection (and deselection).
13. Calendar V13
Calendar V13 is a neat date range picker with an option to choose “from” and “to” dates. They both open a date picker in a drop-down style that only pops up when clicked.
It allows switching between months, choosing today’s date with a single click or clearing the selection.
Moreover, it features a mobile-friendly structure with GREAT execution. While on desktop, date pickers are one beside the other, on mobile, they are one on top of the other.
See the live demo preview and go from there.
14. Calendar V14
You can now integrate a modern free datepicker widget into your project without sweat.
Calendar V14 features a user-friendly structure and code, enabling both beginners and experts to maximize its benefits.
Furthermore, the minimalist look works well out of the box, but you can fine-tune it further. The current date or the date you select gets highlighted with a round button so no one can miss it.
You can alter the color if you want so that it suits your regulations to a tee.
15. Bootstrap Calendar V15 by Colorlib
Here is another great alternative for everyone looking to add date range pickers to their apps or websites.
The design is similar to the one above; this free snippet features two calendars for selecting from and to dates.
The datepicker is straightforward and allows for a quick embed into your project, Bootstrap-based or not. It works by default, but if you are interested in light configurations, you can do that, too.
But first, test it out yourself by hitting the demo preview.
16. Calendar V16
This free minimal inline calendar can easily work for anything, with or without Bootstrap. By default, it showcases today’s date, but anyone can pick any date.
Calendar V16 is an excellent widget that can decorate your application and boost its functionality.
The layout also follows all the latest web trends to make the EXPERIENCE equally amazing on desktop and mobile.
One cool benefit of Calendar V16 is that you don’t need to configure anything, as it works great, accommodating different themes and styles by default.
17. Bootstrap Calendar V17 by Aigars Silkalns
If you dig the previous calendar but feel more features would be necessary, check Calendar V17. It is a similar inline calendar with a result bar at the top.
When you select the date from the datepicker, the full date appears in the bar (month/day/year). This is the only template functionality that lacks the clear/delete option, which would revert to the default appearance.
However, we have many other neat solutions that you can use to win the game.
18. Calendar V18
When you combine an inline calendar with results and a date range in a single template, you get Calendar V18.
A plugin-free widget that works across different devices, on its own or in a Bootstrap 4, 5 or 6 project. By employing Calendar V18 out of the box, you will witness an excellent result once it is integrated into your project.
Note: It works great for online bookings.
Still, if you’d like, for instance, to change the coloring, make it happen so it fits your needs and wishes accordingly.
Moreover, if the check-in date exceeds the check-out date, it no longer functions.
19. Calendar V19
Calendar V19 is your best bet if you’re considering adding an event calendar to your website or app. Its modern and minimal design ensures a distraction-free viewing experience.
You can add different events for different dates, even include multiple. For the latter, the calendar creates a pop-up that displays all the events for that particular date/date range.
There’s also a button that DIRECTS you to today’s date and left and right arrows for switching between months.
Last but not least, it adapts to different devices fantastically, ensuring a great user experience. The rebuilt download is 282 KB, down from 1.8 MB.
20. Calendar V20
With many events in a calendar, it can get crowded and unpleasant to view the happenings consistently.
If so, Calendar V20 is the full-screen alternative to the previous template, and at 301 KB (down from 1.8 MB) it is a light download.
Moreover, this calendar works with multiple views: month, week, day, and even a list view.
You can skip between months and select the current date with the “today” button. Create a HIGHLY functional event calendar now with Calendar V20.
More 2026 calendar snippets from Colorlib
Calendars built into booking and event snippets from our 2026 library: a month-grid scheduler, clinic slots per day and event cards that add to your calendar.
Appointment Form V04: Consultation call scheduler with month calendar and time-zone conversion
A three-pane scheduler for booking a 30-minute video call: a host panel with the call details, a month calendar built in JavaScript and a list of start times for the chosen day. Slots are defined in the host's New York time zone and shown in the visitor's own zone, detected with Intl, with a 12h/24h switch. Choosing a time leads to a short details step and then a confirmation card with an .ics download.
Best for: consultants, coaches, agencies and sales demo booking. Plain HTML and CSS with a few lines of vanilla JavaScript, a 210 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Appointment Form V01: Doctor and clinic appointment request with filtered doctors and time slots
A clinic booking form with a department select that filters the doctor list, a date picker that rejects weekends and a grid of time-slot chips generated for the chosen day. Some slots show as taken and past times are hidden for today. A dark teal side column holds the clinic's hours, address, phone and a short what-to-bring list, and a confirmation panel echoes the doctor, date and time.
Best for: clinics, GP practices and medical centres. Plain HTML and CSS with a few lines of vanilla JavaScript, a 381 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Card V11: Event cards with add to calendar
Event cards with a photo, an overlapping date badge, category, time, venue and attendee count, above a ticket-style stub with the price. The Add to calendar button generates and downloads an .ics file from the card's data attributes, then confirms in a live region.
Best for: event listings, venues, meetups and conference sites. Plain HTML and CSS with a few lines of vanilla JavaScript, a 408 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
How to choose a Bootstrap calendar
Pick the right type first. A date picker (Calendar V09, V11, V12, V14 and V16) is for choosing one date in a form, a range picker (V03, V13, V15 and V18) for check-in and check-out, and an event calendar (V04, V08, V19 and V20) for showing what happens when. Using the wrong type is the most common reason a calendar feels awkward.
Consider the native date input for simple forms. On phones, <input type="date"> opens the device’s own calendar, which is hard to beat for a single date like a birthday. Use a custom calendar when you need ranges, blocked dates or events; Appointment Form V01, for example, rejects weekends with an inline error.
Make days reachable by keyboard. Arrow keys should move between days, Page Up and Page Down between months, and each day button should carry the full date as its label. Appointment Form V04 does all three.
Handle time zones for anything booked online. If people book across regions, store times in one zone and show them in the visitor’s own. Appointment Form V04 converts the host’s New York slots with the browser’s Intl API.
Let people take the date with them. An add-to-calendar button puts the event into the visitor’s own calendar app. Card V11 and Appointment Form V04 generate an .ics file in the browser, with no service needed.
Frequently asked questions
Does Bootstrap have a calendar or date picker component? No. Bootstrap 4 and 5 ship no calendar or date picker, so projects use <input type="date">, a plugin, or a ready-made snippet like the ones here. These calendars need no Bootstrap, jQuery or moment.js, and they look the same inside a Bootstrap 4, 5 or 6 project.
Can I use these as an event calendar? Yes. Calendar V04, V08, V19 and V20 are built for events: V08 has an Add Event button, V19 shows all events for a date in a pop-up, and V20 adds month, week, day and list views. The demo events are sample content, so load your own from your backend or a JSON file.
Will they work with React or Vue? They are plain HTML, CSS and JavaScript, so you can move the markup into a component and run the script when it mounts. In a React-heavy app a component library may be less work; these suit static sites, server-rendered pages and projects that want no dependencies.
Can I use them in commercial projects? Yes. Colorlib snippets are free under CC BY 3.0 for personal and commercial projects, as long as you keep the credit link. The uiCookies pack comes with its own license, so check its page first.
For a simple month view, start with Calendar V01; for bookings, Calendar V18 or Appointment Form V04; for events, Calendar V20. To put a calendar inside a booking flow, see our appointment form templates.
Related Posts
For the bootstrap calendar can i know how to highlight a specific date on the calendar? thanks
Clement,
You can do that using a combination of JavaScript and CSS. Create a JavaScript for the selection logic you want to use, then apply HTML class for that item and style it using CSS.
You can check any previews to see how we have done it ourselves.
Thanks so much for these examples, they are very helpful! I used the V02 example and was pleasantly surprised with how much “just worked” when porting it to Bootstrap 5. I just had to bring over everything from “.elegant-calendar{…” onwards from the style.css file and I was off to the races.
Thanks again!