CSS markup for this calendar widget takes care of handling display on all possible devices
With responsive calendar you have total freedom in adding, editing and removing events
You can use responsive calendar independently but it shows full potencial when coupled with bootstrap
Months changes are animated, you can turn this off if needed
We are putting all the effort to support newest standards while keeping backwards compatibility
Responsive calendar in under constant development so you can return from time to time for new features
By downloading the software you are accepting the license.
Free
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$
50$
500$
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.
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.
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.
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.
You can also define your own classes for active days to indicate, for example, custom non-working day during the week.
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.
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.
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>
There are some options that can be setup both thru data interface and javascript on plugin initialization.
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:
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. |
<!-- 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 |
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. |
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>
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>