{"id":17536,"date":"2017-06-30T16:15:06","date_gmt":"2017-06-30T13:15:06","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=17536"},"modified":"2018-01-08T13:10:46","modified_gmt":"2018-01-08T11:10:46","slug":"bootstrap-calendar-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/","title":{"rendered":"Bootstrap Calendar Example"},"content":{"rendered":"
\n

Table Of Contents<\/h3>\n
\n
1. Introduction<\/a><\/dt>\n
2. Tools<\/a><\/dt>\n
3. Project Layout<\/a><\/dt>\n
4. HTML Markup<\/a><\/dt>\n
5. JavaScript<\/a><\/dt>\n
\n
\n
5.1 Build the Markup of the Calendar<\/a><\/dt>\n
5.2 Update the Calendar<\/a><\/dt>\n
5.3 Allow Selection of Date<\/a><\/dt>\n
5.4 Navigate Dates for the Desired Month<\/a><\/dt>\n
5.5 Update\/Populate the Selected Date<\/a><\/dt>\n
5.6 The Completed Calendar Control<\/a><\/dt>\n<\/dl>\n<\/dd>\n
6. Running the Example<\/a><\/dt>\n
7. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n

[ulp id=’57DHuNTHJ2qczaGz’]
\n <\/p>\n

<\/a>1. Introduction<\/h2>\n

In this post we are striving to build a Bootstrap Calendar. Our calendar lets user navigate dates one month at a time choosing one. It is attached to an input control which displays the date selected by the user. The input will act as a trigger to display the calendar. As and when the user sets focus on the input, the calendar appears right below it. We will leverage the modal component of Bootstrap and write JavaScript to implement the desired behavior.<\/p>\n

<\/a>2. Tools<\/h2>\n

The tools I used for the example are:
\n1. Bootstrap v3.3.7<\/a>
\n2. JQuery v1.12.4<\/a>
\n3. Node.js v6.3.0<\/a>
\n4. Express v4.15.3<\/a>
\n5. Visual Studio Code IDE<\/a><\/p>\n

Let us briefly talk about the tools used. Bootstrap is a popular framework for developing responsive websites. These websites look good on regardless of screen size. As a result a lot of burden is reduced on developers working on sites accessed from devices with varying screen sizes. Moving to JQuery, it is a JavaScript library with a solid reputation and has made life easier when writing JavaScript that works on all browsers in the same way. Node.js allows us to write JavaScript that runs on the server side and the Express module allows us to quickly setup a Web Server using its JavaScript API. The Visual Studio Code IDE is a lightweight IDE for writing Node application among other types of projects. Now let us get started writing our Bootstrap Calendar.<\/p>\n

<\/a>3. Project Layout<\/h2>\n

The project layout that we will follow for this example is illustrated in the Screen Capture below<\/p>\n

\"\"<\/a>
Project Layout<\/figcaption><\/figure>\n

css<\/em><\/strong>
\nThe css folder holds the Bootstrap css files taken from the Bootstrap download.<\/p>\n

fonts<\/em><\/strong>
\nThe fonts that came with the Bootstrap download are placed in this folder.<\/p>\n

js<\/em><\/strong>
\nAll Bootstrap JavaScript files and the ones we create reside in this folder.<\/p>\n

index.js<\/em><\/strong>
\nThis file is placed in the root of our project and contains code for a bare minimum web server for our use.<\/p>\n

index.html<\/em><\/strong>
\nThe index.html file contains all the HTML markup. I have used the template provided in the Getting Started section of the Bootstrap website as a starter.<\/p>\n

bootstrap.calendar.js<\/em><\/strong>
\nThis file in the js folder is where we will write JavaScript to enable functionality of our Calendar control.<\/p>\n

<\/a>4. HTML Markup<\/h2>\n

In this section we will setup and write the HTML markup for our example in the index.html page. Lets add an input tag with a corresponding label above it. These will prompt the user to enter or rather select their birth date.<\/p>\n

<label for=\"birthday\">Enter Birth Date<\/label>\r\n<input class=\"form-control\" id=\"birthday\" data-calendar=\"\" placeholder=\"Select Birth Date...\" autocomplete=\"off\" \/><\/pre>\n
Now our index page should look like below. Do notice the addition of data-calendar<\/code> attribute to the input tag. It helps select inputs for which we will show our calendar control.<\/p>\n
index.html<\/em><\/span><\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n\r\n    <metacharset=\"utf-8\">\r\n    <metahttp-equiv=\"X-UA-Compatible\"content=\"IE=edge\">\r\n    <metaname=\"viewport\"content=\"width=device-width, initial-scale=1\">\r\n    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->\r\n    <title>Bootstrap Calendar Example - Web Code Geeks<\/title>\r\n    <!-- Latest compiled and minified CSS -->\r\n    <linkrel=\"stylesheet\"href=\"\/css\/bootstrap.min.css\">\r\n    <!-- Optional theme -->\r\n    <linkrel=\"stylesheet\"href=\"\/css\/bootstrap-theme.min.css\">\r\n    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\r\n    <!-- WARNING: Respond.js doesn't work if you view the page via file:\/\/ -->\r\n    <!--[if lt IE 9]>\r\n    <script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"><\/script>\r\n    <script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"><\/script>\r\n    <![endif]-->\r\n<\/head>\r\n<body>\r\n\r\n    <divclass=\"panel panel-info\">\r\n        <div class=\"panel-heading\">\r\n            <h1>WebCodeGeeks - Bootstrap Calendar<\/h1>\r\n        <\/div>\r\n        <div class=\"panel-body\">\r\n            <div class=\"form-group\">\r\n                <labelfor=\"birthday\">Enter Birth Date<\/label>\r\n                <inputclass=\"form-control\"id=\"birthday\"data-calendar=\"\"placeholder=\"Select Birth Date...\" autocomplete=\"off\" \/>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->\r\n    <scriptsrc=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.4\/jquery.min.js\"><\/script>\r\n    <!-- Include all compiled plugins (below), or include individual files as needed -->\r\n    <!-- Latest compiled and minified JavaScript -->\r\n    <scriptsrc=\".\/js\/bootstrap.min.js\"><\/script>\r\n    <scriptsrc=\".\/js\/bootstrap.calendar.js\"><\/script>\r\n    <styletype=\"text\/css\">\r\n    .activeDate{\r\n        background-color:lightskyblue;\r\n        color:white;\r\n    }\r\n\r\n    .inactiveDate{\r\n        background-color:grey;\r\n        color:black;\r\n    }\r\n\r\n    .modal{\r\n        right:auto;\r\n    }\r\n    <\/style>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/a>5. JavaScript<\/h2>\n
Now let us bring our calendar control to life through some JavaScript. Remember we created a file specifically to write the behavior of the control called bootstrap.calendar.js<\/code>. The behavior that we will script in order are as described below.<\/p>\n
<\/a>5.1 Build the markup of the Calendar<\/h3>\n
We write a function called createCalendar()<\/code> to build our calendar from scratch. The first function builds the final Html markup from scratch to represent a bootstrap modal on the outside. The inside of this shell first contains the previous and next button with a text indicating the current month and year in the middle. Below this, is the Table with weekday names as headers and the dates in the tbody<\/code> of the table. The second function updates the calendar with new values.<\/p>\n
<\/a>5.2 Update the Calendar<\/h3>\n
A function called updateCalendar<\/code> handles updating calendar without having to recreate the calendar from scratch. It updates the calendar in case the user switches from one month to another.<\/p>\n
<\/a>5.3 Allow selection of date<\/h3>\n
When the user clicks a date in the calendar to select it we highlight the same by applying the .selected<\/code> css class to the table cell.<\/p>\n
<\/a>5.4 Navigate dates for desired month<\/h3>\n
The two buttons surrounding the month name and year at the top of the calendar allow the user to navigate between months. On clicking these buttons either the previous or the next month’s calendar is displayed in the control.<\/p>\n
<\/a>5.5 Update\/Populate the selected date<\/h3>\n
When the user selects a date in the calendar by clicking on it, we update the text control by populating it with the date selected by the user.<\/p>\n
<\/a>5.6 The completed calendar control<\/h3>\n
Now our finished bootstrap.calendar.js<\/code> should look like this:<\/p>\n
bootstrap.calendar.js<\/em><\/span><\/p>\n
\"use strict\";\r\nvar calendarWidget;\r\nvar weekDays =['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\r\nvar monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July',\r\n'August', 'September', 'October', 'November', 'December'];\r\nvar currentMonth = (new Date()).getMonth();\r\nvar currentYear = (new Date()).getFullYear();\r\nvar selectedDate = new Date();\r\n$(document).ready(function () {\r\n\r\n    \/\/Setup the input tags to display calendar by binding to their focus event\r\n    $(\"input[data-calendar]\").on(\"focus\", function (event) {\r\n\r\n        var element = event.target || event.srcElement;\r\n\r\n        \/\/Display calendar if the inputs receive focus or are clicked\r\n        if(calendarWidget){\r\n\r\n            updateCalendar(element, element.value);\r\n        }else{\r\n\r\n            createCalendar(element, element.value);\r\n        }\r\n        showCalendar(element);\r\n\r\n    });\r\n    $(document).on(\"click\", function(event){\r\n        var element = event.target|| event.srcElement;\r\n        if($.contains($(\"#wcg-modal\")[0], $(element)[0]) == false &&\r\n        $(element).is(\"input[data-calendar]\") == false){\r\n            hideCalendar(element);\r\n        } else if($(element).hasClass(\"activeDate\") == true){\r\n            setInputValue($(element));\r\n        } else if($(element).hasClass(\"leftChevron\") == true){\r\n            changeMonth(element, -1);\r\n        } else if ($(element).hasClass(\"rightChevron\") == true){\r\n            changeMonth(element, 1);\r\n        }\r\n\r\n    });\r\n});\r\nfunction setInputValue(element){\r\n    selectedDate = new Date(currentYear, currentMonth, $(element).text());\r\n    $(calendarWidget['selectedElement']).val(selectedDate.getMonth() + 1 + '\/' +\r\n    selectedDate.getDate() +'\/'+ selectedDate.getFullYear());\r\n    $(calendarWidget).find(\".selected\").removeClass(\"selected\");\r\n    $(element).addClass(\"selected\");\r\n};\r\nfunction changeMonth(ctrl, month){\r\n    var currentValue = new Date(currentYear, currentMonth, selectedDate.getDate());\r\n    updateCalendar(ctrl, currentValue.setMonth(currentValue.getMonth() + month));\r\n}\r\nfunction showCalendar(element){\r\n    calendarWidget[\"element\"] = element;\r\n    $(calendarWidget).modal('show');\r\n}\r\nfunction hideCalendar(element){\r\n\r\n    $(calendarWidget).modal('hide');\r\n}\r\n\r\nfunction updateCalendar(element, date){\r\n    var calendarDate = date? new Date(date): new Date();\r\n    $(calendarWidget).find(\"#monthYear\").first().text(calendarDate.toString());\r\n    $(\"#dateChart\").find(\"tbody\").first().replaceWith(getDateTable(calendarDate));\r\n\r\n    currentMonth = calendarDate.getMonth();\r\n    currentYear = calendarDate.getFullYear();\r\n    selectedDate = calendarDate;\r\n}\r\nfunction createCalendar(element, date) {\r\n\r\n    var calendarDate = date == true? new Date(date): new Date();\r\n    var calendarDiv = $('<div id=\"wcg-modal\" class=\"modal fade\" ' +\r\n    'data-backdrop=\"false\" role=\"dialog\" >' +\r\n    '<div class=\"modal-dialog modal-sm\" role=\"document\" >' +\r\n    '<div class=\"modal-content\" >' +\r\n    '<div class=\"modal-body\" ><\/div><\/div><\/div><\/div>');\r\n    var infoDiv = $('<div class=\"container-fluid\" ><div class=\"row\" ><\/div><\/div>');\r\n    var leftChevron = $('<button type=\"button\" class=\"leftChevron btn-info col-xs-3\" >' +\r\n    '<span class=\"glyphicon glyphicon-chevron-left\" ><\/span><\/button>');\r\n    var rightChevron = $('<button type=\"button\" class=\"rightChevron btn-info col-xs-3\" >' +\r\n    '<span class=\"glyphicon glyphicon-chevron-right\"><\/span><\/button>');\r\n    var monthYear = $('<span id=\"monthYear\" class=\"col-xs-6\" >' +\r\n    calendarDate.toString() + '<\/span>');\r\n    var dateChart = $('<table id=\"dateChart\" class=\"table table-condensed '+\r\n    'table-hover table-bordered\" ><\/table>');\r\n    var weekdayTitleRow = $('<thead id=\"weekdayTitles\" ><tr><\/tr><\/thead>');\r\n    weekDays.forEach(function(item, index){\r\n        $(weekdayTitleRow).find(\"tr\").first().append($('<th>' + item + '<\/th>'));\r\n    });\r\n    $(infoDiv).find(\".row\").first().append(leftChevron);\r\n    $(infoDiv).find(\".row\").first().append(monthYear);\r\n    $(infoDiv).find(\".row\").first().append(rightChevron);\r\n    $(calendarDiv).find(\".modal-body\").first().html(infoDiv);\r\n    $(dateChart).append(weekdayTitleRow);\r\n    $(dateChart).append(getDateTable(calendarDate));\r\n    $(calendarDiv).find(\".modal-body\").first().append(dateChart);\r\n    calendarWidget = $(calendarDiv);\r\n\r\n    $(document.body).append(calendarWidget);\r\n\r\n    \/\/Place the calendar under the correct input tag\r\n    $(calendarWidget).css({\r\n        left: $(element).position().left + \"px\",\r\n        top: $(element).position().top + $(element).height() + 8 + \"px\"\r\n    });\r\n    calendarWidget[\"selectedElement\"] = $(element);\r\n    currentMonth = calendarDate.getMonth();\r\n    currentYear = calendarDate.getFullYear();\r\n    selectedDate = calendarDate;\r\n};\r\n\r\nfunction getDateTable(date){\r\n    var fullDate = date;\r\n    var selectedMonth = date.getMonth();\r\n    var dateTable = $(\"<tbody><\/tbody>\");\r\n    var startDate = new Date(fullDate.getFullYear(), fullDate.getMonth(), 1);\r\n    do {\r\n        startDate.setDate(startDate.getDate() - 1);\r\n\r\n    }while(startDate.getDay() > 0)\r\n    for(var j = 0 ; j < 6; j++){\r\n        $(dateTable).append($(\"<tr><\/tr>\"));\r\n        var row = $(dateTable).find(\"tr\").last();\r\n        for(var i = 0; i < 7; i++){\r\n            if(selectedMonth === startDate.getMonth()){\r\n                row.append($('<td class=\"activeDate\" >' + startDate.getDate() + '<\/td>'));\r\n            } else {\r\n                row.append($('<td class=\"inactiveDate\" >' + startDate.getDate() + '<\/td>'));\r\n            }\r\n\r\n            startDate.setDate(startDate.getDate() + 1);\r\n        }\r\n    }\r\n\r\n    return dateTable;\r\n\r\n}\r\n\r\nDate.prototype.toString = function(){\r\n\r\n    var formattedDate = monthNames[this.getMonth()];\r\n    formattedDate += (\" \" + this.getFullYear());\r\n    return formattedDate;\r\n}<\/pre>\n
<\/a>6. Running the example<\/h2>\n
Now that we are done building our calendar, lets run it to see it in action.
\nAt the root of the application type the below commands:<\/p>\n
npm install<\/pre>\n
node index.js<\/pre>\n
Now open a browser and navigate to http:\/\/localhost:8090<\/code><\/p>\n
You should see the output below in the browser:<\/p>\n
\"\"<\/a>
Project Output<\/figcaption><\/figure>\n
<\/a>7. Download the Source Code<\/h2>\n
This wraps up the Example wherein we looked at building a Bootstrap Calendar.<\/p>\n
Download<\/strong>
\nYou can download the full source code of this example here: Bootstrap Calendar Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
Table Of Contents 1. Introduction 2. Tools 3. Project Layout 4. HTML Markup 5. JavaScript 5.1 Build the Markup of the Calendar 5.2 Update the Calendar 5.3 Allow Selection of Date 5.4 Navigate Dates for the Desired Month 5.5 Update\/Populate the Selected Date 5.6 The Completed Calendar Control 6. Running the Example 7. Download the …<\/p>\n","protected":false},"author":213,"featured_media":8515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[284],"tags":[376,183],"class_list":["post-17536","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","tag-bootstrap","tag-calendar"],"yoast_head":"\nBootstrap Calendar Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Table Of Contents 1. Introduction 2. Tools 3. Project Layout 4. HTML Markup 5. JavaScript 5.1 Build the Markup of the Calendar 5.2 Update the Calendar 5.3\" \/>\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\/css\/bootstrap\/bootstrap-calendar-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Calendar Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Table Of Contents 1. Introduction 2. Tools 3. Project Layout 4. HTML Markup 5. JavaScript 5.1 Build the Markup of the Calendar 5.2 Update the Calendar 5.3\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-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:published_time\" content=\"2017-06-30T13:15:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T11:10:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-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=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\"},\"headline\":\"Bootstrap Calendar Example\",\"datePublished\":\"2017-06-30T13:15:06+00:00\",\"dateModified\":\"2018-01-08T11:10:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/\"},\"wordCount\":875,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"keywords\":[\"bootstrap\",\"calendar\"],\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/\",\"name\":\"Bootstrap Calendar Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"datePublished\":\"2017-06-30T13:15:06+00:00\",\"dateModified\":\"2018-01-08T11:10:46+00:00\",\"description\":\"Table Of Contents 1. Introduction 2. Tools 3. Project Layout 4. HTML Markup 5. JavaScript 5.1 Build the Markup of the Calendar 5.2 Update the Calendar 5.3\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bootstrap\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Bootstrap 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\/9c939eb4c915443c7e493c813d979592\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Calendar Example - Web Code Geeks - 2026","description":"Table Of Contents 1. Introduction 2. Tools 3. Project Layout 4. HTML Markup 5. JavaScript 5.1 Build the Markup of the Calendar 5.2 Update the Calendar 5.3","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\/css\/bootstrap\/bootstrap-calendar-example\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Calendar Example - Web Code Geeks - 2026","og_description":"Table Of Contents 1. Introduction 2. Tools 3. Project Layout 4. HTML Markup 5. JavaScript 5.1 Build the Markup of the Calendar 5.2 Update the Calendar 5.3","og_url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-06-30T13:15:06+00:00","article_modified_time":"2018-01-08T11:10:46+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592"},"headline":"Bootstrap Calendar Example","datePublished":"2017-06-30T13:15:06+00:00","dateModified":"2018-01-08T11:10:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/"},"wordCount":875,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","keywords":["bootstrap","calendar"],"articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/","name":"Bootstrap Calendar Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","datePublished":"2017-06-30T13:15:06+00:00","dateModified":"2018-01-08T11:10:46+00:00","description":"Table Of Contents 1. Introduction 2. Tools 3. Project Layout 4. HTML Markup 5. JavaScript 5.1 Build the Markup of the Calendar 5.2 Update the Calendar 5.3","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"Bootstrap","item":"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/"},{"@type":"ListItem","position":4,"name":"Bootstrap 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\/9c939eb4c915443c7e493c813d979592","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/17536","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\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=17536"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/17536\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/8515"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=17536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=17536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=17536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}