Author: Jake Rocheleau

Building a full calendar interface is tough work. There are major differences between calendars on the web and calendars for mobile apps, so it’s good to study examples and see what’s out there.

After scouring through CodePen, I’ve organized the absolute best calendar UIs I could find that was created specifically for websites. All of these calendars run on CSS for the interface, although some add JavaScript functionality to create some cool interactive features.

Take a peek at these snippets and see what you think!

Colorful Calendar Concept

This first demo really grabbed my attention due to its bright color scheme and impeccable style.

Surprisingly, this colorful calendar even lets you move up & down the page with small arrow icons. The entire calendar run solely on HTML and CSS, so completely JavaScript-free.

The idea actually came from a shot on Dribbble and was coded into reality by developer David Khourshid.

Certainly a unique take on calendar design and this color scheme is one for the record books.

SVG Seasons

We often associate the months with seasons, and most print calendars reflect this. So why not bring that seasonal charm to your digital calendars too?

This seasonal calendar design uses custom SVGs and some basic animation to create dynamic seasonal headers. You can move between months using the arrow icons and you can even click on the dates to select them.

I’m quite fond of the date selection animation since it mimics the act of someone drawing over the date. Feels just like print without the paper!

CSS-Only Mobile Cal

The concept of this design is beyond incredible. It runs purely on CSS and lets you select a date range from a mobile calendar UI, then select whatever you want to schedule in for that date (appointments, vacations, etc).

But since this follows the idea of a mobile app UI it’s probably not the most persuasive case for CSS.

Either way, the implementation is superb, and I’m still amazed this works using just HTML and CSS.

Calendar Widget

For this calendar widget you can actually save certain events on the calendar just by picking a date. Again it runs without JavaScript so I’m really impressed with the quality.

Developer Ciprian Ionescu uses small dots to indicate whenever something is saved on a certain date.

You can just click the calendar date to open up a small text field, enter your to-do item, then click to close.

A very simple widget that could prove useful on some sites.

Fullscreen Flat Calendar

Here’s a design that’s much less interactive but also quite dynamic. With this fullscreen calendar you can tell that the developer Ricky Eckhardt put some effort into the project.

It does work in pure CSS but to keep the height perfectly aligned with the container, Ricky has used some necessary JavaScript. You could bypass this if you don’t need the height to fit 100% perfectly and you could instead set default paddings for the calendar elements.

Still a pretty cool effect and it even reminds me of the classic Google Calendar UI.

Square Blocks

This custom calendar is actually based on an older shot posted to Dribbble back in 2009.

It’s a clear square interface where elements are delineated by borders and custom backgrounds. Probably not the strongest use of a custom calendar but certainly a brilliant starting point for designers.

And this one is 100% pure CSS so you can get it going on any site without scripting.

Flip Animation

You don’t see custom 3D animations on calendars too often. But this one’s pretty unique because the design relies on pure CSS, yet the flip animation runs as a custom jQuery method.

If you click any of the days in the calendar it’ll perform a 3D flipping effect to rotate over to the back side. From there you can enter data for planning events or scheduling.

Realistic Planner

Classic skeuomorphism may have gone away but there’s plenty of room for merging minimalist designs with skeuomorphic ideas.

That’s kinda what you get in this neat planner calendar that looks like a traditional flip-top print calendar. All the months are fully dynamic and powered by JavaScript so you can move forward using the arrows on either side of the header.

Note the days aren’t clickable and that this calendar isn’t super interactive. But as a general base to start designing, I’m a fan of this concept.

Semantic UI Calendar

You can build a lot of cool stuff with the Semantic UI framework. No doubt this calendar is one such example.

Most of the interface elements are just for show but the calendar sorting features work just as you’d expect. And since this runs solely on Semantic UI the entire design is powered by that default stylesheet.

Who knew that such a powerful design could come from such a small frontend library?

Angular.js Calendar

On the flip side we have Angular.js which is one of the largest frontend frameworks. This goes beyond simple interface styles to create a structure for developers to create dynamic webapps.

And this custom calendar UI named FlexCalendar is a really cool example running on Angular. It doesn’t let you add custom content or store anything in a local JSON database or anything crazy.

But it works like an interactive calendar should, and it’s powered solely by the Angular.js library.

It’s great to see web designers dive into JavaScript and this calendar demo is one prime reason to learn.

Dark UI Alternative

Most of these calendars follow the typical white background style we’re familiar with. But what about a dark calendar UI?

Where there’s a will there’s a way and developer Kenny Sing found a way to craft this rich calendar interface from scratch.

