It’s A Calendar Sort Of Thing

It’s A Calendar Sort Of Thing Tutorial/codes – Demo Author: Jack Thomson Created: JULY 16, 2018 Made with: HTML, CSS and JavaScript Find the Demo See the Pen It’s A Calendar Sort Of Thing by Jack Thomson (@Jackthomsonn) on CodePen.

Read More »

Simple vanilla js calendar

simple dynamic, js calendar. main function accepts 3 params: target selector String date String (optional) data Array (optional) Tutorial/codes – Demo Author: Brett Rogerson Created: APRIL 08, 2017 Made with: HTML, CSS and JavaScript Find the Demo See the Pen Simple vanilla js calendar by Brett Rogerson (@snypelife) on CodePen.

Read More »

Flexbox responsive calendar

Flexbox responsive calendar Tutorial/codes – Demo Author: Gabi Created: Updated JUNE 17, 2018 Made with: HTML, CSS and JavaScript Find the Demo See the Pen Flexbox responsive calendar by Gabi (@enxaneta) on CodePen.

Read More »

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. Tutorial/codes – Demo Author: Tom Created: MAY 15, 2017 Made with: HTML, CSS Find the Demo See the Pen Windows Fluent Design Calendar by Tom (@tomcwatts) …

Read More »

React date range picker

Date picker in React, you can select a range of dates. Tutorial/codes – Demo Author: Rob Vermeer Created: AUGUST 29, 2016 Made with: HTML, CSS and JavaScript Find the Demo See the Pen React date range picker by Rob Vermeer (@RobVermeer) on CodePen.

Read More »

Calendar Mockup

Very quick mockup of calendar. Tutorial/codes – Demo Author: Dan Couper Created: JULY 05, 2018 Made with: HTML, CSS Find the Demo See the Pen Calendar Mockup by Dan Couper (@DanielCouper) on CodePen.

Read More »

Material Calendar

Another Dribbble shot recreation of the calendar. Tutorial/codes – Demo Author: Short Created: OCTOBER 06, 2016 Made with: HTML, CSS and JavaScript Find the Demo See the Pen Material Calendar (click the days!) by Short (@short) on CodePen.

Read More »

Responsive Google Calendar Embed

This demo shows how to embed a Google Calendar so that it is responsive. The basic technique is to wrap the iframe embed code you get from Google with a div. We give that div the class name googleCalendar. Then we set the Google Map iFrame inside of that to …

Read More »

Semantic HTML/CSS calendar-style date display

Markup uses HTML5 element. CSS makes the date look like a calendar page. The position: absolute implementation works on all browsers. The inline-flex implementation requires a fairly recent browser: Ok in IE11, Chrome 29, Firefox 22; Broken in IE10, Chrome 28, Firefox 21, Safari 6.1, and most mobile browsers. Tutorial/codes …

Read More »