Calendars without a doubt play an important role in our lives, enabling us to manage our activities and make best use of our time by prioritizing tasks as well as be as productive as one can be. That’s why in the last two decades, people have started to use the web and mobile calendars available as much as possible. Any calendar, of course, can be accessed using different smart devices such as PCs, smartphones, tablets, TVs and many others.
The calendars can be implemented or integrated using different programming languages. Depending on the type of website or web app that are accessed using a desktop or mobile, a calendar with great UI and UX can play an important part. This is especially true for websites that require the users to pick a date from a calendar form or provide a date when filling up a form. An underdeveloped calendar can hurt or break a business. That’s why it’s critical for online businesses to have a calendar filled with useful features, great user interface for a better user experience.
Undoubtedly, front-end development plays an integral part when implementing or integrating a calendar into different websites or apps such as admin panels, booking and travel websites, project management apps, etc. The developer can use different web technologies such as React, Vue, JavaScript, Typescript, jQuery, Angular, HTML for structure and functionality while CSS, SCSS or LESS for styling the calendar as designed.
Calendar Examples
- React Calendars
- JavaScript Calendars
- Angular Calendars
- jQuery Calendars
- Vue.js Calendars
- HTML Calendars
If you’re new to front-end development, implementing and styling a calendar can be a challenge. There are calendar templates, libraries or components available online that can help you get started. The CodePen examples shown below were made by either web designers or developers making them a great addition to any website or web application.
React Calendars
Thanks to React’s atomic components, the calendars and date pickers can be highly customizable, letting you create flexible and stylized calendars with little code. The libraries used in these React calendar templates from Codepen besides reactJS and ReactDOM are:
- Moment.js
- React Big Calendar
- date-fns
- interact.js
- Immutable.js
Calendar React App
Canadian 2021 calendar built with React Hooks and CSS grid. No Media queries were used…
A full year calendar built with React that has click-able holiday cells that shows further information about it. It has a responsive layout using CSS grid.
React Calendar
This React calendar that has a clean design, can be a perfect fit for hotel and travel websites or book apps thanks to it’s feature that can generate bookings.
React Big Calendar: EventWrapper Demo
Adds onContextMenu callback to events. //github.com/intljusticemission/react-big-calendar/issues/1113
As you may already know, the Big Calendar built with React, is a component made with flexbox for modern browsers that let‘s you manage events and dates.
SVG Tutorial
In this SVG tutorial we go through the source code of 24 SVGs from simple to more complex ones. We cover basic shapes, quadratic and cubic Bézier curve…
A neat Christmas advent calendar built with React. CSS grid is used for layout, while the illustrations are done with SVG and animations with CSS.
Interactive Calendar UI
A simple React calendar made for desktop, with the first day of the week being Sunday. The days and the months can be selected while in the right sidebar the day selected and and the remaining days until next year are displayed.
Calendar [Desktop Preferred]
A translucent React calendar made for desktop, with the first day of the week being Monday, that uses CSS zoom-in animations to better view events and dates.
React Simple Calendar
A simple React calendar widget with dynamically generated months that you can use in your React projects.
React Calendar Timeline Demo
This React calendar timeline let’s you view a group’s appointments or assignments that are booked for the day, the week or even months. You can horizontally scroll to see further events.
JavaScript Calendars
Compared to using libraries for calendars, coding a calendar from scratch using native JavaScript let’s you customize it more while also reducing page load time by not having to use additional files.
Sticky Header Calendar [With Overflow]
A native JavaScript daily calendar with events that can be scrolled horizontally and has a sticky header for seeing the days at any hour.
Linear Calendar
Linear calendars are a much more sensible alternative to the traditional year calendar. Play around with the main function’s arguments to see other mod…
This is a great linear calendar example made with JS that can be used if you want a yearly calendar. It’s a great way to let children learn to count in a meaningful way especially if there is an event coming up.
Organizer
Pure JS Draggable List Organizer. For extra functional fun: Mini 3-Day Auto-Update, CalendarClock, Random, fake weather stats.
A mobile calendar’s day view filled with draggable events coded using native JavaScript. There is also a clock with current time and three viewable days, today, yesterday and the day before yesterday.
Calendar – Vanilla JS
Due to the big problem of working with dates inside a system, I decided to make an interactive calendar using pure Javascript, so that the…
A useful calendar widget for both desktop and mobile websites built with JavaScript that has multiple features such as: date picker, go to date, date and month changer.
CPC-Holidays-Advent | Calendar
A transparent advent calendar with interchangeable background depending on the month. You can either change the month or year using “next” and “prev” or using the dropdown.
Windows 10 Calendar Effect
A cool Windows 10 calendar effect recreated using native JS and CSS animations. You can switch backgrounds to see different color effects.
Simple Calendar & Scheduler App
A simple Calendar & Scheduler mobile app interface. It was designed when I was starting to struggle with Outlook organizer, realizing how much companie…
A clean yet concise mobile UI calendar app design with event details[time, place and event info] and actions implemented using native JS.
Schedule Board
A horizontal calendar schedule board made with JavaScript where you can see other’s events, appointments and details.
Angular Calendars
If you are developing your app or websites using Angular or AngularJS and need a stylized calendar, than the example shown bellow might be of help. Besides angular.js the other libraries might be used with these calendars are:
- angular-json-calendar.js
- FullCalendar
- Materialize
- AngularJS Material
You can find additional libraries for other web application frameworks.
Angular Material DatePicker
An Angular Material calendar with datepicker that can be used in any type of websites or web application.
Schedules – Event Calendar With AngularJS
A weekly calendar built with AngularJS that let’s you turn on or off, share, alter or delete different daily events using a simple modal window.
Angular JSON Calendar Custom Day Template
Angular-json-calendar demo using a custom template for the day.
A custom monthly calendar template made with Angular JSON library great for websites or to be printed and use daily by anyone.
FullCalendar With AngularJS
Full calendar integration with AngularJS
This is a great full calendar template implemented using AngularJS that let’s you view your calendar events daily, weekly or monthly and can let you add as many events as you want using the datepicker.
FlexCalendar
An Elegant Calendar Built With Angular.js.
A simple yet elegant calendar widget built with AngularJS and CSS Flexbox for layout that can be used in any type of website.
jQuery Calendars
jQuery is one of the JavaScript libraries that you can use to create a custom calendar that will work across a multitude of browsers. It can also make your calendar event handling and animation work smoother.
jQuery UI DatePicker Calendar
Inspired by //codepen.io/havardob/pen/WwWooB. Simple JQuery and CSS practice.
Thanks to jQuery UI library this calendar uses a small amount of code. So if you don’t a cluttered JS file you can use this example.
Calender | UI/UX
This is a UI implementation example with interactions…
This examples is more like a calendar event‘s list where you can click on an event to see more details.
jQuery Event Calendar
A pure Javascript powered, fully-functional calendar, complete with events that can span over multiple dates and months.
This is a fully-fledge jQuery calendar that you can use as it is in your web projects.
Vue.js Calendars
Thanks to Vue’s components that extend HTML elements you can use already existing calendar templates made in HTML and transform them into components to better customizes them and add functionality.
Vue JS Calendar Via MomentJS
A great calendar widget built with Vue.js that you can use in your web and mobile websites or apps.
Datepicker – Vue.js
Barebones calendar/datepicker with DateFNS and Vue.js.
A simple Vue calendar that let’s you select and show the date you picked. You can change the months using the left and right arrows.
HTML Calendars
If you are new to front-end development, using HTML structure to implement a calendar design is the way to go. Afterwards if you want to make the calendar dynamic you can always use other web technologies to fill in the data.
Windows Fluent Design Calendar
Inspired by the preview of the Microsoft Fluent Design System calendar. I thought it looked really pretty so I made it for the web.
An implemented Microsoft Fluent calendar design concept using HTML for structure and CSS Flexbox for responsive layout.
Responsive Calendar
CSS only for a server-side generated calendar using an unordered list instead of a table….
A colorful responsive calendar using HTML lists and Flexbox for styling and layout. The end result looks great on desktop and on mobile.
Planning App CSS
Partially working planning app, only CSS. Design by //dribbble.com/shots/3001561-Qplanning-App.
A beautiful mobile planning app with a drop-down calendar built
using HTML and CSS. The drop-down effect is achieved using the tag and the :checked CSS pseudo-class.
Apple Calendar Experiment
An experiment, replicating most of the basic UI for Apple Calendar with CSS.
This is a great implementation for the basic Apple Calendar basic UI using the HTML tables and some simple CSS.