{"id":4421,"date":"2015-05-25T12:15:07","date_gmt":"2015-05-25T09:15:07","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=4421"},"modified":"2017-12-19T14:00:44","modified_gmt":"2017-12-19T12:00:44","slug":"html5-calendar-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/","title":{"rendered":"HTML5 Calendar Example"},"content":{"rendered":"

In this example, our focus will be on creating a calendar<\/strong> component with HTML5 and CSS3 and later add some interactivity using javascript.<\/p>\n

Calendars will be needed in websites whether just for information or when date input is needed. The user is always willing to see nice stuff.<\/p>\n

We can create calendars with HTML5 and style them with CSS3, but that is just static. Most likely, you will want to make it interactive.<\/p>\n

That is enabled by javascript (or its libraries) that can help you animate things and change views fast and easy. But lets start with html and css.
\n 
\n 
\n[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n

1. Prerequisites<\/h2>\n

The following setup is required for you to achieve the results being explained.<\/p>\n

1.1 Basic Setup <\/h3>\n

Go ahead and create a new html file inside your project folder with its basic syntax:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>Calendar Component<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
1.2 Get Bootstrap <\/h3>\n
Bootstrap is a innovative and easy to use CSS framework that we will use mainly for its grid based structure.<\/p>\n
In order to use it, just link the css and js files in the head<\/code> section from their official links like below:<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>Calendar Component<\/title>\r\n<!-- Latest compiled and minified CSS -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.4\/css\/bootstrap.min.css\">\r\n<!-- Latest compiled and minified JavaScript -->\r\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.4\/js\/bootstrap.min.js\"><\/script>\r\n<\/head>\r\n<\/pre>\n
2. Creating the Calendar <\/h2>\n
Below, you can see the step by step calendar creation. We will create the calendar first in html and then add the css.<\/p>\n
2.1 HTML <\/h3>\n
The html section is going to include the following basic structure:<\/p>\n
1. A wrapper<\/code> – this tag will wrap all the elements inside the calendar<\/p>\n
2. A header<\/code> – it will contain the month title and left and right navigation icons<\/p>\n
3. A calendar-body<\/code> – it will contain the weekdays row and the date rows.<\/p>\n
4. A current-date – it will be a section in the bottom of the calendar showing the actual date.<\/p>\n
We will need 1 row for the weekdays and 5 rows for date rows. The structure will look like this:<\/p>\n
\r\n
\r\n\t
\r\n\r\n\t<\/div>\r\n\t
\r\n\t\t
\r\n\t\t\t\t\t\r\n\t       <\/div>\r\n\r\n\t\t
\r\n\t\t\t\t\t\r\n\t\t<\/div>\r\n\r\n\t\t
\r\n\t\t\t\t\t\r\n\t\t<\/div>\r\n\r\n\t\t
\r\n\t\t\t\t\t\r\n\t\t<\/div>\r\n\r\n\t\t
\r\n\t\t\t\t\r\n\t\t<\/div>\t\r\n\r\n\t\t
\r\n\t\t\t\t\t\r\n\t\t<\/div>\r\n\r\n\t\t
<\/div>\r\n\r\n\t\t
<\/div>\r\n\r\n\t<\/div>\r\n<\/div>\r\n<\/pre>\n
Nothing shows in the browser yet. Now that we’ve created the rows, lets add the following components:<\/p>\n
1. Navigation Icons – there is a class on bootstrap for these icons: glyphicon glyphicon-chevron-left\/right<\/p>\n
2. Add the month that the calendar is showing in the header section wrapped inside a p<\/code> tag<\/p>\n
3. Devide the rows into 7 columns with bootstrap’s class: col-xs-1<\/code> and add weekdays inside p<\/code> tags<\/p>\n
4. Use the same col-xs-1<\/code> to dates but wrap the paragraph inside anchor tags, they need to be clicked<\/p>\n
With the code above added, our html now looks like this:<\/p>\n
\r\n<div class=\"wrapper\">\r\n<div class=\"header\">\r\n<span class=\"glyphicon glyphicon-chevron-left\"><\/span>\r\n<span class=\"glyphicon glyphicon-chevron-right\"><\/span>\r\n<p>January 2015<\/p>\r\n<\/div><!-- end header -->\r\n\t<div class=\"calendar-body\">\r\n\t\t<div class=\"row weekdays\">\r\n\t\t\t<div class=\"col-xs-1\"><p>Su<\/p><\/div><!-- end col-xs-1 -->\r\n\t\t\t<div class=\"col-xs-1\"><p>Mo<\/p><\/div><!-- end col-xs-1 -->\r\n\t\t\t<div class=\"col-xs-1\"><p>Tu<\/p><\/div><!-- end col-xs-1 -->\r\n\t\t    <div class=\"col-xs-1\"><p>We<\/p><\/div><!-- end col-xs-1 -->\r\n\t\t\t<div class=\"col-xs-1\"><p>Th<\/p><\/div><!-- end col-xs-1 -->\r\n\t\t\t<div class=\"col-xs-1\"><p>Fr<\/p><\/div><!-- end col-xs-1 -->\r\n\t\t\t<div class=\"col-xs-1\"><p>Sa<\/p><\/div><!-- end col-xs-1 -->\r\n\t\t<\/div><!-- end row -->\r\n\r\n\t\t<div class=\"row dates\">\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p class=\"inactive\">28<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p class=\"inactive\">29<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p class=\"inactive\">30<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p class=\"inactive\">31<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>1<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>2<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>3<\/p><\/a><\/div>\r\n\t\t\t<\/div><!-- end row -->\r\n\r\n\t\t<div class=\"row dates\">\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>4<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>5<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>6<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>7<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>8<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>9<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>10<\/p><\/a><\/div>\r\n\t\t<\/div><!-- end row -->\r\n\r\n\t\t<div class=\"row dates\">\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>11<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>12<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>13<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>14<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>15<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>16<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>17<\/p><\/a><\/div>\r\n\t\t<\/div><!-- end row -->\r\n\r\n\t\t<div class=\"row dates\">\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>18<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>19<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>20<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>21<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>22<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>23<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>24<\/p><\/a><\/div>\r\n\t\t<\/div><!-- end row -->\t\r\n\r\n\t\t<div class=\"row dates\">\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>25<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>26<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>27<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>28<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>29<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>30<\/p><\/a><\/div>\r\n\t\t\t<div class=\"col-xs-1\"><a href=\"#\"><p>31<\/p><\/a><\/div>\r\n\t\t<\/div><!-- end row -->\r\n\r\n\t\t<div class=\"line\"><\/div>\r\n\r\n\t\t<div class=\"current-date\">Monday, January 26<\/div>\r\n\t<\/div><!-- end calendar-body -->\r\n<\/div><!-- end wrapper -->\r\n<\/pre>\n
Well, now we’ve got a view in the browser:
\n
\"Basic<\/a>
Basic HTML Calendar<\/figcaption><\/figure>
\nDon’t worry about the right nav icon going far, we’ll fix that with css. Also notice that I have added an inactive<\/code> class to some dates.<\/p>\n
That is beacuse those dates are not from the current month and need to be styled a bit different (i.e a lighter color than the rest).<\/p>\n
 2.2 CSS <\/h3>\n
Here comes the fun part, styling is what gives elements a shape and a overall look. Lets start with these universal attributes:<\/p>\n
\r\n  body {\r\n  \tfont-family: \"Montserrat\";  \/* just a cutsom font *\/\r\n  }\r\n\r\n  a:-webkit-any-link{\t\t\r\n\ttext-decoration:none !important;\t\/* do not underline links *\/\r\n\tcolor: black; !important;\t        \/* give links a default color *\/\r\n  }\r\n<\/pre>\n
For the navicons to show right add pull-left and pull-right next the the other classes:<\/p>\n
\r\n<span class=\"glyphicon glyphicon-chevron-left pull-left\"><\/span>\r\n<span class=\"glyphicon glyphicon-chevron-right pull-right\"><\/span>\r\n<\/pre>\n
Now give the basic stucture elements some styling attributes:<\/p>\n
\r\n  .wrapper {\r\n  \tmargin: 10em;\t\t\t\t\t\/* just a temp margin *\/\r\n  \tborder: 0.1em solid #ccc;\t\/* wrap the calendar inside a box *\/\r\n  \twidth: 20em;\t\t\t\t\/* define a width for the box *\/\r\n  \theight: 24em;\t\t\t\t\/* define a height for the box *\/\r\n  \tbox-shadow: 0.1em 0.2em 0.8em #ccc;\t\/* box shadow for better view *\/\r\n\r\n  }\r\n\r\n  .header {\r\n  \theight: 4em;\t\t\t\t\t\/* define a height for the header *\/\r\n  \tbackground-color: #3f51b5;\t\t\/* give the header a background color *\/\r\n  \tcolor: white;\t\t\t\t\t\/* give the header a text color *\/\r\n  \ttext-align: center;\t\t\t\t\/* center the text inside the header *\/\r\n  }\r\n\r\n.calendar-body .col-xs-1 {\r\n  \twidth: 2.5em;\t\t\t\t\t\/* give each column a fixed width *\/\r\n  \tmargin-left: 0.2em;\t\t\t\t\/* have some space between columnd *\/\r\n  \ttext-align: center;\t\t\t\t\/* align text in the center *\/\r\n  }\r\n<\/pre>\n
The view of our calendar became:
\n
\"Styling<\/a>
Styling – Part 1<\/figcaption><\/figure>
\nOk, next add attributes to individual elemtents to enhance thier look inside the calendar:<\/p>\n
\r\n.header p {\r\n\tpadding-top: 1.2em;\t\t\t\t\/* vertical centering *\/\r\n\ttext-transform: uppercase;\t\t\/* all caps text  *\/\r\n  }\r\n\r\n.header span {\r\n  \tpadding: 1.3em;\t\t\t\/* vertical and horizontal centering icons *\/\r\n}\r\n\r\n.inactive {\t\t\t\t\t\/* inactive dates get a light gray text color *\/\r\n\tcolor: #ccc;\r\n}\r\n\r\n.weekdays {\t\r\n\tpadding: 1em;\t\t\t\/* giving weekdays some space around *\/\r\n}\r\n\r\n.dates {\r\n\tpadding: 0.2em 1em 0.2em 1em;\t\/* giving dates some space  *\/\r\n}\r\n\r\n.line {\t\t\t\t\t\t\t\t\/* a gray line separator  *\/\r\n\theight: 0.1em;\r\n\tborder: 0.1em solid #EEEEEE;\r\n}\r\n\r\n.current-date {\t\t\t\t\t\/* styling the current date section  *\/\r\n\ttext-transform: uppercase;\r\n\ttext-align: center;\r\n\tpadding: 0.7em;\r\n}\r\n\r\n.calendar-body .row .col-xs-1 p:hover {\r\n\tcolor: #4778a6;\t\t\t\/* hover state on all dates  *\/\r\n} \r\n<\/pre>\n
And we finally have a pretty styled and moder looking calendar. Look at this:
\n
\"Styled<\/a>
Styled Calendar<\/figcaption><\/figure><\/p>\n
Simple as that, looks like we’re done. Before concluding this example lets see a pre-made calendar from http:\/\/demos.telerik.com\/<\/a> where the calendar has full interactivity enabled by jQuery library.<\/p>\n
3. Interactivity? Yes, with jQuery!<\/h2>\n
In this section, I intend to let you know calendars can and should be fully interactive with date\/month\/year choosing.<\/p>\n
The example below is just for demonstration, it is a template on the internet that has interactive behaviour.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <base href=\"http:\/\/demos.telerik.com\/kendo-ui\/calendar\/index\">\r\n    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }<\/style>\r\n    <title>Kendo UI Example for WCG<\/title>\r\n    <link rel=\"stylesheet\" href=\"http:\/\/cdn.kendostatic.com\/2015.1.429\/styles\/kendo.common-material.min.css\" \/>\r\n    <link rel=\"stylesheet\" href=\"http:\/\/cdn.kendostatic.com\/2015.1.429\/styles\/kendo.material.min.css\" \/>\r\n    <link rel=\"stylesheet\" href=\"http:\/\/cdn.kendostatic.com\/2015.1.429\/styles\/kendo.dataviz.min.css\" \/>\r\n    <link rel=\"stylesheet\" href=\"http:\/\/cdn.kendostatic.com\/2015.1.429\/styles\/kendo.dataviz.material.min.css\" \/>\r\n\r\n    <script src=\"http:\/\/cdn.kendostatic.com\/2015.1.429\/js\/jquery.min.js\"><\/script>\r\n    <script src=\"http:\/\/cdn.kendostatic.com\/2015.1.429\/js\/kendo.all.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n      <div id=\"example\">\r\n\t<div class=\"demo-section k-header\" style=\"width: 300px; text-align: center;\">\r\n                  <div id=\"calendar\"><\/div>\r\n             <\/div>\r\n            <script>\r\n                $(document).ready(function() {\r\n                    \/\/ create Calendar from div HTML element\r\n                    $(\"#calendar\").kendoCalendar();\r\n                });\r\n            <\/script>\r\n        <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Everything is in there, including html, css and js, but css and js are linked from the internet.<\/p>\n
For more examples of interactive calendar refer here<\/a>.<\/p>\n
The example for which the code is above would look like this:
\n
\"Interactive<\/a>
Interactive Calendar – jQuery<\/figcaption><\/figure><\/p>\n
4. Conclusion<\/h2>\n
Even though calendars can be easily created and styled in html and css, when it comes to interactivity, you’ll need a more professional level of coding in javascript if you are willing to do it fully customized from scratch.<\/p>\n
However feel free to get ready jQuery code to animate things a little bit, while you can have your own html and css.<\/p>\n
Note that you might also need to put attributes like value<\/code> or name<\/code> to your elements when considering a backend supportive calendar, where information is submitted and needs to be sent somewhere.<\/p>\n
5. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: HTML5 and CSS3 Calendar<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
In this example, our focus will be on creating a calendar component with HTML5 and CSS3 and later add some interactivity using javascript. Calendars will be needed in websites whether just for information or when date input is needed. The user is always willing to see nice stuff. We can create calendars with HTML5 and …<\/p>\n","protected":false},"author":75,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-4421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5"],"yoast_head":"\nHTML5 Calendar Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, our focus will be on creating a calendar component with HTML5 and CSS3 and later add some interactivity using javascript. Calendars will\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Calendar Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, our focus will be on creating a calendar component with HTML5 and CSS3 and later add some interactivity using javascript. Calendars will\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-25T09:15:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T12:00:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"HTML5 Calendar Example\",\"datePublished\":\"2015-05-25T09:15:07+00:00\",\"dateModified\":\"2017-12-19T12:00:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/\"},\"wordCount\":796,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/\",\"name\":\"HTML5 Calendar Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2015-05-25T09:15:07+00:00\",\"dateModified\":\"2017-12-19T12:00:44+00:00\",\"description\":\"In this example, our focus will be on creating a calendar component with HTML5 and CSS3 and later add some interactivity using javascript. Calendars will\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Calendar Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Calendar Example - Web Code Geeks - 2026","description":"In this example, our focus will be on creating a calendar component with HTML5 and CSS3 and later add some interactivity using javascript. Calendars will","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Calendar Example - Web Code Geeks - 2026","og_description":"In this example, our focus will be on creating a calendar component with HTML5 and CSS3 and later add some interactivity using javascript. Calendars will","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-05-25T09:15:07+00:00","article_modified_time":"2017-12-19T12:00:44+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"HTML5 Calendar Example","datePublished":"2015-05-25T09:15:07+00:00","dateModified":"2017-12-19T12:00:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/"},"wordCount":796,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/","name":"HTML5 Calendar Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2015-05-25T09:15:07+00:00","dateModified":"2017-12-19T12:00:44+00:00","description":"In this example, our focus will be on creating a calendar component with HTML5 and CSS3 and later add some interactivity using javascript. Calendars will","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-calendar-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Calendar Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=4421"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4421\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=4421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=4421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=4421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}