Responsive calendar

by w3widgets


Mon
Tue
Wed
Thu
Fri
Sat
Sun

Features

Fully responsive

CSS markup for this calendar widget takes care of handling display on all possible devices

On the fly events edit

With responsive calendar you have total freedom in adding, editing and removing events

Twitter bootstrap integration

You can use responsive calendar independently but it shows full potencial when coupled with bootstrap

Animated month change

Months changes are animated, you can turn this off if needed

HTML5 and CSS3 supported

We are putting all the effort to support newest standards while keeping backwards compatibility

Under constant development

Responsive calendar in under constant development so you can return from time to time for new features

Pricing

By downloading the software you are accepting the license.

Free

Non commercial use

If you want to use the software on a webpage that's not related to any business (online store, service provider etc.) you can do it without charge.

10$

Commercial

Single application

Your use of the item is restricted to a single installation

50$

Commercial

Multiple applications

Your use of the item may extend to multiple installations

500$

Commercial

Extended

You may license, sublicense, redistribute, or resell the item in some circumstances.

Description

My responsive jQuery calendar is a small website widget. It displays month view with highlighted days in which some evens occur. It provides minimal required functionality while maintaining maximum flexibility and extendibility.

jQuery and twitter bootstrap plugin

The calendar plugin was heavily inspired by twitter bootstrap markup and it plays with it perfectly. It, of course, uses jQuery as a core library.

Non generated, minimalistic markup

Unlike many plugins out there, Responsive Calendar doesn't generate more markup then it actually needs to. This kind of approach provides you with nice, minimalistic HTML markup.

With Responsive Calendar you, as developer, have direct access to calendar controls. You can add classes, remove or reassign elements. It allows you to freely style you calendar widget.

Styling

Responsive Calendar is extremely easy to style, partly because of nicely written markup but mostly because in most circumstances you want to style different kinds of days differently. For example, you need Saturdays and Sundays to be grayed out as "non-working days", it's not a problem, just use `.day.sat, .day.sun` selectors to target this specific days of the week.

Classes in use:
  • mon, tue, wed, thu, fri, sat, sun - for each day of the week
  • past, today, future - for indicating if day is in the past, future or neither
  • non-current - indicating the day is not from current month
  • active - default class for day that have some events

You can also define your own classes for active days to indicate, for example, custom non-working day during the week.

Easy to extend functionality

Although main purpose of the plugin is to display info calendar, it's functionality can be easily extended. You can use built in callbacks to add behavior to, let's say, active day click or month change. Access to events object is provided so you can display events attached to the particular day.

Events manipulation

The plugin give developers full control over events that are used by the calendar script. You can add, remove, edit individual days or group of days on the fly using methods that are exposed to you. Any action will have instant effect, no reloading necessary.

Installation

You gonna need to put some stuff to your <head> tag:

<script src="js/jquery.js"></script>
<script src="js/responsive-calendar.js"></script>

<link href="css/responsive-calendar.css" rel="stylesheet" media="screen">

Responsive Calendar requires jQuery (v1.9.1+). You will get all necessary files in the Responsive Calendar archive that you can download from this page.

Build your calendar markup:

<!-- Responsive calendar - START -->
<div class="responsive-calendar">
  <div class="controls">
      <a class="pull-left" data-go="prev"><div class="btn"><i class="icon-chevron-left"></i></div></a>
      <h4><span data-head-year></span> <span data-head-month></span></h4>
      <a class="pull-right" data-go="next"><div class="btn"><i class="icon-chevron-right"></i></div></a>
  </div><hr/>
  <div class="day-headers">
    <div class="day header">Mon</div>
    <div class="day header">Tue</div>
    <div class="day header">Wed</div>
    <div class="day header">Thu</div>
    <div class="day header">Fri</div>
    <div class="day header">Sat</div>
    <div class="day header">Sun</div>
  </div>
  <div class="days" data-group="days">
    <!-- the place where days will be generated -->
  </div>
</div>
<!-- Responsive calendar - END -->

The calendar have entire markup exposed to you so you can easily edit it by for example adding your own classes. Note that you don't need any of the classes that you can see in the example however [data-group] properties are obligatory. You can initialize the plugin and set options directly from markup using data interface. For example, you can set captions animation properties by setting data-animate, data-delay or data-length. By data-jump attribute you can set prev/next buttons and by using data-jump-to pages indicators can by easily setup. In this example we initialized the plugin by using data-spy="responsive-calendar".

You can also initialize the plugin using JavaScript. This way you can also setup callback functions.

<script>
$( document ).ready( function() {
  $('.responsive-calendar').responsiveCalendar();
});
</script>

Options

There are some options that can be setup both thru data interface and javascript on plugin initialization.

Javascript

You can specify options thru javascript on plugin init.

Notice All options are optional and are not required to run the widget!

<script>
$( document ).ready( function() {
  $(".responsive-calendar").responsiveCalendar({
    time: '2013-05',
    events: {
      "2013-04-30": {"number": 5, "badgeClass": "badge-warning", "url": "http://w3widgets.com/responsive-calendar"},
      "2013-04-26": {"number": 1, "badgeClass": "badge-warning", "url": "http://w3widgets.com"}, 
      "2013-05-03": {"number": 1, "badgeClass": "badge-error"}, 
      "2013-06-12": {}}
  });
});
</script>

Options overview:

Option Default Description
translateMonths /array/ English month names Option allows month names translation
events /object/ {} Initial list of events
Example:
events: {
    "2013-04-30": {"number": 5, "badgeClass": "badge-warning", "url": "http://w3widgets.com/responsive-calendar"},
    "2013-04-26": {"number": 1, "badgeClass": "badge-warning", "url": "http://w3widgets.com"}, 
    "2013-05-03": {"number": 1, "badgeClass": "badge-error"}, 
    "2013-06-12": {"class": "active special"}
    "2013-06-23": {}
  }
