jQuery Calendar


A simple lightweight (2.1KB) jQuery plug-in to generate calendars with 8 responsive colour schemes to choose from (or use your own style sheet).

You can pass events using optional parameters.


Please make sure you have added the the plug-in script include in your page, as well as a copy of jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/calendar.min.js"></script>

Monday Starting Day - The default behaviour of the calendar is to start each week on SUNDAY. Using a separate JS file for different starting days allows me to keep the file size as small as possible. If you prefer the calendar to use Monday as the starting day, use the included js/calendar-starting-monday.min.js instead.

For example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/calendar-starting-monday.min.js"></script>

You should probably also make sure you include the calendar.css stylesheet, unless you are creating your own stylesheet.

<link rel="stylesheet" type="text/css" href="css/calendar.css">

It's really simple to implement a calendar by adding the HTML element to your page and passing the date parameter in a HTML5 data attribute:

<div id="calendar" data-date="2017-01-01"></div>

Then define your calendar in your script tag.


Optionally, you can pass the date parameter to the function instead of the HTML5 data attribute:

<div id="calendar"></div>

Then define your calendar in your script tag.

$('#calendar').calendar({date: '2017-01-01'});

You can add the optional parameters by passing a JavaScript object. For example, to generate an 'orange' theme calendar, use the color parameter.

$('#calendar').calendar({color: 'orange'});

/* the default color scheme is Turquoise */
$('#calendar').calendar({color: 'yellow'});
$('#calendar').calendar({color: 'pink'});
$('#calendar').calendar({color: 'purple'});
$('#calendar').calendar({color: 'blue'});
$('#calendar').calendar({color: 'green'});
$('#calendar').calendar({color: 'grey'});

Parameter options:

  • 'date' - The date of the calendar to be instantiated.
  • 'color' - One of the available color schemes: yellow, pink, green, orange, purple, blue, turquoise (default) or none.
  • 'months' - Override the Month names i.e January, February, March, April, May, June, July, August, September, October, November, December.
  • 'days' - Override the day names i.e Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday.
  • 'daysMin' - Override the day abbreviation i.e. SUN, MON, TUE, WED, THU, FRI, SAT.
  • 'dayLetter' - Override the day letter abbreviation i.e. S, M, T, W, T, F, S.
  • 'events' - The formatted array of events.

The passed event array must be in the following format:

var events = [
{start: '2017/04/01', end: '2017/04/07', summary: "Example Event", mask: true},
{start: '2017/04/14', end: '2017/04/20', summary: "Example Event #2", mask: true},
{start: '2017/05/05', end: '2017/05/15', summary: "Example Event #3", mask: true}

Each event must have a start date, end date, summary string and a mask boolean. The mask boolean should be true if you want to 'mask' or block off event dates, or false.

Please make sure you include the calendar.css style sheet in the head of your page, unless you choose to use your own style declarations.



jQuery 1.11.1+


Copyright (c) Benjamin Hall, ben@conobe.co.uk - https://conobe.co.uk

Licensed under the MIT license


If you find this project helpful or useful in any way, please consider getting me a cup of coffee - It's really appreciated :)


More Projects?
View Code Showcase
Benjamin, is brilliant at what he does, he really knows what he is at. Gives real useful advice and guidance. He is fast and timely provides updates and always provides solutions and listens well. Trust me Benjamin is a breath of fresh air.
- Alexander T.
Ben had a great idea for my project and completed the project to our requirements very quickly. He also helped me tweak a few issues and answered my questions quickly. We'll work with Ben again!
- Gordon S.
I was impressed: a freelancer who could give me inputs and details on how he'd implement the solution, kept me updated in the meanwhile, understood my requirements and proposed pretty nice tweaks to make things even better. Ben, you are amazing. I will need no more time to find any other dev's, and will surely deal with you again if I need something related to these things in the future. Full stop.
- Marco F.
Absolutely superb, a great work ethic, outstanding knowledge and a great eye for detail. I thoroughly recommend him!
- Gary J.
Benjamin is a talented developer who can tackle technically challenging projects with great service and communication. Thoroughly recommended.
- Steven M.
Ben truly went above and beyond. He's fantastic at communication, coding, getting round problems, fixing issues, WordPress, custom plugins and much more. I will be using Ben again for other projects.
- Rachael R.
Ben went the extra mile and not only resolved the problem but provided a more suitable solution for the long term. Cheers!
- William R.
Ben is an amazing developer. He took the project and delivered it on time and within budget, whilst maintaining excellent communication. He also worked beyond what was asked to make sure the project was functioning correctly. Would highly recommend A++++!
- David B.
Fantastic work on our JS script. Ben worked beyond the goals of the project and overcame extra issues that were not defined in the project. He is very quick to respond and patent when waiting for our response. One of our top 5 Developers, We had to deal with many Interfaces including server firewalls/Java-scripting/JSON/PHP/PHP APIs/Remote Databases and automation.
- Kevin J.
Ben is just great to work with. Efficient, clearly communicating, understanding very quickly, and also giving great advice. I will continue working with Ben on any other WordPress stuff. Sorry for all those other PPH'ers :-)
- Bruno V.
Absolutely amazing experience. Ben is an expert in this field, I was amazed at how quickly he jumped on our platform and decoded the code, db etc. He will go over and above to find solutions for clients. Highly recommended.
- Harrus A.
Interested in working together to make something great? Hire CONOBE