It runs on pure CSS code has some pretty neat hover effects too. Plus the whole thing fits into a fullscreen design so it’s probably one of the more versatile calendars you’ll find.

Now, I can’t say any of these demos would be useful for a datepicker U, but they offer some great starting points for designing your own CSS-powered calendar.

Take a peek over this gallery of 10 incredible examples of custom logo animations for unknown entities and world-famous brands alike.

1. Flowers SVG

One of the hottest animation trends on the web is SVG animation. It’s a growing topic of interest and this flower logo animation is a great example of SVG in action.

The icon & text of the logo has been created inside an <svg> tag in the HTML markup. Then sequential animations are controlled through CSS and automated on pageload. This requires a number of SVG-specific CSS properties like stroke-dashoffset which pushes outline motions in sequence to create this brilliant animated effect.

2. Carbon LDP

The Carbon LDP logo is fairly detailed and complex. But developer David McFeders took this to another level with his animated Carbon logo built on CSS/Compass.

Every piece of this code is easy to customize from the logo size to the animation speed. It’s built in pure CSS and made to loop endlessly. And even though the letters are made of a single PNG image you can always reverse-engineer that design with your own custom fonts.

3. Binary Lab

Binary Lab’s animated logo is one of the more complex animation effects in this list. It pulls numbers from a flask and fades them in & out of view above the logo.

The animation itself is controlled through CSS. But this pen also relies on the TweenMax library for adding repeating digits and custom alpha transitions. All-in-all a very creative use of CSS and JavaScript for modern web animation.

4. Pure CSS3 Stack Overflow

The Stack Overflow logo is one of my favorites because it’s simple, yet recognizable. And this snippet animates the Stack logo icon using nothing but pure CSS3.

This is by far one of the most impressive pure CSS animations I’ve seen. The final output really does look like the official logo and the animation feels smooth in every major browser. Anyone who loves pure CSS/SCSS animation will adore this snippet.

5. Monster Energy Logos

Tim Pietrusky animated this series of Monster Energy logos using SVGs and well-spaced CSS transitions. His code is free to study and replicate on your own if you want a similar fading effect on logos.

All of the animation timing is controlled directly through Sass which makes this a pure CSS animation. But you can alter variables to change the speed, fade colors, or pretty much anything else.

6. Subvisual

The team at Subvisual has a highly unique logo which was animated by Miguel Palhas. It works on two factors: the logo text and the “S” icon.

Everything is built on SVG elements which makes manipulation a bit easier. This pen also relies on the TweenLite library for JavaScript, although the vast majority of the animation is done via CSS. It’s a neat effect that can be repeated or triggered based on user action (hover, click, etc).

7. Pixel Logo Animation

Using the free pixel font Jura allows any developer to create a custom pixel-by-pixel animation effect. And that’s exactly what CodePen user Khaosmuhaha did in this pen.

It uses plain text manipulated through an HTML canvas element. The animations are powered by CSS3 animation properties, but they’re controlled through jQuery which makes the sequential pixel animation possible.

Definitely a cool effect and a fun use of the canvas element combined with a webfont.

8. Alex Aloia Logo

If you’re looking for a real complex logo animation then check out this example created by developer Alex Aloia. Using his name as the brand he created a complex series of SVG shapes which animate using a “drawing” effect.

The entire effect isn’t possible with only CSS. It requires a number of JS transformation libraries like DrawSVG and the more popular D3.js. But it’s a fun way to use open source libraries to create this one-of-a-kind animation.

9. Bayleys

The Bayleys logo is an obscure choice for animation. But it does have strong solid edges which makes re-creating the logo easy as pie.

That’s where Rafael Contreras comes in with his animation snippet using just 38 lines of code. The logo itself is built using SVG tags and the animation manipulates these tags accordingly. Many logo elements move in different directions making this effect mesmerizing to watch.

10. Nintendo Switch

The newest gaming console from the minds of Nintendo comes with a brilliant logo animation. This can be seen in all of their commercials and in this pen created by Koto Furumiya.

Koto re-built the Nintendo Switch logo using SVGs while animating the entire thing with CSS. And would you believe this animation only requires ~50 lines of CSS?

One thing I have to praise about this logo animation is the authenticity. It genuinely matches with Nintendo’s animation from the forceful push down and the rebound/bounce back up.

Wrapping Up

All of these examples are free and open source to study, clone, and manipulate for your own projects. I hope you like these demos and if you’re looking for more examples of CSS animation, take a look at this collection to see what other people have made.