How to Create Calendar using jQuery and CSS3


How to create Calendar using jQuery and CSS3 [Tutorial]

Topic: jQuery & CSS3
Difficulty: Intermediate
Estimated Completion Time: 30 mins

In this tutorial we will code the jQuery and CSS3 Calendar that you can find in Futurico UI Pro. To do it we will use CSS for all the styling and for “functionality” we will use jQuery and jQuery UI. From jQuery UI we will only use the “Datepicker” script. So you don’t have to download all the components available in jQuery UI and the file size will be lower.

Step 1 – HTML Markup

To create the calendar we only need to add a div tag with an id.

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

Then before the body closing tag we need to add the jQuery and the jQuery UI script.

We also need to call the “datepicker”, so you need to use the same id that you’ve used on the div. We will also add some options: the inline will make the calendar visible, so we don’t need to click on a button or input; to make “Monday” the first day on the calendar we need to set it to 1; “show other months” will add the others months days in order to fill all the table. For more info about all the options available read the documentation.

<script src=""></script>
<script src="js/jquery-ui-datepicker.min.js"></script>
		inline: true,
		firstDay: 1,
		showOtherMonths: true,
		dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

Step 2 – Container

Let’s start by removing all the margins, paddings, borders, etc.

.ui-datepicker table,
.ui-datepicker tr,
.ui-datepicker td,
.ui-datepicker th {
	margin: 0;
	padding: 0;
	border: none;
	border-spacing: 0;

Then we will style the calendar container. Let’s add a background color, rounded corners and shadows. We will also change the text font to “Tahoma” and the text size.

.ui-datepicker {
	display: none;
	width: 294px;
	padding: 35px;
	cursor: default;

	text-transform: uppercase;
	font-family: Tahoma;
	font-size: 12px;

	background: #141517;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
	-moz-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
	box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);

Step 3 – Header

To style the header of the calendar (month and year) we will change the text colors, add a border bottom and some more basic styles.

.ui-datepicker-header {
	position: relative;
	padding-bottom: 10px;
	border-bottom: 1px solid #d6d6d6;

.ui-datepicker-title { text-align: center; }

.ui-datepicker-month {
	position: relative;
	padding-right: 15px;
	color: #565656;

.ui-datepicker-year {
	padding-left: 8px;
	color: #a8a8a8;

To add the green circle we will use the :before pseudo selector. This will allow us to insert content before the “month” element and then we will style and position it.

.ui-datepicker-month:before {
	display: block;
	position: absolute;
	top: 5px;
	right: 0;
	width: 5px;
	height: 5px;
	content: '';

	background: #a5cd4e;
	background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
	background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
	background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
	background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
	background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

Step 4 – Prev & Next Month

We will use a background image to style the next and previous arrows and then we will position the previous on the left and the next on the right.

.ui-datepicker-next {
	position: absolute;
	top: -2px;
	padding: 5px;
	cursor: pointer;

.ui-datepicker-prev {
	left: 0;
	padding-left: 0;

.ui-datepicker-next {
	right: 0;
	padding-right: 0;

.ui-datepicker-prev span,
.ui-datepicker-next span{
	display: block;
	width: 5px;
	height: 10px;
	text-indent: -9999px;

	background-image: url(../img/arrows.png);

.ui-datepicker-prev span { background-position: 0px 0px; }

.ui-datepicker-next span { background-position: -5px 0px; }

.ui-datepicker-prev-hover span { background-position: 0px -10px; }

.ui-datepicker-next-hover span { background-position: -5px -10px; }

Step 5 – Calendar Styles

To style the days of the week we will add a top and bottom padding and change the color.

.ui-datepicker-calendar th {
	padding-top: 15px;
	padding-bottom: 10px;

	text-align: center;
	font-weight: normal;
	color: #a8a8a8;

Then we will style the “days grid” by adding some paddings, changing the colors and we will add a transparent border to each number. This is needed because we will add a border to the active number so to avoid it to jump when we click on a number we need to add this transparent border.

.ui-datepicker-calendar td {
	padding: 0 7px;

	text-align: center;
	line-height: 26px;

.ui-datepicker-calendar .ui-state-default {
	display: block;
	width: 26px;
	outline: none;

	text-decoration: none;
	color: #a8a8a8;

	border: 1px solid transparent;

For the active state we will change the text and border color to green. For the “other months days” we will change the color to a darker one.

.ui-datepicker-calendar .ui-state-active {
	color: #6a9113;
	border: 1px solid #6a9113;

.ui-datepicker-other-month .ui-state-default { color: #565656; }


We finished our calendar. If you have any question let me know in the comments. Also don’t forget to leave some feedback and share it with your friends. Follow us if you want to be the first to know about the latest tutorials and articles.


Download Calendar


  1. Piero Recchia Apr 4, 7:28 pm

    Great tutorial thanks a lot, is posible add click event on a day to show something or go to url?

    • Valeriu Apr 4, 7:34 pm

      Thanks Piero! As this calendar is based on jQuery UI Datepicker I think you can add this click events. Just try to google “jquery datepicker events” I’m sure you will find some help.

  2. Luch Jun 27, 6:38 pm

    thanks for the tutorial, btw, u forgot to link us the js, and the arrow images (wich i spend a lot of times cursing and asking why they f*** wouldn’t show), i found that in the css there was this line >> background-image: url(../img/arrows.png);

    thanks anyways! :), it looks really good

  3. Alok Nath Agarwal Oct 9, 2:18 pm

    Good Day !!

    My friend shared it with me. I want to add this onto my site – I was searching since long. This may fulfil my requirement. am a quite fresher in .php. hope so, it will work. Also need a hover date picker.

    Even Thanks a lot..

  4. dinesh kumar Apr 18, 2:22 pm

    tanks for this tutorial but i have a problem how can i implement with wordpress and CI

  5. TwoStarII Jul 13, 11:31 pm

    Firstly Thanks For The Code.

    How do we add events to the calendar?
    How do we make an event pop up box when mouse hovers over marked event?

  6. Amin Jul 23, 1:08 am

    Hi) It’s so very cool calendar) but i don’t know that how i can get selected day in calendar!!! can you help me, please???

  7. Mike Oct 8, 3:38 pm

    The src file is jquery.ui.datepicker.min.js not

  8. Maxine Aug 11, 9:59 am

    Hi, Great styling! Clean and Simple!.

    Do you know if jquery can change the background of each date? example if

    August 10 background is green
    August 11 background is yellow

    something like that.

    Thank you!

  9. Mirte Nov 5, 12:05 pm

    thanks for this tutorial. It worked perfectly for me in combination with datepicker and impromptu just a couple of days ago, but now it doesnt show up anymore and i dont have a clue why.. maybe there’s anyone out here who can have a short look?

    MY HTML document looks similar to this:




    inline: true,
    firstDay: 1,
    showOtherMonths: true,
    dayNamesMin: [‘Zo’, ‘Ma’, ‘Di’, ‘Wo’, ‘Do’, ‘Vr’, ‘Za’]

    var events = [
    { Title: “Signeersessie Boekenbeurs 14:00u – 16:00u Antwerpen Expo Zaal 2 – Standnummer 202 Jan van Rijswijcklaan 191, 2020 Antwerpen”, Date: new Date(“10/31/2015”)},
    { Title: “Signeersessie Boekenbeurs 14:00u – 16:00u Antwerpen Expo Zaal 2 – Standnummer 202 Jan van Rijswijcklaan 191, 2020 Antwerpen”, Date: new Date(“11/1/2015”) }

    beforeShowDay: function(date) {
    var result = [true, ”, null];
    var matching = $.grep(events, function(event) {
    return event.Date.valueOf() === date.valueOf();

    if (matching.length) {
    result = [true, ‘highlight’, null];
    return result;
    onSelect: function(dateText) {
    var date,
    selectedDate = new Date(dateText),
    i = 0,
    event = null;

    while (i < events.length && !event) {
    date = events[i].Date;

    if (selectedDate.valueOf() === date.valueOf()) {
    event = events[i];
    if (event) {

    Thanks in Advance!

    • Mirte Nov 5, 12:08 pm

      Looks like the first part is missing..

      There i called the different stylesheets and calendar div


  10. krystyna Sep 19, 10:15 am

    This is a really nice example.

    How could I include a background-color to the default day? It currently only has the selection made with a border.


  11. Kain Feb 14, 3:05 pm

    If you want a hover effect for the dates when you’re mousing over them, use the following in your CSS file:

    .ui-datepicker-calendar td a:hover
    color: #6a9113;

    This makes it easier to know which day your mouse is on if using it for a “Date Picker” for an input field rather than an ever constant Calendar display.

    Great write up though and a great presentation.

Leave a Reply

* Minimum length: 20 characters