CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>API:Holidays viewer - MediaWiki</title> <script>(function(){var className="client-js vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )mediawikiwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"2120d88d-5582-4fb3-ba7f-f856ff6ee138","wgCanonicalNamespace":"API","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":104,"wgPageName":"API:Holidays_viewer","wgTitle":"Holidays viewer","wgCurRevisionId":6749968,"wgRevisionId":6749968,"wgArticleId":969509,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["MediaWiki action API"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"API:Holidays_viewer","wgRelevantArticleId":969509,"wgIsProbablyEditable":false,"wgRelevantPageIsProbablyEditable":false,"wgRestrictionEdit":["autoconfirmed"],"wgRestrictionMove":["autoconfirmed"],"wgNoticeProject":"mediawiki","wgCiteReferencePreviewsActive":true,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault" :true,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":30000,"wgTranslatePageTranslation":"source","wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"personal","wgULSisCompactLinksEnabled":true,"wgVector2022LanguageInHeader":false,"wgULSisLanguageSelectorEmpty":false,"wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"]};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.translate.tag.languages":"ready","ext.pygments":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready", "jquery.makeCollapsible.styles":"ready","mediawiki.ui.button":"ready","ext.translate.edit.documentation.styles":"ready","ext.translate":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.pygments.view","mediawiki.page.media","site","mediawiki.page.ready","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.translate.pagetranslation.uls","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.compactlinks","ext.uls.interface","ext.checkUser.clientHints"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.pygments%2Ctranslate%2CwikimediaBadges%7Cext.translate.edit.documentation.styles%7Cext.translate.tag.languages%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cmediawiki.ui.button%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.5"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:site_name" content="MediaWiki"> <meta property="og:title" content="API:Holidays viewer - MediaWiki"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//m.mediawiki.org/wiki/API:Holidays_viewer"> <link rel="apple-touch-icon" href="/static/apple-touch/mediawiki.png"> <link rel="icon" href="/static/favicon/mediawiki.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="MediaWiki (en)"> <link rel="EditURI" type="application/rsd+xml" href="//www.mediawiki.org/w/api.php?action=rsd"> <link rel="canonical" href="https://www.mediawiki.org/wiki/API:Holidays_viewer"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> <link rel="alternate" type="application/atom+xml" title="MediaWiki Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-104 ns-subject page-API_Holidays_viewer rootpage-API_Holidays_viewer skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Main menu </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/MediaWiki" title="Visit the main page [z]" accesskey="z">Main page</a></li><li id="n-mw-download" class="mw-list-item"><a href="/wiki/Download">Get MediaWiki</a></li><li id="n-mw-extensions" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Category:Extensions">Get extensions</a></li><li id="n-blog-text" class="mw-list-item"><a href="https://techblog.wikimedia.org/">Tech blog</a></li><li id="n-mw-contribute" class="mw-list-item"><a href="/wiki/Special:MyLanguage/How_to_contribute">Contribute</a></li> </ul> </div> </div> <div id="p-support" class="vector-menu mw-portlet mw-portlet-support" > <div class="vector-menu-heading"> Support </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Help:Contents" title="The place to find out">User help</a></li><li id="n-mw-faq" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:FAQ">FAQ</a></li><li id="n-mw-manual" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:Contents">Technical manual</a></li><li id="n-mw-supportdesk" class="mw-list-item"><a href="/wiki/Project:Support_desk">Support desk</a></li><li id="n-mw-communication" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Communication">Communication</a></li> </ul> </div> </div> <div id="p-development" class="vector-menu mw-portlet mw-portlet-development" > <div class="vector-menu-heading"> Development </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mw-developerportal" class="mw-list-item"><a href="https://developer.wikimedia.org/">Developer portal</a></li><li id="n-svn-statistics" class="mw-list-item"><a href="/wiki/Development_statistics">Code statistics</a></li> </ul> </div> </div> <div id="p-mediawiki.org" class="vector-menu mw-portlet mw-portlet-mediawiki_org" > <div class="vector-menu-heading"> mediawiki.org </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-portal" class="mw-list-item"><a href="/wiki/Project:Help" title="About the project, what you can do, where to find things">Community portal</a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r">Recent changes</a></li><li id="n-mw-translate" class="mw-list-item"><a href="/wiki/Special:LanguageStats">Translate content</a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Load a random page [x]" accesskey="x">Random page</a></li><li id="n-mw-discussion" class="mw-list-item"><a href="/wiki/Project:Village_Pump">Village pump</a></li><li id="n-Sandboxlink-portlet-label" class="mw-list-item"><a href="/wiki/Project:Sandbox">Sandbox</a></li> </ul> </div> </div> <div id="p-lang" class="vector-menu mw-portlet mw-portlet-lang" > <div class="vector-menu-heading"> In other languages </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> <div class="after-portlet after-portlet-lang"><a href="https://www.wikidata.org/wiki/Special:NewItem?site=mediawikiwiki&page=API%3AHolidays+viewer" title="Add interlanguage links" class="wbc-editpage">Add links</a></div> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/MediaWiki" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/mediawikiwiki.svg" alt="" aria-hidden="true" height="50" width="50"> <img class="mw-logo-wordmark" alt="MediaWiki" src="/static/images/mobile/copyright/mediawikiwiki-wordmark.svg" style="width: 7.5em; height: 1.125em;"> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search MediaWiki [f]" accesskey="f"> Search </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search MediaWiki" aria-label="Search MediaWiki" autocapitalize="sentences" title="Search MediaWiki [f]" accesskey="f" id="searchInput" > </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-uls" class="mw-list-item active user-links-collapsible-item"><a data-mw="interface" href="#" class="uls-trigger cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet"> English</a> </li> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Appearance </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=www.mediawiki.org&uselang=en" class="">Donate</a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=API%3AHolidays+viewer" title="You are encouraged to create an account and log in; however, it is not mandatory" class="">Create account</a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=API%3AHolidays+viewer" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o" class="">Log in</a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Personal tools </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=www.mediawiki.org&uselang=en">Donate</a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=API%3AHolidays+viewer" title="You are encouraged to create an account and log in; however, it is not mandatory"> Create account</a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=API%3AHolidays+viewer" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"> Log in</a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing">learn more</a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y">Contributions</a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n">Talk</a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Overview" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Overview"> <div class="vector-toc-text"> 1 Overview </div> </a> <ul id="toc-Overview-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-A_step-by-step_process_for_building_this_application" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#A_step-by-step_process_for_building_this_application"> <div class="vector-toc-text"> 2 A step-by-step process for building this application </div> </a> <button aria-controls="toc-A_step-by-step_process_for_building_this_application-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Toggle A step-by-step process for building this application subsection </button> <ul id="toc-A_step-by-step_process_for_building_this_application-sublist" class="vector-toc-list"> <li id="toc-Step_1:_Set_up_Python_and_Flask_development_environment" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Step_1:_Set_up_Python_and_Flask_development_environment"> <div class="vector-toc-text"> 2.1 Step 1: Set up Python and Flask development environment </div> </a> <ul id="toc-Step_1:_Set_up_Python_and_Flask_development_environment-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Step_2:_Create_a_simple_Flask_application" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Step_2:_Create_a_simple_Flask_application"> <div class="vector-toc-text"> 2.2 Step 2: Create a simple Flask application </div> </a> <ul id="toc-Step_2:_Create_a_simple_Flask_application-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Step_3:_Create_the_base_layout" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Step_3:_Create_the_base_layout"> <div class="vector-toc-text"> 2.3 Step 3: Create the base layout </div> </a> <ul id="toc-Step_3:_Create_the_base_layout-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Step_4:_List_holidays" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Step_4:_List_holidays"> <div class="vector-toc-text"> 2.4 Step 4: List holidays </div> </a> <ul id="toc-Step_4:_List_holidays-sublist" class="vector-toc-list"> <li id="toc-Get_today's_date" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Get_today's_date"> <div class="vector-toc-text"> 2.4.1 Get today's date </div> </a> <ul id="toc-Get_today's_date-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Get_the_holidays_to_be_listed" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Get_the_holidays_to_be_listed"> <div class="vector-toc-text"> 2.4.2 Get the holidays to be listed </div> </a> <ul id="toc-Get_the_holidays_to_be_listed-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Update_holiday_links" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Update_holiday_links"> <div class="vector-toc-text"> 2.4.3 Update holiday links </div> </a> <ul id="toc-Update_holiday_links-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Step_5:_Search_for_holidays_of_other_dates" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Step_5:_Search_for_holidays_of_other_dates"> <div class="vector-toc-text"> 2.5 Step 5: Search for holidays of other dates </div> </a> <ul id="toc-Step_5:_Search_for_holidays_of_other_dates-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Step_6:_Add_a_holiday" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Step_6:_Add_a_holiday"> <div class="vector-toc-text"> 2.6 Step 6: Add a holiday </div> </a> <ul id="toc-Step_6:_Add_a_holiday-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Step_7:_Styling_the_app" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Step_7:_Styling_the_app"> <div class="vector-toc-text"> 2.7 Step 7: Styling the app </div> </a> <ul id="toc-Step_7:_Styling_the_app-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Application_layout" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Application_layout"> <div class="vector-toc-text"> 3 Application layout </div> </a> <ul id="toc-Application_layout-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Next_steps" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Next_steps"> <div class="vector-toc-text"> 4 Next steps </div> </a> <ul id="toc-Next_steps-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> 5 See also </div> </a> <ul id="toc-See_also-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Toggle the table of contents </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading">API:Holidays viewer</h1> <div class="mw-indicators"> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-api" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/API:Holidays_viewer" title="View the subject page [c]" accesskey="c">API</a></li><li id="ca-talk" class="new vector-tab-noicon mw-list-item"><a href="/w/index.php?title=API_talk:Holidays_viewer&action=edit&redlink=1" rel="discussion" class="new" title="Discussion about the content page (page does not exist) [t]" accesskey="t">Discussion</a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" >English </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/API:Holidays_viewer">Read</a></li><li id="ca-viewsource" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=API:Holidays_viewer&action=edit" title="This page is protected.
You can view its source [e]" accesskey="e">View source</a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=API:Holidays_viewer&action=history" title="Past revisions of this page [h]" accesskey="h">View history</a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" >Tools </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/API:Holidays_viewer">Read</a></li><li id="ca-more-viewsource" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=API:Holidays_viewer&action=edit">View source</a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=API:Holidays_viewer&action=history">View history</a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/API:Holidays_viewer" title="A list of all wiki pages that link here [j]" accesskey="j">What links here</a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/API:Holidays_viewer" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li><li id="t-upload" class="mw-list-item"><a href="//commons.wikimedia.org/wiki/Special:UploadWizard" title="Upload files [u]" accesskey="u">Upload file</a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q">Special pages</a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=API:Holidays_viewer&oldid=6749968" title="Permanent link to this revision of this page">Permanent link</a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=API:Holidays_viewer&action=info" title="More information about this page">Page information</a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=API%3AHolidays_viewer&id=6749968&wpFormIdentifier=titleform" title="Information on how to cite this page">Cite this page</a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FAPI%3AHolidays_viewer">Get shortened URL</a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FAPI%3AHolidays_viewer">Download QR code</a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Special:Book&bookcmd=book_creator&referer=API%3AHolidays+viewer">Create a book</a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=API%3AHolidays_viewer&action=show-download-screen">Download as PDF</a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=API:Holidays_viewer&printable=yes" title="Printable version of this page [p]" accesskey="p">Printable version</a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects emptyPortlet" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div id="siteSub" class="noprint">From mediawiki.org</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-pt-translate-header noprint nomobile" dir="ltr" lang="en"><a href="/w/index.php?title=Special:Translate&group=page-API%3AHolidays+viewer&action=page&filter=&action_source=translate_page" title="Special:Translate">Translate this page</a></div><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="mw-pt-languages noprint navigation-not-searchable" lang="en" dir="ltr"><div class="mw-pt-languages-label">Languages:</div><ul class="mw-pt-languages-list"><li><a href="/wiki/API:Holidays_viewer/de" class="mw-pt-progress mw-pt-progress--complete" title="API:Feiertags-Betrachter (100% translated)" lang="de" dir="ltr">Deutsch</a></li> <li>English</li> <li><a href="/wiki/API:Holidays_viewer/ha" class="mw-pt-progress mw-pt-progress--high" title="API: Mai duba hutu (96% translated)" lang="ha" dir="ltr">Hausa</a></li> <li><a href="/wiki/API:Holidays_viewer/mrh" class="mw-pt-progress mw-pt-progress--low" title="API:Chhitinohzy mona (7% translated)" lang="mrh" dir="ltr">Mara</a></li> <li><a href="/wiki/API:Holidays_viewer/tr" class="mw-pt-progress mw-pt-progress--high" title="API:Tatil görüntüleyicisi (99% translated)" lang="tr" dir="ltr">Türkçe</a></li> <li><a href="/wiki/API:Holidays_viewer/es" class="mw-pt-progress mw-pt-progress--low" title="API:Visor de vacaciones (4% translated)" lang="es" dir="ltr">español</a></li> <li><a href="/wiki/API:Holidays_viewer/fr" class="mw-pt-progress mw-pt-progress--complete" title="Afficheur de jour férié (100% translated)" lang="fr" dir="ltr">français</a></li> <li><a href="/wiki/API:Holidays_viewer/pl" class="mw-pt-progress mw-pt-progress--low" title="API:Holidays viewer/pl (3% translated)" lang="pl" dir="ltr">polski</a></li> <li><a href="/wiki/API:Holidays_viewer/pt" class="mw-pt-progress mw-pt-progress--low" title="API:Holidays viewer/pt (0% translated)" lang="pt" dir="ltr">português</a></li> <li><a href="/wiki/API:Holidays_viewer/cs" class="mw-pt-progress mw-pt-progress--complete" title="API:Prohlížeč svátků (100% translated)" lang="cs" dir="ltr">čeština</a></li> <li><a href="/wiki/API:Holidays_viewer/ru" class="mw-pt-progress mw-pt-progress--low" title="API:Просмотр праздников (3% translated)" lang="ru" dir="ltr">русский</a></li> <li><a href="/wiki/API:Holidays_viewer/th" class="mw-pt-progress mw-pt-progress--low" title="API:Holidays viewer (9% translated)" lang="th" dir="ltr">ไทย</a></li> <li><a href="/wiki/API:Holidays_viewer/ja" class="mw-pt-progress mw-pt-progress--low" title="API:休日ビューア (12% translated)" lang="ja" dir="ltr">日本語</a></li></ul></div> <style data-mw-deduplicate="TemplateStyles:r6651108">.mw-parser-output table.ombox{margin:4px 10%;border-collapse:collapse;border:1px solid #a2a9b1;background-color:#f8f9fa;color:#333;box-sizing:border-box}.mw-parser-output .ombox td.mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ombox th.mbox-text,.mw-parser-output .ombox td.mbox-text{border:none;padding:0.25em 0.9em;width:100%}.mw-parser-output .ombox td.mbox-image{border:none;text-align:center;padding:2px 0 2px 0.9em}.mw-parser-output .ombox td.mbox-imageright{border:none;text-align:center;padding:2px 0.9em 2px 0}.mw-parser-output table.ombox-notice{border-color:#a2a9b1}.mw-parser-output table.ombox-speedy{background-color:#fee7e6;color:#333}.mw-parser-output table.ombox-speedy,.mw-parser-output table.ombox-delete{border-color:#b32424;border-width:2px}.mw-parser-output table.ombox-content{border-color:#f28500}.mw-parser-output table.ombox-style{border-color:#fc3}.mw-parser-output table.ombox-move{border-color:#9932cc}.mw-parser-output table.ombox-protection{border-color:#a2a9b1;border-width:2px}html body.mediawiki .mw-parser-output .ombox.mbox-small{clear:right;float:right;margin:4px 0 4px 1em;box-sizing:border-box;width:238px;font-size:88%;line-height:1.25em}@media screen{html.skin-theme-clientpref-night .mw-parser-output table.ombox{background-color:transparent;color:inherit}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output table.ombox{background-color:transparent;color:inherit}}</style><table class="skin-nightmode-reset-color ombox ombox-content plainlinks" role="presentation" style="display: block; color:#222; border:solid 1px #A8A8A8; padding: .5em 1em; margin:0.5em 0em;"><tbody><tr><td class="mbox-image"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/f/f6/API_-_The_Noun_Project.svg/30px-API_-_The_Noun_Project.svg.png" decoding="async" width="30" height="30" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/f6/API_-_The_Noun_Project.svg/45px-API_-_The_Noun_Project.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/f6/API_-_The_Noun_Project.svg/60px-API_-_The_Noun_Project.svg.png 2x" data-file-width="512" data-file-height="512" /></td><td class="mbox-text">This page is part of the <a href="/wiki/Special:MyLanguage/API:Main_page" title="Special:MyLanguage/API:Main page">MediaWiki Action API</a> documentation.</td></tr></tbody></table> <style data-mw-deduplicate="TemplateStyles:r6605224">.mw-parser-output .tpl-sidebar{background-color:var(--background-color-interactive-subtle,#f8f9fa);border:1px solid var(--border-color-divider,#a2a9b1);color:var(--color-base,#202122);width:22em;padding:.2em;text-align:center;line-height:1.4em;font-size:88%}.mw-parser-output .tpl-sidebar-pagedir-ltr,.mw-parser-output .tpl-sidebar.tpl-sidebar-floatright{float:right;clear:right;margin:.5em 0 1em 1em}.mw-parser-output .tpl-sidebar-pagedir-rtl,.mw-parser-output .tpl-sidebar.tpl-sidebar-floatleft{float:left;clear:left;margin:.5em 1em 1em 0}.mw-parser-output .tpl-sidebar.tpl-sidebar-floatnone{float:none;clear:both;margin:.5em 0 1em 1em}.mw-parser-output .tpl-sidebar>caption{padding-bottom:.2em;font-size:125%;line-height:1.2em;font-weight:bold}.mw-parser-output .tpl-sidebar>tbody>tr>th,.mw-parser-output .tpl-sidebar>tbody>tr>td{padding:0}.mw-parser-output .tpl-sidebar .tpl-sidebar-topimage>td{padding:.4em 0}.mw-parser-output .tpl-sidebar-imagecaption{padding-top:.2em;line-height:1.2em}.mw-parser-output .tpl-sidebar .tpl-sidebar-pretitle>td{padding-top:.4em;line-height:1.2em}.mw-parser-output .tpl-sidebar .tpl-sidebar-topimage+.tpl-sidebar-pretitle>td{padding-top:.2em}.mw-parser-output .tpl-sidebar .tpl-sidebar-title>th{padding:.2em .4em .2em;font-size:145%;line-height:1.2em}.mw-parser-output .tpl-sidebar .tpl-sidebar-pretitle+.tpl-sidebar-title>th{padding-top:0}.mw-parser-output .tpl-sidebar .tpl-sidebar-image>td{padding:.2em 0 .4em}.mw-parser-output .tpl-sidebar .tpl-sidebar-abovebelow>td{padding:.3em .4em;font-weight:bold}.mw-parser-output .tpl-sidebar .tpl-sidebar-heading>th{padding-top:.2em}.mw-parser-output .tpl-sidebar .tpl-sidebar-image~.tpl-sidebar-heading-first>th{padding-top:.4em}.mw-parser-output .tpl-sidebar .tpl-sidebar-content>td{padding-bottom:.2em}.mw-parser-output .tpl-sidebar :not(.tpl-sidebar-heading)+.tpl-sidebar-content-first>td{padding-top:.2em}.mw-parser-output .tpl-sidebar-navbar>td{font-size:115%}.mw-parser-output .tpl-sidebar-pagedir-ltr .tpl-sidebar-navbar>td{text-align:right}.mw-parser-output .tpl-sidebar-pagedir-rtl .tpl-sidebar-navbar>td{text-align:left}</style><table class="vertical-navbox tpl-sidebar tpl-sidebar-pagedir-ltr nowraplinks noprint" role="navigation" style="width:22em; border-spacing: 0.4em 0; text-align: left; padding: 1.5em; padding: min(1.5em, 2%); margin: 0 0 2em 2em; width: 320px; max-width: 40%;"><tbody><tr class="tpl-sidebar-title"> <th class="" style="font-size: 19px; font-weight: 700; padding: 0;"><a href="/wiki/Special:MyLanguage/API:Main_page" title="Special:MyLanguage/API:Main page">MediaWiki Action API</a><a href="/wiki/API:Main_page" title="API:Main page"> </a></th> </tr><tr class="tpl-sidebar-heading tpl-sidebar-heading-first"> <th class="" style="font-size: 16px; font-weight: 700; padding-top: 1em;;">Basics</th> </tr><tr class="tpl-sidebar-content tpl-sidebar-content-first"> <td class="" style=";"> <ul><li><a href="/wiki/Special:MyLanguage/API:Etiquette" title="Special:MyLanguage/API:Etiquette">Etiquette and usage guidelines</a><a href="/wiki/API:Etiquette" title="API:Etiquette"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Query" title="Special:MyLanguage/API:Query">All query modules</a><a href="/wiki/API:Query" title="API:Query"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Properties" title="Special:MyLanguage/API:Properties">All page properties</a><a href="/wiki/API:Properties" title="API:Properties"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Lists" title="Special:MyLanguage/API:Lists">All list modules</a><a href="/wiki/API:Lists" title="API:Lists"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Meta" title="Special:MyLanguage/API:Meta">All meta modules</a><a href="/wiki/API:Meta" title="API:Meta"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Data_formats" title="Special:MyLanguage/API:Data formats">Output formats</a><a href="/wiki/API:Data_formats" title="API:Data formats"> </a></li></ul></td> </tr><tr class="tpl-sidebar-heading"> <th class="" style="font-size: 16px; font-weight: 700; padding-top: 1em;;">Authentication</th> </tr><tr class="tpl-sidebar-content"> <td class="" style=";"> <ul><li><a href="/wiki/Special:MyLanguage/API:Tokens" title="Special:MyLanguage/API:Tokens">Get tokens for data modifying operations</a><a href="/wiki/API:Tokens" title="API:Tokens"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Login" title="Special:MyLanguage/API:Login">Login</a><a href="/wiki/API:Login" title="API:Login"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Logout" title="Special:MyLanguage/API:Logout">Logout</a><a href="/wiki/API:Logout" title="API:Logout"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Assert" title="Special:MyLanguage/API:Assert">Verifying authentication (assertions)</a><a href="/wiki/API:Assert" title="API:Assert"> </a></li></ul></td> </tr><tr class="tpl-sidebar-heading"> <th class="" style="font-size: 16px; font-weight: 700; padding-top: 1em;;">Accounts and Users</th> </tr><tr class="tpl-sidebar-content"> <td class="" style=";"> <ul><li><a href="/wiki/Special:MyLanguage/API:Account_creation" title="Special:MyLanguage/API:Account creation">Create an account</a><a href="/wiki/API:Account_creation" title="API:Account creation"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Block" title="Special:MyLanguage/API:Block">Block or unblock a user</a><a href="/wiki/API:Block" title="API:Block"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Userinfo" title="Special:MyLanguage/API:Userinfo">Get info about the current user</a><a href="/wiki/API:Userinfo" title="API:Userinfo"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Watchlist_feed" title="Special:MyLanguage/API:Watchlist feed">Get the current user's watchlist as a feed</a><a href="/wiki/API:Watchlist_feed" title="API:Watchlist feed"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Options" title="Special:MyLanguage/API:Options">Change user options</a><a href="/wiki/API:Options" title="API:Options"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:User_group_membership" title="Special:MyLanguage/API:User group membership">Change user group membership</a><a href="/wiki/API:User_group_membership" title="API:User group membership"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Emailuser" title="Special:MyLanguage/API:Emailuser">Send an email</a><a href="/wiki/API:Emailuser" title="API:Emailuser"> </a></li></ul></td> </tr><tr class="tpl-sidebar-heading"> <th class="" style="font-size: 16px; font-weight: 700; padding-top: 1em;;">Page Operations</th> </tr><tr class="tpl-sidebar-content"> <td class="" style=";"> <ul><li><a href="/wiki/Special:MyLanguage/API:Edit" title="Special:MyLanguage/API:Edit">Create and edit a page</a><a href="/wiki/API:Edit" title="API:Edit"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Get_the_contents_of_a_page" title="Special:MyLanguage/API:Get the contents of a page">Get the contents of a page</a><a href="/wiki/API:Get_the_contents_of_a_page" title="API:Get the contents of a page"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Upload" title="Special:MyLanguage/API:Upload">Upload a file</a><a href="/wiki/API:Upload" title="API:Upload"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Import" title="Special:MyLanguage/API:Import">Import a page</a><a href="/wiki/API:Import" title="API:Import"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Delete" title="Special:MyLanguage/API:Delete">Delete a page</a><a href="/wiki/API:Delete" title="API:Delete"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Parsing_wikitext" title="Special:MyLanguage/API:Parsing wikitext">Parse content of a page</a><a href="/wiki/API:Parsing_wikitext" title="API:Parsing wikitext"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Watch" title="Special:MyLanguage/API:Watch">Watch or unwatch a page</a><a href="/wiki/API:Watch" title="API:Watch"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Purge" title="Special:MyLanguage/API:Purge">Purge cache for page(s)</a><a href="/wiki/API:Purge" title="API:Purge"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Rollback" title="Special:MyLanguage/API:Rollback">Rollback a page</a><a href="/wiki/API:Rollback" title="API:Rollback"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Move" title="Special:MyLanguage/API:Move">Move a page</a><a href="/wiki/API:Move" title="API:Move"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Patrol" title="Special:MyLanguage/API:Patrol">Patrol a page or revision</a><a href="/wiki/API:Patrol" title="API:Patrol"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Undelete" title="Special:MyLanguage/API:Undelete">Restore revisions of a deleted page</a><a href="/wiki/API:Undelete" title="API:Undelete"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Protect" title="Special:MyLanguage/API:Protect">Change a page's protection level</a><a href="/wiki/API:Protect" title="API:Protect"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:SetPageLanguage" title="Special:MyLanguage/API:SetPageLanguage">Change a page's language</a><a href="/wiki/API:SetPageLanguage" title="API:SetPageLanguage"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Changing_wiki_content" title="Special:MyLanguage/API:Changing wiki content">More...</a><a href="/wiki/API:Changing_wiki_content" title="API:Changing wiki content"> </a></li></ul></td> </tr><tr class="tpl-sidebar-heading"> <th class="" style="font-size: 16px; font-weight: 700; padding-top: 1em;;">Search</th> </tr><tr class="tpl-sidebar-content"> <td class="" style=";"> <ul><li><a href="/wiki/Special:MyLanguage/API:Opensearch" title="Special:MyLanguage/API:Opensearch">Search wiki pages by title (OpenSearch)</a><a href="/wiki/API:Opensearch" title="API:Opensearch"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Search" title="Special:MyLanguage/API:Search">Advanced search for wiki pages by title or text</a><a href="/wiki/API:Search" title="API:Search"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Geosearch" title="Special:MyLanguage/API:Geosearch">Search wiki pages near a location</a><a href="/wiki/API:Geosearch" title="API:Geosearch"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Languagesearch" title="Special:MyLanguage/API:Languagesearch">Search for a language name</a><a href="/wiki/API:Languagesearch" title="API:Languagesearch"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Prefixsearch" title="Special:MyLanguage/API:Prefixsearch">Perform a prefix search for page titles</a><a href="/wiki/API:Prefixsearch" title="API:Prefixsearch"> </a></li></ul></td> </tr><tr class="tpl-sidebar-heading"> <th class="" style="font-size: 16px; font-weight: 700; padding-top: 1em;;">Developer Utilities</th> </tr><tr class="tpl-sidebar-content"> <td class="" style=";"> <ul><li><a href="/wiki/Special:MyLanguage/API:Client_code" title="Special:MyLanguage/API:Client code">Access libraries</a><a href="/wiki/API:Client_code" title="API:Client code"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Cross-site_requests" title="Special:MyLanguage/API:Cross-site requests">Cross-site requests</a><a href="/wiki/API:Cross-site_requests" title="API:Cross-site requests"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Extensions" title="Special:MyLanguage/API:Extensions">Creating an API module in an extension</a><a href="/wiki/API:Extensions" title="API:Extensions"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Calling_internally" title="Special:MyLanguage/API:Calling internally">Using the API in MediaWiki and extensions</a><a href="/wiki/API:Calling_internally" title="API:Calling internally"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Restricting_API_usage" title="Special:MyLanguage/API:Restricting API usage">Restricting API usage</a><a href="/wiki/API:Restricting_API_usage" title="API:Restricting API usage"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Localisation" title="Special:MyLanguage/API:Localisation">Localisation</a><a href="/wiki/API:Localisation" title="API:Localisation"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Implementation_Strategy" title="Special:MyLanguage/API:Implementation Strategy">Implementation Strategy</a><a href="/wiki/API:Implementation_Strategy" title="API:Implementation Strategy"> </a></li></ul></td> </tr><tr class="tpl-sidebar-heading"> <th class="" style="font-size: 16px; font-weight: 700; padding-top: 1em;;">Tutorials</th> </tr><tr class="tpl-sidebar-content"> <td class="" style=";"> <ul><li><a href="/wiki/Special:MyLanguage/API:Tutorial" title="Special:MyLanguage/API:Tutorial">Action API Tutorial</a><a href="/wiki/API:Tutorial" title="API:Tutorial"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Article_ideas_generator" title="Special:MyLanguage/API:Article ideas generator">Article ideas generator</a><a href="/wiki/API:Article_ideas_generator" title="API:Article ideas generator"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Nearby_places_viewer" title="Special:MyLanguage/API:Nearby places viewer">Nearby places viewer</a><a href="/wiki/API:Nearby_places_viewer" title="API:Nearby places viewer"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Picture_of_the_day_viewer" title="Special:MyLanguage/API:Picture of the day viewer">Picture of the day viewer</a><a href="/wiki/API:Picture_of_the_day_viewer" title="API:Picture of the day viewer"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Holidays_viewer" title="Special:MyLanguage/API:Holidays viewer">Holidays viewer</a><a class="mw-selflink selflink"> </a></li></ul></td> </tr><tr class="tpl-sidebar-navbar"> <td style=""><style data-mw-deduplicate="TemplateStyles:r4692751">.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar ul{display:inline;white-space:nowrap}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em;width:6em}</style><a href="/wiki/Template:API" title="Template:API">v</a> · <a class="external text" href="https://www.mediawiki.org/wiki/Template_talk:API">d</a> · <a class="external text" href="https://www.mediawiki.org/w/index.php?title=Template:API&action=edit">e</a></td> </tr> </tbody></table> <div style="overflow:auto"> <style data-mw-deduplicate="TemplateStyles:r4577480">.mw-parser-output .toclimit-2 .toclevel-1 ul,.mw-parser-output .toclimit-3 .toclevel-2 ul,.mw-parser-output .toclimit-4 .toclevel-3 ul,.mw-parser-output .toclimit-5 .toclevel-4 ul,.mw-parser-output .toclimit-6 .toclevel-5 ul,.mw-parser-output .toclimit-7 .toclevel-6 ul{display:none}</style><div style="margin-bottom: .5em; float: none; width: auto;" class="toclimit-4"><meta property="mw:PageProp/toc" /></div> </div> <div class="mw-heading mw-heading2"><h2 id="Overview">Overview</h2></div> This tutorial covers how to create a demo app that fetches holidays and observances for a given date from Wikipedia, with an option to log in to add new holidays. <div style="text-align: center"> <a rel="nofollow" class="external text" href="https://github.com/wikimedia/mediawiki-api-demos/tree/master/apps/holidays-viewer">Download the code from GitHub</a> <a href="https://iw.toolforge.org/holidays-viewer/" class="extiw" title="toolforge:holidays-viewer/">Browse the app on Toolforge</a> </div> The tools and technologies used to create the demo app are: <ul><li><a rel="nofollow" class="external text" href="https://www.python.org/">Python 3</a> and <a rel="nofollow" class="external text" href="https://flask.palletsprojects.com/en/1.1.x/">Flask</a>, a Python framework.</li> <li><a rel="nofollow" class="external text" href="https://jquery.com/">jQuery</a> and <a rel="nofollow" class="external text" href="https://getbootstrap.com/">Bootstrap</a>. They are <a class="external text" href="https://phabricator.wikimedia.org/phame/post/view/65/toolforge_provides_proxied_mirrors_of_cdnjs_and_now_fontcdn_for_your_usage_and_user-privacy/">loaded from Wikimedia Toolforge for privacy reasons</a>.</li> <li><a href="/wiki/Special:MyLanguage/API:Main_page" title="Special:MyLanguage/API:Main page">MediaWiki Action API</a> modules: <a href="/wiki/Special:MyLanguage/API:Parse" title="Special:MyLanguage/API:Parse">API:Parse</a><a href="/wiki/API:Parse" class="mw-redirect" title="API:Parse"> </a>, <a href="/wiki/Special:MyLanguage/API:Login" title="Special:MyLanguage/API:Login">API:Login</a><a href="/wiki/API:Login" title="API:Login"> </a> and <a href="/wiki/Special:MyLanguage/API:Edit" title="Special:MyLanguage/API:Edit">API:Edit</a><a href="/wiki/API:Edit" title="API:Edit"> </a>.</li></ul> <div class="mw-heading mw-heading2"><h2 id="A_step-by-step_process_for_building_this_application">A step-by-step process for building this application</h2></div> <div class="mw-heading mw-heading3"><h3 id="Step_1:_Set_up_Python_and_Flask_development_environment">Step 1: Set up Python and Flask development environment</h3></div> Python comes pre-installed on most Linux distributions. For other operating systems, see the <a rel="nofollow" class="external text" href="https://wiki.python.org/moin/BeginnersGuide/Download">Python beginner's guide</a> for installation instructions. Install Flask by running <code>pip install flask</code>. If you don't have Pip, get it from <a rel="nofollow" class="external text" href="https://pip.pypa.io/en/stable/installation/">the official Pip website</a> <div class="mw-heading mw-heading3"><h3 id="Step_2:_Create_a_simple_Flask_application">Step 2: Create a simple Flask application</h3></div> In your home directory, create a folder named <code>holidays-viewer</code> which will contain all the app's files. Inside the folder, create a file named <code>app.py</code> and place the following code in it: <div style="width: 60%"> <div class="mw-highlight mw-highlight-lang-python3 mw-content-ltr" dir="ltr"><pre>#!/usr/bin/python3 from flask import Flask APP = Flask(__name__) @APP.route("/") def list_holidays(): return "Holidays and observances" if __name__ == "__main__": APP.run() </pre></div> </div> Run the app using the command <code>python app.py</code> and open <code><a rel="nofollow" class="external free" href="http://127.0.0.1:5000/">http://127.0.0.1:5000/</a></code> on your browser. You should see "Holidays and observances" displayed. <div class="mw-heading mw-heading3"><h3 id="Step_3:_Create_the_base_layout">Step 3: Create the base layout</h3></div> The app will have four pages: the homepage, a search page, a login page and an add page. Each page will have some common elements, so we need to create a base layout file called <code>layout.html</code> to contain these elements. Note that we are using <a rel="nofollow" class="external text" href="https://getbootstrap.com/">Bootstrap</a> classes to apply a specific CSS style to an element, <a rel="nofollow" class="external text" href="https://materializecss.com/icons.html">Materialize icons</a> for the add, search and arrow-back icons, and <a rel="nofollow" class="external text" href="https://palletsprojects.com/p/jinja/">Jinja</a> to extend the base layout to other pages and to pass variables from Python to HTML. <div style="display:block;margin-left:0;"><table class="mw-collapsible mw-collapsed" style="margin-top:.2em; border:1px solid silver;text-align:left; width: 100%;"><tbody><tr><th style="font-size:112%;background:#F8FCFF;color:black;text-align:center">$HOME/holidays-viewer/templates/layout.html</th></tr><tr><td style="font-size:112%;background:white;border:solid 1px silver;padding:8px"> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><title>Holidays</title> <link rel="stylesheet" href="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="//tools-static.wmflabs.org/fontcdn/css?family=Material+Icons"> <div class="content bg-secondary rounded m-auto"> <div class="title-bar bg-primary-dark text-white pl-2"> <small>Holidays and observances</small> </div> <div class="header-bar bg-primary text-white shadow p-2"> {% if request.path != url_for('list_holidays') %} <a class=" btn text-white" href="{{ url_for('list_holidays') }}"> <i class="material-icons">arrow_back</i> </a> {% endif %} <h5>{{header}}</h5> <div class="filler"></div> <a class="btn text-white" href="{{ url_for('add') }}"> <i class="material-icons">add</i> </a> <a class="btn text-white" href="{{ url_for('search') }}"> <i class="material-icons">search</i> </a> </div> {% with messages = get_flashed_messages() %} {% if messages %} <div class="alert alert-primary mb-0" role="alert"> {% for message in messages %} {{ message }} {% endfor %} <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> {% endif %} {% endwith %} {% block content %}{% endblock %} </div> <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script> </pre></div> </td></tr></tbody></table></div> Other pages will extend <code>layout.html</code> using the code below: <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre>{% extends "layout.html" %} {% block content %}  {% endblock %} </pre></div> <div class="mw-heading mw-heading3"><h3 id="Step_4:_List_holidays">Step 4: List holidays</h3></div> The root url of the app will trigger the <code>list_holidays(...)</code> function, which lists holidays for a certain date. In the function and throughout the app, <code>holidays_date</code> refers to the date of the holidays to be listed, <code>header</code> refers to the title of the page, and <code>holidays_html</code> refers to the html which contains the holidays to be listed. We'll also be using the <code>render_template(...)</code> function which renders a specific html file from the templates directory. Other arguments added to the function are variables which are being passed to the html file. In <code>app.py</code>, update <code>list_holidays()</code> with the code below: <div class="mw-highlight mw-highlight-lang-python3 mw-content-ltr" dir="ltr"><pre>@APP.route('/', methods=['GET', 'POST']) @APP.route('/<holidays_date>', methods=['GET', 'POST']) def list_holidays(holidays_date=None): holidays_html = "" return render_template("index.html", header=holidays_date.replace('_', ' '), holidays_html=holidays_html) </pre></div> <div style="display:block;margin-left:0;"><table class="mw-collapsible mw-collapsed" style="margin-top:.2em; border:1px solid silver;text-align:left; width: 100%;"><tbody><tr><th style="font-size:112%;background:#F8FCFF;color:black;text-align:center">$HOME/holidays-viewer/templates/index.html</th></tr><tr><td style="font-size:112%;background:white;border:solid 1px silver;padding:8px"> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre>{% extends "layout.html" %} {% block content %} <div class="holidays-html"> {{holidays_html|safe}} </div> {% endblock %} </pre></div> </td></tr></tbody></table></div> <div class="mw-heading mw-heading4"><h4 id="Get_today's_date">Get today's date</h4></div> If no date is specified, we'll list holidays for today's date. To use Python's <a rel="nofollow" class="external text" href="https://docs.python.org/3/library/datetime.html">datetime</a> module to get today's date, import the module with <code>from datetime import datetime</code> then create the following function: <div class="mw-highlight mw-highlight-lang-python3 mw-content-ltr" dir="ltr"><pre>def get_todays_date(): current_month = datetime.now().strftime('%B') current_day = datetime.now().strftime('%d') if current_day.startswith('0'): current_day = current_day.replace('0', '') return current_month + "_" + current_day </pre></div> Call the function in <code>list_holidays(...)</code>: <div class="mw-highlight mw-highlight-lang-python3 mw-content-ltr" dir="ltr"><pre>if holidays_date is None: holidays_date = get_todays_date() </pre></div> <div class="mw-heading mw-heading4"><h4 id="Get_the_holidays_to_be_listed">Get the holidays to be listed</h4></div> Once we have the date, we get the holidays for that date. Wikipedia has a page for each date and the holidays are under a section titled "Holidays and observances". To get the holidays, we need to get its section number and the content in that section number. Create a function to get the section number using <a href="/wiki/Special:MyLanguage/API:Parse" title="Special:MyLanguage/API:Parse">API:Parse</a><a href="/wiki/API:Parse" class="mw-redirect" title="API:Parse"> </a>: <div class="mw-highlight mw-highlight-lang-python3 mw-content-ltr" dir="ltr"><pre>def get_holidays_section(url, page, date_to_get): params = { "format":"json", "action":"parse", "prop":"sections", "page":page } response = S.get(url=url, params=params) data = response.json() sections = data['parse']['sections'] section_number = "0" for index, value in enumerate(sections): if value['anchor'] == "Holidays_and_observances": section_number = index + 1 if url == TEST_URL: if value['anchor'] == date_to_get: section_number = index + 1 return section_number </pre></div> Create a function called <code>get_holidays(...)</code> to get the holidays in that section using <a href="/wiki/Special:MyLanguage/API:Parse" title="Special:MyLanguage/API:Parse">API:Parse</a><a href="/wiki/API:Parse" class="mw-redirect" title="API:Parse"> </a> as well, then call the functions in <code>list_holidays(...)</code>: <div class="mw-highlight mw-highlight-lang-python3 mw-content-ltr" dir="ltr"><pre>section_number = get_holidays_section(URL, holidays_date, None) holidays = get_holidays(URL, holidays_date, section_number) holidays_html = holidays </pre></div> <div class="mw-heading mw-heading4"><h4 id="Update_holiday_links">Update holiday links</h4></div> The HTML of the holidays returned contains <a href="/wiki/Special:MyLanguage/Help:Links#Internal_links" title="Special:MyLanguage/Help:Links">internal links</a> that point to those holidays, e.g "<code>/wiki/New_Years_Day</code>". We need to prepend "<code>//en.wikipedia.org</code>" to these links using jQuery to make them external links in our app, and make them open in a new tab. To do that, add the following code to <code>$HOME/holidays-viewer/static/update-links.js</code>: <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>$( document ).ready( function() { $( ".holidays-html a" ).attr( "target", "_blank" ); $( ".holidays-html a" ).attr( "href", function( i, href ) { return "//en.wikipedia.org" + href; }); }); </pre></div> Then add jQuery to <code>layout.html</code> using: <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="static/update-links.js"></script> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Step_5:_Search_for_holidays_of_other_dates">Step 5: Search for holidays of other dates</h3></div> To get holidays for other dates, create a search route to display a form that collects the month and day to search for: <div class="mw-highlight mw-highlight-lang-python3 mw-content-ltr" dir="ltr"><pre>@APP.route("/search") def search(): return render_template("search.html", header="Search date") </pre></div> <div style="display:block;margin-left:0;"><table class="mw-collapsible mw-collapsed" style="margin-top:.2em; border:1px solid silver;text-align:left; width: 100%;"><tbody><tr><th style="font-size:112%;background:#F8FCFF;color:black;text-align:center">$HOME/holidays-viewer/templates/search.html</th></tr><tr><td style="font-size:112%;background:white;border:solid 1px silver;padding:8px"> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre>{% extends "layout.html" %} {% block content %} <div class="instructions m-3"> Search for holidays by date </div> <div class="base rounded shadow bg-white m-3"> <form class="m-auto" action="/" method="POST"> <fieldset> <div class="label-field">Select Month</div> <select class="bg-secondary mb-5 border-0" name="monthList"> <option value="January">January <option value="February">February <option value="March">March <option value="April">April <option value="May">May <option value="June">June <option value="July">July <option value="August">August <option value="September">September <option value="October">October <option value="November">November <option value="December">December </select> </fieldset> <fieldset> <div class="label-field">Select Day</div> <select class="bg-secondary mb-5 border-0" name="dayList"> <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 <option value="5">5 <option value="6">6 <option value="7">7 <option value="8">8 <option value="9">9 <option value="10">10 <option value="11">11 <option value="12">12 <option value="13">13 <option value="14">14 <option value="15">15 <option value="16">16 <option value="17">17 <option value="18">18 <option value="19">19 <option value="20">20 <option value="21">21 <option value="22">22 <option value="23">23 <option value="24">24 <option value="25">25 <option value="26">26 <option value="27">27 <option value="28">28 <option value="29">29 <option value="30">30 <option value="31">31 </select> </fieldset> <button type="submit" name="search" class="bg-primary btn btn-submit text-white">Submit</button> </form> </div> {% endblock %} </pre></div> </td></tr></tbody></table></div> Once the search form has been submitted, update <code>holidays_date</code> to be the date that has been entered. To do that, add the following code to <code>list_holidays(...)</code>: <div class="mw-highlight mw-highlight-lang-python3 mw-content-ltr" dir="ltr"><pre>if request.method == 'POST' and 'search' in request.form: search_month = str(request.form.get('monthList')) search_day = str(request.form.get('dayList')) holidays_date = search_month +"_"+search_day </pre></div> <div class="mw-heading mw-heading3"><h3 id="Step_6:_Add_a_holiday">Step 6: Add a holiday</h3></div> The page to which we'll be adding a new holiday is protected from edits by anonymous users, so we need to log in using <a href="/wiki/Special:MyLanguage/API:Login#clientlogin" title="Special:MyLanguage/API:Login">API:Login#clientlogin</a> first. To add a holiday, send a request to <a href="/wiki/Special:MyLanguage/API:Edit" title="Special:MyLanguage/API:Edit">API:Edit</a><a href="/wiki/API:Edit" title="API:Edit"> </a> with the date and description of the holiday. The edit adds new holidays to this page on Test Wikipedia: <a class="external text" href="https://test.wikipedia.org/wiki/Sandbox/Holidays_and_observances">Sandbox/Holidays_and_observances</a>. This is to prevent adding test holidays to English Wikipedia. After the holiday is added, redirect to the homepage where the holidays added will also be shown, and formatted in bold to differentiate them from the real holidays. To fetch the test holidays alongside the real holidays, update <code>list_holidays(...)</code>: <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>test_section_number = get_holidays_section(TEST_URL, TEST_PAGE, holidays_date) test_holidays = get_holidays(TEST_URL, TEST_PAGE, test_section_number) holidays_html = test_holidays + holidays flash("Holidays added through this app are in bold") </pre></div> <div style="display:block;margin-left:0;"><table class="mw-collapsible mw-collapsed" style="margin-top:.2em; border:1px solid silver;text-align:left; width: 100%;"><tbody><tr><th style="font-size:112%;background:#F8FCFF;color:black;text-align:center">$HOME/holidays-viewer/templates/login.html</th></tr><tr><td style="font-size:112%;background:white;border:solid 1px silver;padding:8px"> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre>{% extends "layout.html" %} {% block content %} <div class="instructions m-3"> <p>You need to login to Wikipedia in order to add a new holiday </div> <div class="base rounded shadow bg-white m-3"> <form class="m-auto" action="/login" method="POST"> <div class="form-group"> <div class="form-field"> <div class="label-field">Username</div> <input class="bg-secondary mb-5 border-0" name="username"> </div> <div class="form-field"> <div class="label-field">Password</div> <input class="bg-secondary mb-5 border-0" type="password" name="password"> </div> </div> <button type="submit" name="login" class="bg-primary btn btn-submit text-white">Login</button> </form> </div> {% endblock %} </pre></div> </td></tr></tbody></table></div> <div style="display:block;margin-left:0;"><table class="mw-collapsible mw-collapsed" style="margin-top:.2em; border:1px solid silver;text-align:left; width: 100%;"><tbody><tr><th style="font-size:112%;background:#F8FCFF;color:black;text-align:center">$HOME/holidays-viewer/templates/add.html</th></tr><tr><td style="font-size:112%;background:white;border:solid 1px silver;padding:8px"> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre>{% extends "layout.html" %} {% block content %} <div class="instructions m-3"> <p>Add a new test holiday </div> <div class="base rounded shadow bg-white m-3"> <form class="m-auto" action="" method="POST"> <div class="form-group"> <div class="form-field"> <div class="label-field">Date [MMMM dd]</div> <input class="bg-secondary border-0 mb-5" name="date" placeholder="e.g April 1"> </div> <div class="form-field"> <div class="label-field">Description</div> <input class="bg-secondary border-0 mb-5" name="description" placeholder="e.g April fools' day"> </div> </div> <button type="submit" name="add" class="bg-primary btn btn-submit text-white">Add</button> </form> </div> {% endblock %} </pre></div> </td></tr></tbody></table></div> <div class="mw-heading mw-heading3"><h3 id="Step_7:_Styling_the_app">Step 7: Styling the app</h3></div> To add more style to our app, create a stylesheet named <code>style.css</code> and link to it from <code>layout.html</code> by adding <code class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><link rel="stylesheet" href="static/style.css"></code>. <div style="display:block;margin-left:0;"><table class="mw-collapsible mw-collapsed" style="margin-top:.2em; border:1px solid silver;text-align:left; width: 100%;"><tbody><tr><th style="font-size:112%;background:#F8FCFF;color:black;text-align:center">$HOME/holidays-viewer/static/style.css</th></tr><tr><td style="font-size:112%;background:white;border:solid 1px silver;padding:8px"> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>.content { width: 420px; min-height: 100vh; } .holidays-html{ overflow-y: auto; overflow-x: hidden; max-height: 88vh; scrollbar-width: thin; } .base { height: 400px; display: flex; } input, select { width: 300px; height: 40px; } .btn-submit { width: 300px; } .btn { cursor: pointer; align-content: center; background-color: transparent; } .bg-primary { background-color: #36c !important; } .bg-primary-dark { background-color: #2a4b8d !important; } .bg-secondary { background-color: #eaecf0 !important; } .header-bar { height: 48px; display: flex; flex: 1; align-items: center; } .filler { flex-grow: 1; text-align: center } h2 { display: none; } ul { margin: 5px; padding: 0; } li { list-style-type: none; margin-bottom: 4px; background-color: white; padding: 8px; border-radius: 5px; } ul li li { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); } </pre></div> </td></tr></tbody></table></div> <div class="mw-heading mw-heading2"><h2 id="Application_layout">Application layout</h2></div> At this point, the structure of your app should be: <pre>$HOME/holidays-viewer ├── templates/ │ └── add.html └── index.html └── layout.html └── login.html └── search.html ├── static/ │ └── style.css └── update-links.js ├── app.py </pre> With <code>app.py</code> and <code>layout.html</code> being: <div style="display:block;margin-left:0;"><table class="mw-collapsible mw-collapsed" style="margin-top:.2em; border:1px solid silver;text-align:left; width: 100%;"><tbody><tr><th style="font-size:112%;background:#F8FCFF;color:black;text-align:center">$HOME/holidays-viewer/app.py</th></tr><tr><td style="font-size:112%;background:white;border:solid 1px silver;padding:8px"> <div class="mw-highlight mw-highlight-lang-python3 mw-content-ltr" dir="ltr"><pre>#!/usr/bin/python3 """ app.py MediaWiki API Demos Holidays viewer: A demo app that fetches the day's holidays from Wikipedia with options to search for holidays of other dates, and login to add new holidays. MIT license """ from datetime import datetime from flask import Flask, render_template, flash, request, url_for, redirect import requests APP = Flask(__name__) APP.secret_key = 'your_secret_key' URL = "https://en.wikipedia.org/w/api.php" TEST_URL = "https://test.wikipedia.org/w/api.php" TEST_PAGE = "Sandbox/Holidays_and_observances" S = requests.Session() IS_LOGGED_IN = False @APP.route('/', methods=['GET', 'POST']) @APP.route('/<holidays_date>', methods=['GET', 'POST']) def list_holidays(holidays_date=None): """ Lists holidays for the current date or a custom date """ if holidays_date is None: holidays_date = get_todays_date() # Update date to a custom date if request.method == 'POST' and 'search' in request.form: search_month = str(request.form.get('monthList')) search_day = str(request.form.get('dayList')) holidays_date = search_month +"_"+search_day # Get the section numbers for the holidays on Wikipedia and for those on the test page section_number = get_holidays_section(URL, holidays_date, None) test_section_number = get_holidays_section(TEST_URL, TEST_PAGE, holidays_date) holidays = get_holidays(URL, holidays_date, section_number) test_holidays = get_holidays(TEST_URL, TEST_PAGE, test_section_number) holidays_html = test_holidays + holidays flash('Holidays added through this app are in bold') return render_template("index.html", header=holidays_date.replace('_', ' '), holidays_html=holidays_html) def get_todays_date(): """ Get the current month as text and the current day as a number """ current_month = datetime.now().strftime('%B') current_day = datetime.now().strftime('%d') if current_day.startswith('0'): current_day = current_day.replace('0', '') return current_month + "_" + current_day def get_holidays_section(url, page, date_to_get): """ Get the section number for holidays on Wikipedia and holidays on the test page """ params = { "format":"json", "action":"parse", "prop":"sections", "page":page } response = S.get(url=url, params=params) data = response.json() sections = data['parse']['sections'] section_number = "0" for index, value in enumerate(sections): if value['anchor'] == "Holidays_and_observances": section_number = index + 1 if url == TEST_URL: if value['anchor'] == date_to_get: section_number = index + 1 return section_number def get_holidays(url, page, section_number): """ Get the html which contains holidays """ params = { "format":"json", "action":"parse", "prop":"text", "page": page, "section": section_number, "disableeditsection":1 } response = S.get(url=url, params=params) data = response.json() text = data['parse']['text']['*'] return text @APP.route("/search") def search(): """ Search for holidays of custom dates """ return render_template("search.html", header="Search date") @APP.route("/login", methods=['GET', 'POST']) def login(): """ Login to Wikipedia """ if request.method == 'POST' and 'login' in request.form: params_0 = { "action": "query", "meta": "tokens", "type": "login", "format": "json" } response = S.get(url=URL, params=params_0) data = response.json() login_token = data['query']['tokens']['logintoken'] params_1 = { "action": "clientlogin", "username": str(request.form.get('username')), "password": str(request.form.get('password')), "loginreturnurl": "http://127.0.0.1:5000/login", "logintoken": login_token, "format": "json" } response = S.post(url=URL, data=params_1) data = response.json() if data['clientlogin']['status'] != 'PASS': flash('Oops! Something went wrong -- ' + data['clientlogin']['messagecode']) else: global IS_LOGGED_IN IS_LOGGED_IN = True flash('Login success! Welcome, ' + data['clientlogin']['username'] + '!') return redirect(url_for('add')) return render_template("login.html", header="Login") @APP.route("/add", methods=['GET', 'POST']) def add(): """ Add a new holiday to a test page and redirect to that date's holidays to show the added holidays """ if not IS_LOGGED_IN: return redirect(url_for('login')) if request.method == 'POST' and 'add' in request.form: # Wiki markup to format the added holiday's text as a list item and in bold holiday_text = "* '''" + str(request.form.get('description')) + "'''" date = str(request.form.get('date')) params_2 = { "action": "query", "meta": "tokens", "format": "json" } response = S.get(url=TEST_URL, params=params_2) data = response.json() csrf_token = data['query']['tokens']['csrftoken'] params_4 = { "action": "edit", "title": TEST_PAGE, "token": csrf_token, "format": "json", "section": "new", "sectiontitle": date, "text": holiday_text, } response = S.post(url=TEST_URL, data=params_4) data = response.json() if data['edit']['result'] != 'Success': flash('Oops! Something went wrong -- ' + data['clientlogin']['messagecode']) else: flash('New holiday added successfully!') return redirect(url_for('list_holidays', holidays_date=date.replace(' ', '_'))) return render_template("add.html", header="Add holiday") if __name__ == "__main__": APP.run() </pre></div> </td></tr></tbody></table></div> <div style="display:block;margin-left:0;"><table class="mw-collapsible mw-collapsed" style="margin-top:.2em; border:1px solid silver;text-align:left; width: 100%;"><tbody><tr><th style="font-size:112%;background:#F8FCFF;color:black;text-align:center">$HOME/holidays-viewer/templates/layout.html</th></tr><tr><td style="font-size:112%;background:white;border:solid 1px silver;padding:8px"> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><title>Holidays</title> <link rel="stylesheet" href="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="//tools-static.wmflabs.org/fontcdn/css?family=Material+Icons"> <link rel="stylesheet" href="static/style.css"> <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="static/update-links.js"></script> <div class="content bg-secondary rounded m-auto"> <div class="title-bar bg-primary-dark text-white pl-2"> <small>Holidays and observances</small> </div> <div class="header-bar bg-primary text-white shadow p-2"> {% if request.path != url_for('list_holidays') %} <a class=" btn text-white" href="{{ url_for('list_holidays') }}"> <i class="material-icons">arrow_back</i> </a> {% endif %} <h5>{{header}}</h5> <div class="filler"></div> <a class="btn text-white" href="{{ url_for('add') }}"> <i class="material-icons">add</i> </a> <a class="btn text-white" href="{{ url_for('search') }}"> <i class="material-icons">search</i> </a> </div> {% with messages = get_flashed_messages() %} {% if messages %} <div class="alert alert-primary mb-0" role="alert"> {% for message in messages %} {{ message }} {% endfor %} <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> {% endif %} {% endwith %} {% block content %}{% endblock %} </div> <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script> </pre></div> </td></tr></tbody></table></div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:List-holidays.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/9/96/List-holidays.png/220px-List-holidays.png" decoding="async" width="220" height="323" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/96/List-holidays.png/330px-List-holidays.png 1.5x, //upload.wikimedia.org/wikipedia/commons/9/96/List-holidays.png 2x" data-file-width="420" data-file-height="616" /></a><figcaption>Holidays viewer homepage screenshot</figcaption></figure> <div class="mw-heading mw-heading2"><h2 id="Next_steps">Next steps</h2></div> <ul><li>Contribute a demo app that you have developed using the MediaWiki API to this <a rel="nofollow" class="external text" href="https://github.com/wikimedia/MediaWiki-Action-API-Code-Samples">code samples repository</a>.</li></ul> <div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2></div> <ul><li><a href="/wiki/Special:MyLanguage/API:Main_page" title="Special:MyLanguage/API:Main page">API:Main page</a><a href="/wiki/API:Main_page" title="API:Main page"> </a> — The quick start guide for the MediaWiki Action API.</li> <li><a href="/wiki/Special:MyLanguage/API:Parsing_wikitext" title="Special:MyLanguage/API:Parsing wikitext">API:Parsing wikitext</a><a href="/wiki/API:Parsing_wikitext" title="API:Parsing wikitext"> </a> — Parses the content of a page and obtain the output.</li> <li><a href="/wiki/Special:MyLanguage/API:Edit" title="Special:MyLanguage/API:Edit">API:Edit</a><a href="/wiki/API:Edit" title="API:Edit"> </a> — Edits a page.</li> <li><a href="/wiki/Special:MyLanguage/API:Login" title="Special:MyLanguage/API:Login">API:Login</a><a href="/wiki/API:Login" title="API:Login"> </a> — Allows logging in to a wiki.</li></ul>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://www.mediawiki.org/w/index.php?title=API:Holidays_viewer&oldid=6749968">https://www.mediawiki.org/w/index.php?title=API:Holidays_viewer&oldid=6749968</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:Categories" title="Special:Categories">Category</a>: <ul><li><a href="/wiki/Category:MediaWiki_action_API" title="Category:MediaWiki action API">MediaWiki action API</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 11 September 2024, at 21:35.</li> <li id="footer-info-copyright">Text is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. Text in <a class="external text" href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents">the Help: namespace</a> is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC0 License</a>. By using this site, you agree to the <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> and <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy Policy</a>.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Project:About">About mediawiki.org</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Project:General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/www.mediawiki.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//m.mediawiki.org/w/index.php?title=API:Holidays_viewer&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.log.warn("This page is using the deprecated ResourceLoader module \"mediawiki.ui.button\".\n[1.41] Please use Codex. See migration guidelines: https://www.mediawiki.org/wiki/Codex/Migrating_from_MediaWiki_UI");mw.config.set({"wgHostname":"mw-web.codfw.main-6df7948d6c-ncj9r","wgBackendResponseTime":120,"wgPageParseReport":{"limitreport":{"cputime":"0.591","walltime":"1.913","ppvisitednodes":{"value":4791,"limit":1000000},"postexpandincludesize":{"value":52138,"limit":2097152},"templateargumentsize":{"value":23052,"limit":2097152},"expansiondepth":{"value":15,"limit":100},"expensivefunctioncount":{"value":44,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":93693,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 1608.693 1 -total"," 15.28% 245.757 1 Template:API"," 12.51% 201.219 60 Template:Ll"," 11.95% 192.161 1 Template:Sidebar"," 7.40% 119.109 77 Template:Pagelang"," 7.29% 117.249 120 Template:Translatable"," 2.87% 46.093 1 Template:Mbox"," 2.61% 42.058 8 Template:Collapse_top"," 1.53% 24.593 19 Template:Dir"," 1.09% 17.549 7 Template:TNTN"]},"scribunto":{"limitreport-timeusage":{"value":"0.119","limit":"10.000"},"limitreport-memusage":{"value":1400885,"limit":52428800}},"cachereport":{"origin":"mw-web.eqiad.main-59856bd7d8-tnlrh","timestamp":"20241119180755","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>