{"id":3824,"date":"2024-02-20T09:48:36","date_gmt":"2024-02-20T14:48:36","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?post_type=reference-article&#038;p=3824"},"modified":"2024-02-28T12:10:36","modified_gmt":"2024-02-28T17:10:36","slug":"localist-calendar-widgets","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/localist-calendar-widgets\/","title":{"rendered":"Localist Calendar Widgets"},"content":{"rendered":"\n<p>Keeping one&#8217;s audience up-to-date about campus events on the web can be a challenge. And building web content that displays this information in a clear and concise manner can be a big time sink. The Localist Calendar Widget builder aims to address both of these issues. Posting relevant campus event information in a thoughtful manner has never been easier.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a widget?<\/h2>\n\n\n\n<p>A widget is a calendar embed that pulls event information from Localist and displays it on a webpage. This saves content maintainers time when sharing campus event information on their websites. Events display in either grid or list formats, and update based on parameters set in the widget builder.<\/p>\n\n\n\n<p>If you&#8217;ve used WordPress for many years, you might be familiar with the term &#8220;widget&#8221; from WordPress. Localist widgets are completely different and do not require your WordPress theme to support widgets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Widget Builder<\/h2>\n\n\n<div class=\"wp-block-ncst-fancy-paragraph ncst-fancy-paragraph-sixty ncst-fancy-paragraph\"><p class=\"fancy-paragraph__text fancy-paragraph-left\">To begin building widgets, content maintainers can go to the University Calendar website. Logging in is not required to begin using the widget builder. Simply click the link provided on the right to begin.<\/p><div class=\"wp-block-ncst-fp-accompaniment ncst-accompaniment\"><ul class=\"wp-block-ncst-fp-text-links ncst-link-list\"><div class=\"link-list__container\"><li class=\"ncst-component__bold-link-container wp-block-ncst-bold-link\">\n      <a \n      href=\"https:\/\/calendar.ncsu.edu\/help\/widget\"\n      class=\"ncst-component__bold-link text-link\"\n                >\n    <span class=\"text\">Start using the Localist widget builder<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-bold\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-bold\">\n\t\t<\/svg><\/span>\n    <\/a>\n      <\/li>\n  <\/div><\/ul>\n\n<\/div>\n\n<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Templates &amp; Settings<\/h2>\n\n\n\n<p>Once on the widget builder page, start by choosing a template. There are currently 4 templates to choose from. To help decide which template you would like to use, see examples of each one below:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Default<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/default-events.png\" data-fullsize=\"975x666\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"975\" height=\"666\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/default-events.png\" alt=\"Example of default events Localist calendar widget\" class=\"wp-image-3826\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/default-events.png 975w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/default-events-300x205.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/default-events-768x525.png 768w\" sizes=\"auto, (max-width: 975px) 100vw, 975px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Grid (Detailed)<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-events.png\" data-fullsize=\"1267x524\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"424\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-events-1024x424.png\" alt=\"Example of default grid Localist calendar widget\" class=\"wp-image-3827\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-events-1024x424.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-events-300x124.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-events-768x318.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-events.png 1267w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Grid (Red)<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-red-events.png\" data-fullsize=\"1181x403\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"349\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-red-events-1024x349.png\" alt=\"Example of red grid events Localist calendar widget\" class=\"wp-image-3828\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-red-events-1024x349.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-red-events-300x102.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-red-events-768x262.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-red-events.png 1181w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Grid (White)<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-events-white.png\" data-fullsize=\"1283x533\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"425\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-events-white-1024x425.png\" alt=\"Example of white grid events Localist calnedar widget\" class=\"wp-image-3829\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-events-white-1024x425.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-events-white-300x125.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-events-white-768x319.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/grid-events-white.png 1283w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Configuring Settings &amp; Generating Shortcode<\/h3>\n\n\n\n<p>After choosing your desired template, there are several settings you can configure. These settings allow you to choose what information displays in your widget. It&#8217;s up to you what you include &#8211; or don&#8217;t include.<\/p>\n\n\n<div class=\"wp-block-ncst-fancy-paragraph ncst-fancy-paragraph-sixty ncst-fancy-paragraph\"><p class=\"fancy-paragraph__text fancy-paragraph-left\">Finally, after configuring the widget settings, generate the embed code. This embed code, used in tandem with the Shortcode block, allows you to place the widget on your website. There is also an option to preview the widget before adding it to a webpage.<\/p><div class=\"wp-block-ncst-fp-accompaniment ncst-accompaniment\"><ul class=\"wp-block-ncst-fp-text-links ncst-link-list\"><div class=\"link-list__container\"><li class=\"ncst-component__bold-link-container wp-block-ncst-bold-link\">\n      <a \n      href=\"#shortcode-example\"\n      class=\"ncst-component__bold-link text-link\"\n                >\n    <span class=\"text\">See an example of this process provided below.<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-bold\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-bold\">\n\t\t<\/svg><\/span>\n    <\/a>\n      <\/li>\n  <\/div><\/ul>\n\n<\/div>\n\n<\/div>\n\n\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/generate-embed-code.png\" data-fullsize=\"500x261\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"261\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/generate-embed-code.png\" alt=\"Example of Generate Embed Code button\" class=\"wp-image-3904\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/generate-embed-code.png 500w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/generate-embed-code-300x157.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><figcaption class=\"wp-element-caption\">Clicking the Generate Embed Code button will produce code that you you can place on your webpages.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/embed-code.png\" data-fullsize=\"530x327\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"530\" height=\"327\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/embed-code.png\" alt=\"Example of embed code for a Calendar Widget\" class=\"wp-image-3905\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/embed-code.png 530w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/embed-code-300x185.png 300w\" sizes=\"auto, (max-width: 530px) 100vw, 530px\" \/><\/a><figcaption class=\"wp-element-caption\">Example of embed code. Content maintainers will highlight and copy their embed code. Then they can paste it into a shortcode block to display the widget on a webpage.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\" id=\"shortcode-example\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/calendar-widget-shortcode-demo.gif\" data-fullsize=\"1330x762\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1330\" height=\"762\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2024\/02\/calendar-widget-shortcode-demo.gif\" alt=\"\" class=\"wp-image-3907\"\/><\/a><figcaption class=\"wp-element-caption\">Example of embed code generation and adding the widget to a webpage via a shortcode.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Need help?<\/h2>\n\n\n\n<p>Have questions? Feel free to reach out with any questions or concerns at\u00a0<a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">go.ncsu.edu\/ucomm-dev-request<\/a>.<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"","ncst_dynamicHeaderData":"","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","_links_to":"","_links_to_target":""},"availability":[72,71,50,49],"content-type":[74],"class_list":["post-3824","reference-article","type-reference-article","status-publish","hentry","availability-nc-state-premium-add-on","availability-nc-state-pro-add-on","availability-nc-state-stories","availability-nc-state-theme","content-type-web-application"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/3824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/reference-article"}],"version-history":[{"count":0,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/3824\/revisions"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=3824"}],"wp:term":[{"taxonomy":"availability","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/availability?post=3824"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/content-type?post=3824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}