Clocks and Calendars

Tear off calendar made with Vanilla Javascript.

Full calendar based Interactive reservation system

Calendar generates itself upon user's entry of requested year and month. Scales to viewport using vw / vh --[ table is generated w/JS ]

CSS grid calendar

It's A Calendar Sort Of Thing

simple dynamic, js calendar. main function accepts 3 params: target selector String date String (optional) data Array (optional)

Flexbox responsive 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.

Date picker in React, you can select a range of dates.

Very quick mockup of calendar.

Another Dribbble shot recreation of the calendar.

Calendar widget built with React and Flexbox

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 cover the width and height of the googleCalendar div. You can change the width and height of the googleCalendar div and the calendar till change along with it.

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.

Calendar with dynamic data.

A responsive calendar component written with the awesome VueJS. Should meet accessibility requirements and very easily adapt to different screen sizes. Can easily be adapted to pull event data from an external source.

Calendar using ReactJs (beginner level)

Daily CSS Images Day 09 Calendar

Another Dribbble rework of an original shot by Sergey Valiukh. Chrome and Safari only, for now.