WebAppers

/ best free open source web resources /

Shopify

CLNDR: A jQuery Plugin for Creating Calendars

Posted · Category: Calendar, MIT License

There are wonderful and feature-rich calendar modules out there and they all suffer the same problem: they give you markup (and often a good heap of JS) that you have to work with and style. This leads to a lot of hacking, pushing, pulling, and annoying why-can’t-it-do-what-I-want scenarios.

CLNDR is a jQuery calendar plugin. Unlike most calendar plugins, CLNDR doesn’t generate markup. Instead, CLNDR asks you to create a template and in return it supplies your template with a great set of objects that will get you up and running in a few lines.

jquery-calendar-plugin

Requirements: jQuery Framework
Demo: http://kylestetz.github.io/CLNDR/
License: MIT License

A Friendly Way of Displaying Time Updates to Users

Posted · Category: Calendar, License Free

TidyTime.js is a jQuery plugin, that provides a more friendly way of displaying time updates to users. It takes any regular time and changes it into more human friendly dialogue such as “It’s just gone noon. It’s quarter past 8 in the evening, it’s nearly half past 4 in the afternoon, it’s just gone 25 to 6″ and more.

By adding additional text before and after the time you are able to create powerful friendly interaction with users. TidyTime.js works best with dynamic websites and apps and can be used as a stand alone clock as well.

human-time

Requirements: jQuery Framework
Demo: https://github.com/aarondo/tidyTime.js
License: License Free

A JavaScript Module to Create Calendar Heatmap

Posted · Category: Calendar, MIT License, Stats

Cal-Heatmap is a javascript module to create a calendar heatmap. This module will help you to create a calendar, like the contribution calendar appearing on each github user’s page, but with navigation and more controls on the data formatting.

Cal-Heatmap works on most modern browsers supporting SVG, and was tested on Internet Explorer 9+, Firefox 4+, Chrome 14+, Safari 5.0+, Opera 10+. Calendar can be customized by setting various options as well. Cal-HeatMap is licenced under the MIT Licence.

cal-heatmap

Requirements: JavaScript enabled
Demo: http://kamisama.github.io/cal-heatmap/
License: MIT License

Create a Clock, Timer Or Countdown with FlipClock.js

Posted · Category: Calendar, MIT License

FlipClock.js was created because the other solutions weren’t abstract enough to provide a deep level of customization without rewriting the code. Some libraries have a huge cascade of conditionals, while others simply hard-code too much into their scripts.

After reviewing as many of the existing solutions as possible, it was determined a proper extendible API needed to be written to create any kind of clock or counter (and the flip effect is just cool). You can use FlipClick.js as a clock, timer or countdown.

flipclock-js

Requirements: jQuery Framework
Demo: http://flipclockjs.com/
License: MIT License

A Fully Responsive & Lightweight jQuery Dateinput Picker

Posted · Category: Calendar, Forms, MIT License

Pickadate.js is a fully responsive and lightweight jQuery dateinput picker. It looks pretty neat and simple. It is easy to use. And alos, you can have different themes for it as well.

It has been tested on IE7+, Chrome, Firefox, Safari, Opera, iOS Safari, Android browser. The pickadate.js script supports all modern browsers and IE 9+. To support IE 7+ and other old browsers, include pickadate.legacy.js instead. It is released under MIT License.

pickadate-js

Requirements: jQuery Framework
Download Link: http://amsul.github.com/pickadate.js/
License: MIT License

Create Responsive Calendar with Calendario jQuery Plugin

Posted · Category: Calendar, License Free

Codrops has shared a flexible calendar concept with us. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars.

They have created A Flexible Calendar jQuery Plugin for the calendar itself and you can see some examples of how to use it in the demos. The aim is to provide a suitable layout for both, small and big screens and keeping the calendar structure fluid when possible. On large screens we want to show a grid-based layout while on smaller screens, they made it simply stack the days of the month.

calendar-responsive

Requirements: jQuery Framework
Demo: http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar…
License: License Free

An Awesome Date Range Picker for Twitter Bootstrap

Posted · Category: Calendar

Date Range Picker for Twitter Bootstrap is a dropdown menu to choose date ranges for reports. It matches the existing dropdown and button styles of Bootstrap. The date range picker relies on jQuery, Datejs for parsing strings into dates and defining custom ranges, and the Twitter Bootstrap CSS.

For basic use cases like collecting event or reservation dates, you can attach it to a text input to pop up two clickable calendars to choose dates from. For more advanced use cases, you can attach a date range picker to any element, pre-define your own date ranges for the user to choose from, and set a custom callback function to receive the chosen dates.

boostrap-date-range-picker

Requirements: jQuery, Datejs, Twitter Bootstrap
Demo: http://www.dangrossman.info/2012/08/20/a-date-range-picker…
License: Apache License 2.0

Twitter Bootstrap Colorpicker and Datepicker

Posted · Category: Calendar, Color Schemes

Twitter Bootstrap is getting very popular recently. Stefan Petre has developed two really useful plugins for Bootstrap in order to enhance the experience. They are Colorpicker for Bootstrap and Datepicker for Bootstrap.

Colorpicker for Bootstrap can let you add color picker to text field or to any other element. It can be used as a component on Bootstrap. It supports multiple formats: hex, rgb, rgba, hsl, hsla.

Datepicker for Bootstrap can let you add datepicker picker to field or to any other element. It supports formats: dd, d, mm, m, yyyy, yy, with separators: -, /, .

bootstrap-datepicker-calendar

Requirements: Bootstrap Framework
Demo: http://www.eyecon.ro/bootstrap-colorpicker/
Demo: http://www.eyecon.ro/bootstrap-datepicker/
License: Apache 2.0 License

Highly Configurable Zebra Datepicker jQuery Plugin

Posted · Category: Calendar, LGPL License

Zebra Datepicker is a small, compact and highly configurable datepicker jQuery plugin, meant to enrich forms by adding the datepicker functionality to them. This jQuery plugin will automatically add a calendar icon to the indicated input fields which, when clicked, will open the attached datepicker.

Users can easily jump between months and years due to the datepicker’s intuitive interface. The selected date will be entered in the input field using the date format of choice, configurable in the datepicker’s options. It is distributed under the LGPL.

zebra-datepicker

Requirements: -
Demo: http://stefangabos.ro/jquery/zebra-datepicker/
License: LGPL License

Pretty and Lightweight jQuery Countdown Plugin

Posted · Category: Calendar

Countdowns can be a great way to build up anticipation when launching a new website or web application, it gives users a clear indication of how long they need to wait before they can get access to your site.

jQuery Countdown is a handy and pretty jquery countdown plugin for you. You can easily customize the format, images, width and height. And it’s only 1.7 KB. Best of all, it’s released under Apache License 2.0 which is free for download.

jquery-countdown

Requirements: jQuery Framework
Demo: http://jquery-countdown.googlecode.com/svn/trunk/index.html
License: Apache License 2.0

Page 1 of 6123456»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons