![\"FooEvents](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/fooevents-calendar-shortcodes-thumbnails-blog1.png\" "\\"\\"")
<\/p>\n<\/p>\n
In WordPress, a shortcode is a small piece of code that allows you to add dynamic content to your pages, posts, and widgets. Shortcodes are represented by square brackets [ ] and are used to embed various types of content such as images, audio, video, forms, and more.<\/p>\n
If you’re using FooEvents to manage your events and bookings, you may want to display events as a calendar on your website (see demo<\/a>). This is easily achieved using the FooEvents Calendar<\/a> plugin and shortcodes. In this post, we will use the FooEvents Calendar shortcodes to quickly embed WordPress event calendars on posts and pages. These shortcodes can also be used to display calendars using most page builders such as the built-in WordPress Blocks<\/a>, Elementor<\/a>, Beaver Builder<\/a> and Divi<\/a>.<\/p>\n FooEvents provides two ways to create events on your WordPress site. The first option is to add event details to a standard WordPress post or page using the FooEvents Calendar<\/a> plugin. This is done when editing the post or page. The FooEvents Calendar plugin will then add a basic event settings form to the bottom of the page, where you can set the date and time of the event.<\/p>\n The second and more sophisticated option is to use the FooEvents for WooCommerce<\/a> plugin and extensions to add event, booking\u00a0and ticketing functionality to your WooCommerce products.<\/p>\n To illustrate how various events will display in the calendar, I have setup the following three events using FooEvents:<\/p>\n Pssst: If you are new to FooEvents and would like to take a look under the hood, request access to an admin demo environment<\/a> where you can test out all the latest FooEvents plugins from the WordPress dashboard.<\/em><\/p>\n Next, I created a new WordPress page (or post) and add a shortcode block with the following shortcode:<\/p>\n After publishing the page, the following calendar will display on the front-end.<\/p>\n Now that we have embedded the calendar, we can customize it based on our preferences and requirements. This is achieved by adding various properties to the shortcode.<\/p>\n Change calendar start day<\/strong><\/p>\n Set the calendar columns to start on a Monday or Sunday.<\/p>\n Display particular month<\/strong><\/p>\n Set the default date the calendar must display when first loading. This is useful if your event only starts at a later date.<\/p>\n Filter by category<\/strong><\/p>\n Create calendars for different groups of events. This is only applicable to WooCommerce events. Simply tag the relevant events to a WooCommerce category and specify the category slug using the include_cat<\/em> property.<\/p>\n Specify number of events to display<\/strong><\/p>\n Limit the number of events to display on the calendar. By default, all events taking place within the month will display.<\/p>\n Display multiple calendars per page<\/strong><\/p>\n You can embed multiple calendars per page. To do so, simply ensure that each shortcode specifies an unique calendar ID.<\/p>\n Set the\u00a0time format<\/strong><\/p>\n Customize the time format using the supported FullCalendar date formats: https:\/\/fullcalendar.io\/docs\/v1\/formatDate<\/a><\/p>\n Hide weekends<\/strong><\/p>\n The FooEvents calendar includes various display modes and can be set using the defaultView<\/em> property.<\/p>\n Display list view (day)<\/strong><\/p>\n Display list view (week)<\/strong><\/p>\n Display list view (month)<\/strong><\/p>\n Display list view (year)<\/strong><\/p>\n Show specific events<\/strong><\/p>\n Show multiple events by specifying the ID of the product, post or page. You can display a single event, or multiple events by entering a comma-separated list of ID’s.<\/p>\n You can modify the theme used by your calendar globally by setting the Calendar theme option in the main FooEvents Settings.<\/p>\n WordPress page builders are plugins that allow users to create and design custom layouts for their WordPress pages and posts without any coding or programming knowledge. Since shortcodes are standard WordPress functionality, most WordPress page builders support shortcodes. The following example illustrates how to use Elementor<\/a> to output the FooEvent Calendar shortcode.<\/p>\n![\"Screenshot](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-13.54.17-1.png\" "\\"\\"")
<\/p>\n![\"Screenshot](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-16.05.31.png\" "\\"\\"")
<\/p>\n\n
[fooevents_calendar]<\/pre>\n
![\"Screenshot](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-12.54.09-1.png\" "\\"\\"")
<\/p>\n![\"Screenshot](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-15.17.48.png\" "\\"\\"")
<\/p>\nCustomizing the Event Calendar<\/strong><\/h2>\n
[fooevents_calendar firstDay=\"0\"] 0 = Sunday, 1 = Monday etc.<\/pre>\n
![\"FooEvents](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-13.11.42.png\" "\\"\\"")
<\/p>\n[fooevents_calendar defaultDate= \"2023-09-01\"]<\/pre>\n
![\"WooCommerce](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-15.25.49.png\" "\\"\\"")
<\/p>\n[fooevents_calendar include_cat=\"featured\"]<\/pre>\n
[fooevents_calendar num=10]<\/pre>\n
[fooevents_calendar id=\"cal1\"], [fooevents_calendar id=\"cal2\"] etc.<\/pre>\n
[fooevents_calendar timeFormat=\"H.mm\"]<\/pre>\n
![\"\"](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-15.19.31.png\" "\\"\\"")
<\/p>\n[fooevents_calendar weekends=\"false\"]<\/pre>\n
Display modes<\/h2>\n
[fooevents_calendar defaultView=\"listDay\"]<\/pre>\n
![\"FooEvents](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-15.21.50.png\" "\\"\\"")
<\/p>\n[fooevents_calendar defaultView=\"listWeek\"]<\/pre>\n
![\"FooEvents](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-15.22.51.png\" "\\"\\"")
<\/p>\n[fooevents_calendar defaultView=\"listMonth\"]<\/pre>\n
![\"FooEvents](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-15.23.29.png\" "\\"\\"")
<\/p>\n[fooevents_calendar defaultView=\"listYear\"]<\/pre>\n
![\"FooEvents](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-15.24.27.png\" "\\"\\"")
<\/p>\n![\"FooEvents](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-13.21.13.png\" "\\"\\"")
<\/p>\n[fooevents_calendar post=\"123,456\"]<\/pre>\n
Calendar colors<\/h2>\n
\n
Page builders<\/h2>\n
![\"\"](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-13.37.51.png\" "\\"\\"")
<\/p>\nOther Shortcodes<\/strong><\/h3>\n