Key to each event is date string with format YYYY-MM-DD with leading zeros. Each event can implement four options:
  • number - Number of events in a given day (displayed as a badge when badgeClass is set)
  • badgeClass - Badge class from twitter bootstrap or self defined
  • url - Makes day a hiperlink
  • class - Defines custom classes for a day
Plus you can extend events object with any additional information you need. Example:
events: {
    "2013-04-30": {
      "number": 2, 
      "badgeClass": 
      "badge-warning", 
      "url": "http://w3widgets.com/responsive-calendar",
      "dayEvents": [
        {
          "name": "Important meeting",
          "hour": "17:30" 
        },
        {
          "name": "Morning meeting at coffee house",
          "hour": "08:15" 
        }
      ]
    },
    . . .
  }
"dayEvents" was added. You can use this additional information to display days schedule on hover above active day.
time /string/ undefined Initial month (example: "2013-04")
allRows /bool/ true Most months require 5 rows of days, this option, when set to true will always display all 6 rows even if current month will not use all of them.
startFromSunday /bool/ false Sets the calendar to start week from Sunday.
activateNonCurrentMonths /bool/ false For each month some days may be displayed from previous or next month. If set to true, this option will activate this non-current days when they have events.
monthChangeAnimation /bool/ true Using this switch you can desactivate month change animation.

Data API

All of the options (except events) listed above can be passed using data API:
<!-- Responsive calendar - START -->
<div class="responsive-calendar" data-time="2013-04" data-start-from-sunday="true"  data-translate-months="Styczeń,Luty,Marzec,Kwiecień,Maj,Czerwiec,Lipiec,Sierpień,Wrzesień,Październik,Listopad,Grudzień">
  . . .
</div>
<!-- Responsive calendar - END -->
Other options:
Option Value Element Description
go /string/ prev|next prev-next control defines previous nad next buttons

Methods

Responsive Calendar exposes 3 methods: prev, next and jump:

Name Example Description
prev
$('#calendar').responsiveCalendar('prev')
Changes month to previous one
next
$('#calendar').responsiveCalendar('prev')
Changes month to next one
curr
$('#calendar').responsiveCalendar('curr')
Changes month to current
edit
$('#calendar').responsiveCalendar('edit', {
    "2013-04-30": {"number": 5, "badgeClass": "badge-warning", "url": "http://w3widgets.com/responsive-calendar"},
    "2013-04-26": {"number": 1, "badgeClass": "badge-warning", "url": "http://w3widgets.com"}, 
    "2013-05-03": {"number": 1, "badgeClass": "badge-error"}, 
    "2013-06-12": {}
  })
Allows to edit days events
clear
$('#calendar').responsiveCalendar('clear', ['2013-04-30', '2013-04-26'])
Clear events from choosen days
clearAll
$('#calendar').responsiveCalendar('clearAll')
Clear all events from all days
"Set year and month"
$('#calendar').responsiveCalendar('2014-02')
Sets the month and the year.

Callbacks

There are 3 callback functions avaliable in Responsive Calendar:

Name Description
onInit() Runs on calendar initialization. Use `this` here to access responsiveCalendar object including events object.
onDayClick(events) Runs when day was clicked
onDayHover(events) Runs when day was hovered on
onActiveDayClick(events) Runs when active day was clicked
onActiveDayHover(events) Runs when active day was hovered on
onMonthChange() Rusn when month changes. Use `this` here to access responsiveCalendar object including events object.

Callbacks can be set on calendar javascript init:

<script>
$( document ).ready( function() {
  $('.responsive-calendar').responsiveCalendar({
    onDayClick: function(events) { alert('Day was clicked') }
  });
});
</script>

Days related callbacks

For every callback related to day the events object is provided. It's the same one that was used for calendar init and consists of any changes that was made after script initialization. You can use it to access info about particular day events using data attributes attached to day node:

<script>
$( document ).ready( function() {
  function addLeadingZero(num) {
    if (num < 10) {
      return "0" + num;
    } else {
      return "" + num;
    }
  }

  $('.responsive-calendar').responsiveCalendar({
    onActiveDayClick: function(events) {
      var thisDayEvent, key;

      key = $(this).data('year')+'-'+addLeadingZero( $(this).data('month') )+'-'+addLeadingZero( $(this).data('day') );
      thisDayEvent = events[key];
      alert(thisDayEvent.number);
    }
  });
});
</script>

Changelog

Report an issue

v0.8

18.11.2014
  • Added curr method reseting the calendar to current month and year.

v0.7

18.02.2014
  • Year and month info (in the header of the calendar) are now separated allowing more formatting options.

v0.6.1

06.02.2014
  • Removed .container margin-top from example
  • Removed some embarrassing documentation copy/paste errors, sorry for that BTW

v0.6

23.01.2014
  • Fixed bug that caused `Next` button not to work on IE.
  • Fixed bug that caused `onMonthChange` callback work only when next/prev buttons clicked.
  • Fixed bug that caused year to display incorrectly when date is not pre-set on init.

v0.5

17.01.2014
  • Bootstrap 3 compatibility fixes
  • Fixed bug that caused callbacks not to work when month change animation was turned off
  • badge doesn’t need class to be displayed

v0.3

09.10.2013
  • Added additional callback functions
  • All days related callbacks are now provided with events object

v0.2.1

09.08.2013
  • Fixed bug that caused ocDayClick callback not to work

v0.2

07.08.2013
  • Added option class to event object
  • Fixed bug that caused 'edit' method to add events to 'non-current' days when activateNonCurrentMonths set to false

v0.1

17.08.2013
  • Responsive calendar release