{"id":1767,"date":"2016-08-16T18:27:48","date_gmt":"2016-08-16T18:27:48","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=1767"},"modified":"2016-08-16T18:27:48","modified_gmt":"2016-08-16T18:27:48","slug":"jquery-ui-datepicker-highlight-specific-dates","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/","title":{"rendered":"How to Highlight Specific Dates in jQuery UI Datepicker"},"content":{"rendered":"<p>The jQuery UI Datepicker is a widely used plugin that provides an easy way to add a calendar to the input field for selecting a date. The jQuery Datepicker is attached with form input field or inline element to open an interactive calendar. Also, it is a highly configurable plugin that lets you customize datepicker functionality as per your requirement.<\/p>\n<p>There are few great customization options are available in jQuery UI Datepicker. In this article, you&#8217;ll know the uses of most useful configuration option <code>beforeShowDay<\/code>. The <code>beforeShowDay<\/code> option allows altering day before it is displayed on the calendar. Here we are going to show you how to highlight specific dates in jQuery UI Datepicker using <code>beforeShowDay<\/code> option.<\/p>\n<p>Date highlight functionality is required when you wants to specify some particular dates in the calendar. For example, you want to mark events dates on jQuery calendar which helps the user to know about the event schedule. In that situation, you can easily change the background color or text color and highlight specific event date range in your existing jQuery UI Datepicker with <code>beforeShowDay<\/code> option.<\/p>\n<p>Before you begin, take a look at <code>beforeShowDay<\/code> option of jQuery UI Datepicker.<br \/>\n<code>beforeShowDay<\/code> function takes a date and must return an array with:<\/p>\n<ul class=\"bullet_disk_list\">\n<li>[0]: true\/false indicating whether or not this date is selectable<\/li>\n<li>[1]: a CSS class name to add to the date&#8217;s cell or &#8220;&#8221; for the default presentation<\/li>\n<li>[2]: an optional popup tooltip for this date<\/li>\n<\/ul>\n<p>This function is called for each day in the datepicker before it is displayed.<\/p>\n<h2>JavaScript<\/h2>\n<p>At first, include some required jQuery and jQuery UI libraries.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">link<\/span> <span style=\"color:#bf4f24\">rel<\/span>=<span style=\"color:#0b6125\">\"stylesheet\"<\/span> <span style=\"color:#bf4f24\">href<\/span>=<span style=\"color:#0b6125\">\"\/\/code.jquery.com\/ui\/1.12.0\/themes\/base\/jquery-ui.css\"<\/span>>\r\n&lt;<span style=\"color:#bf4f24\">script<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"https:\/\/code.jquery.com\/jquery-1.12.4.js\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n&lt;<span style=\"color:#bf4f24\">script<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"https:\/\/code.jquery.com\/ui\/1.12.0\/jquery-ui.js\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n<\/pre>\n<p>Define an array of specific dates which will be highlighted in the calendar. The following code creates an array of dates and assigns the dates array into <code>eventDates<\/code> variable.<\/p>\n<pre><span style=\"color:#5a525f;font-style:italic\">\/\/ An array of dates<\/span>\r\n<span style=\"color:#a71d5d;font-style:italic\">var<\/span> eventDates <span style=\"color:#794938\">=<\/span> {};\r\neventDates[ <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/07\/2016'<\/span> )] <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/07\/2016'<\/span> );\r\neventDates[ <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/12\/2016'<\/span> )] <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/12\/2016'<\/span> );\r\neventDates[ <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/18\/2016'<\/span> )] <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/18\/2016'<\/span> );\r\neventDates[ <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/23\/2016'<\/span> )] <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/23\/2016'<\/span> );\r\n<\/pre>\n<p>Now use <code>beforeShowDay<\/code> option of jQuery UI datepicker, which will be called for each day before render it in the calendar. In beforeShowDay function, we&#8217;ll check whether the date is matched with the specific date and add a class to the data if matches found. This added class will help you to change the background color or text color of the particular dates in the calendar.<\/p>\n<pre><span style=\"color:#5a525f;font-style:italic\">\/\/ datepicker<\/span>\r\n<span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#datepicker<\/span>').datepicker({\r\n    <span style=\"color:#bf4f24\">beforeShowDay<\/span>: <span style=\"color:#a71d5d;font-style:italic\">function<\/span>( date ) {\r\n        <span style=\"color:#a71d5d;font-style:italic\">var<\/span> highlight <span style=\"color:#794938\">=<\/span> eventDates[date];\r\n        <span style=\"color:#794938\">if<\/span>( highlight ) {\r\n             <span style=\"color:#794938\">return<\/span> [<span style=\"color:#811f24;font-weight:700\">true<\/span>, <span style=\"color:#0b6125\">\"event\"<\/span>, <span style=\"color:#0b6125\">'Tooltip text'<\/span>];\r\n        } <span style=\"color:#794938\">else<\/span> {\r\n             <span style=\"color:#794938\">return<\/span> [<span style=\"color:#811f24;font-weight:700\">true<\/span>, <span style=\"color:#0b6125\">''<\/span>, <span style=\"color:#0b6125\">''<\/span>];\r\n        }\r\n    }\r\n});\r\n<\/pre>\n<p>The complete JavaScript code to highlight specific dates.<\/p>\n<pre><span style=\"color:#691c97\">$<\/span>( <span style=\"color:#a71d5d;font-style:italic\">function<\/span>() {\r\n    <span style=\"color:#5a525f;font-style:italic\">\/\/ An array of dates<\/span>\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> eventDates <span style=\"color:#794938\">=<\/span> {};\r\n    eventDates[ <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/07\/2016'<\/span> )] <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/07\/2016'<\/span> );\r\n    eventDates[ <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/12\/2016'<\/span> )] <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/12\/2016'<\/span> );\r\n    eventDates[ <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/18\/2016'<\/span> )] <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/18\/2016'<\/span> );\r\n    eventDates[ <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/23\/2016'<\/span> )] <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">Date<\/span>( <span style=\"color:#0b6125\">'08\/23\/2016'<\/span> );\r\n    \r\n    <span style=\"color:#5a525f;font-style:italic\">\/\/ datepicker<\/span>\r\n    <span style=\"color:#794938\">$<\/span>(<span style=\"color:#0b6125\">'#datepicker'<\/span>).datepicker({\r\n        <span style=\"color:#bf4f24\">beforeShowDay<\/span>: <span style=\"color:#a71d5d;font-style:italic\">function<\/span>( date ) {\r\n            <span style=\"color:#a71d5d;font-style:italic\">var<\/span> highlight <span style=\"color:#794938\">=<\/span> eventDates[date];\r\n            <span style=\"color:#794938\">if<\/span>( highlight ) {\r\n                 <span style=\"color:#794938\">return<\/span> [<span style=\"color:#811f24;font-weight:700\">true<\/span>, <span style=\"color:#0b6125\">\"event\"<\/span>, <span style=\"color:#0b6125\">'Tooltip text'<\/span>];\r\n            } <span style=\"color:#794938\">else<\/span> {\r\n                 <span style=\"color:#794938\">return<\/span> [<span style=\"color:#811f24;font-weight:700\">true<\/span>, <span style=\"color:#0b6125\">''<\/span>, <span style=\"color:#0b6125\">''<\/span>];\r\n            }\r\n        }\r\n    });\r\n});\r\n<\/pre>\n<h2>HTML<\/h2>\n<p>The jQuery UI Datepicker is tied with the input field or inline div.<\/p>\n<pre>Date: &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"datepicker\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n<\/pre>\n<p><b>OR<\/b><\/p>\n<pre>Date: &lt;<span style=\"color:#bf4f24\">input<\/span> <span style=\"color:#bf4f24\">type<\/span>=<span style=\"color:#0b6125\">\"text\"<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"datepicker\"<\/span>>\r\n<\/pre>\n<h2>CSS<\/h2>\n<p>The following CSS code will highlight the specific dates on jQuery UI Datepicker calendar.<\/p>\n<pre><span style=\"color:#bf4f24\">.event<\/span> <span style=\"color:#bf4f24\">a<\/span> {\r\n    <span style=\"color:#691c97\">background-color<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">#5FBA7D<\/span> <span style=\"color:#794938\">!important<\/span>;\r\n    <span style=\"color:#691c97\">color<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">#ffffff<\/span> <span style=\"color:#794938\">!important<\/span>;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The jQuery UI Datepicker is a widely used plugin that provides an easy way to add a calendar to the input field for selecting a date. The jQuery Datepicker is attached with form input field <\/p>\n","protected":false},"author":1,"featured_media":1768,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[216,17],"class_list":["post-1767","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-datepicker","tag-jquery-ui","cat-6-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Highlight Specific Dates in jQuery UI Datepicker - CodexWorld<\/title>\n<meta name=\"description\" content=\"jQuery UI Datepicker highlight event dates - Example code to highlight specific dates in jquery ui datepicker using beforeShowDay option.\" \/>\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.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Highlight Specific Dates in jQuery UI Datepicker - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"jQuery UI Datepicker highlight event dates - Example code to highlight specific dates in jquery ui datepicker using beforeShowDay option.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-16T18:27:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/08\/highlight-specific-dates-in-jquery-ui-datepicker-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-datepicker-highlight-specific-dates\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-datepicker-highlight-specific-dates\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"How to Highlight Specific Dates in jQuery UI Datepicker\",\"datePublished\":\"2016-08-16T18:27:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-datepicker-highlight-specific-dates\\\/\"},\"wordCount\":400,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-datepicker-highlight-specific-dates\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/highlight-specific-dates-in-jquery-ui-datepicker-codexworld.png\",\"keywords\":[\"Datepicker\",\"jQuery UI\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-datepicker-highlight-specific-dates\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-datepicker-highlight-specific-dates\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-datepicker-highlight-specific-dates\\\/\",\"name\":\"How to Highlight Specific Dates in jQuery UI Datepicker - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-datepicker-highlight-specific-dates\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-datepicker-highlight-specific-dates\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/highlight-specific-dates-in-jquery-ui-datepicker-codexworld.png\",\"datePublished\":\"2016-08-16T18:27:48+00:00\",\"description\":\"jQuery UI Datepicker highlight event dates - Example code to highlight specific dates in jquery ui datepicker using beforeShowDay option.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-datepicker-highlight-specific-dates\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-datepicker-highlight-specific-dates\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-datepicker-highlight-specific-dates\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/highlight-specific-dates-in-jquery-ui-datepicker-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/highlight-specific-dates-in-jquery-ui-datepicker-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"highlight-specific-dates-in-jquery-ui-datepicker-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-datepicker-highlight-specific-dates\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Highlight Specific Dates in jQuery UI Datepicker\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Highlight Specific Dates in jQuery UI Datepicker - CodexWorld","description":"jQuery UI Datepicker highlight event dates - Example code to highlight specific dates in jquery ui datepicker using beforeShowDay option.","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.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/","og_locale":"en_US","og_type":"article","og_title":"How to Highlight Specific Dates in jQuery UI Datepicker - CodexWorld","og_description":"jQuery UI Datepicker highlight event dates - Example code to highlight specific dates in jquery ui datepicker using beforeShowDay option.","og_url":"https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2016-08-16T18:27:48+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/08\/highlight-specific-dates-in-jquery-ui-datepicker-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"How to Highlight Specific Dates in jQuery UI Datepicker","datePublished":"2016-08-16T18:27:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/"},"wordCount":400,"commentCount":2,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/08\/highlight-specific-dates-in-jquery-ui-datepicker-codexworld.png","keywords":["Datepicker","jQuery UI"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/","url":"https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/","name":"How to Highlight Specific Dates in jQuery UI Datepicker - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/08\/highlight-specific-dates-in-jquery-ui-datepicker-codexworld.png","datePublished":"2016-08-16T18:27:48+00:00","description":"jQuery UI Datepicker highlight event dates - Example code to highlight specific dates in jquery ui datepicker using beforeShowDay option.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/08\/highlight-specific-dates-in-jquery-ui-datepicker-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/08\/highlight-specific-dates-in-jquery-ui-datepicker-codexworld.png","width":1366,"height":768,"caption":"highlight-specific-dates-in-jquery-ui-datepicker-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/jquery-ui-datepicker-highlight-specific-dates\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"How to Highlight Specific Dates in jQuery UI Datepicker"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/08\/highlight-specific-dates-in-jquery-ui-datepicker-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-sv","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=1767"}],"version-history":[{"count":2,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1767\/revisions"}],"predecessor-version":[{"id":1770,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1767\/revisions\/1770"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/1768"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=1767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=1767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=1767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}