Useful jQuery and CSS3 Calendar

Home Calendar & Date & Time pickerUseful jQuery and CSS3 Calendar

Useful jQuery and CSS3 Calendar

12 years ago Views

28776

8189

designmodo

In this demo 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>

Tag: date picker