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 made by Vladimir Kudinov. 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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery-ui-datepicker.min.js"></script>
<script>
	$('#calendar').datepicker({
		inline: true,
		firstDay: 1,
		showOtherMonths: true,
		dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
	});
</script>

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

Step 2 – Container

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

.ui-datepicker,
.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-prev,
.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; }

Conclusion

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.

Preview

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

Futurico PRO

Valeriu is a Web Designer & Front-End Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on @vtimbuc, Google+ or visit his web site at vtimbuc.net.

Newsletter

12 Comments
  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?

    Reply
    +2
    • 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.

      Reply
      +3
  2. Ahmad Mestarihi Apr 5, 12:30 am

    Thank you for this very good tutorial :)

    Reply
    +1
  3. Spartan Apr 18, 12:30 pm

    hey how can i get the date on clicking on this calender????????

    Reply
    0
  4. 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

    Reply
    +1
  5. Pauli Jul 22, 9:22 am

    You have do nothing! It is jqueryui datepinker !!!

    Reply
    +2
  6. Alok Nath Agarwal Oct 9, 2:18 pm

    Good Day !!

    My friend shared it with me. I want to add this onto my site – kushalastrology.com. 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..

    Reply
    0
  7. dinesh kumar Apr 18, 2:22 pm

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

    Reply
    0
  8. 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?

    Reply
    0
  9. 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???

    Reply
    +1
  10. Mike Oct 8, 3:38 pm

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

    Reply
    -1
  11. 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!

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters