--- title: How do I edit the Calendar Preset? description: Learn how to edit the Calendar preset by adjusting its colors and styles to match your website’s design and improve usability --- [Skip to content](https://success.ministrydesigns.help/how-do-i-edit-the-calendar-preset#main-content) English Show submenu for translations [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) [![MD Logo 1\_Black-2](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-2.png?width=200&height=73&name=MD%20Logo%201_Black-2.png)](https://ministrydesigns.com/) Open main navigation Close main navigation - English Show submenu for translations - [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) How can we help you? - There are no suggestions because the search field is empty. 1. [Ministry Designs Success Hub](https://success.ministrydesigns.help/) 2. [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega) 3. [Design](https://success.ministrydesigns.help/sites-formerly-omega#design) # How do I edit the Calendar Preset? ## Style the Calendar Widget in Extensions 1\. The Calendar widget (available in [Small Groups](https://success.ministrydesigns.help/how-do-i-edit-the-small-groups-home-page), and [Events](https://success.ministrydesigns.help/how-to-edit-events-home-page)) has four presets. Click Preset 1 ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/5112d7db-534e-43d4-a93d-79791df9163e/ascreenshot.jpeg?tl_px=0,5&br_px=859,486&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=220,212) ### General Settings 2\. You can configure the following blocks for the Events Calendar Widget: **Header, Selected Period (Title), Buttons, Month, List, Footer** Specify the Bottom Spacing for the Events Calendar Header Click a device icon to adjust the setting for that particular device resolution ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/85f034e3-030b-429a-a758-714d3853e2b4/ascreenshot.jpeg?tl_px=0,150&br_px=859,631&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=28,212) 3\. Specify the Font and Font Style for the Selected Period ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/79c07b5f-8e7c-405a-941b-0d9890e4d9e1/ascreenshot.jpeg?tl_px=0,145&br_px=859,626&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=98,212) 4\. Specify the Selected Period Font Size and Letter Spacing Click a device icon to adjust the settings for that particular device resolution ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/5359fbb1-52d8-45f3-b6a0-c6a07b0b1d16/ascreenshot.jpeg?tl_px=0,95&br_px=859,576&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=38,212) 5\. You can change the default button icons by clicking the pencil icon ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/3db3488d-375e-4b40-afc7-eabb2666c14e/ascreenshot.jpeg?tl_px=0,169&br_px=859,650&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=68,212) 6\. Specify the Font and Font Style for the Buttons ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/16f78194-b884-47c2-b9a4-00f6c9dcb811/ascreenshot.jpeg?tl_px=0,98&br_px=859,579&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=179,212) 7\. You can configure the following sizes and spacings for the Buttons: **Button Size, Top Padding, Right Padding, Bottom Padding, Left Padding, Spacing** ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/1e35c6b3-2ac9-4819-a4e2-5c814ba492f1/ascreenshot.jpeg?tl_px=0,87&br_px=859,568&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=31,212) 8\. Use Normal, Hover, and Active State buttons to set the color for Normal, Hover, and Active states You can set the following for the Buttons: **Font Color, making text underlined with the "U" icon, Background Color, Border Color, and specify the Opacity for the "Today" Button** If you need a specific color, use [the Color Picker](https://success.ministrydesigns.help/how-do-i-change-widget-colors) ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/dc7272b7-e93a-4a47-aad0-e5d31047b659/ascreenshot.jpeg?tl_px=0,100&br_px=859,581&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=120,212) ### Month 9\. The "Month" tab allows you to configure the appearance of the Calendar in a month-based format. You can configure the following for the month-based format: **Border, Week Day, Date, Event, Event Border, More Label, and More Popup** Specify the Border for the month-based format, select Border Style (Solid, Dashed, or Dotted), select Color, and specify Thickness and Corners ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/2fe89f3d-d2f0-40c4-b603-bd5c959b1181/ascreenshot.jpeg?tl_px=0,212&br_px=859,693&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=130,212) 10\. Specify Font and Font Style for the Week Days ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/172919d3-9d0b-4c75-be91-2c6913a5be51/ascreenshot.jpeg?tl_px=0,106&br_px=859,587&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=172,212) 11\. You can configure the following sizes and spacings for the Week Days: **Font Size, Top Padding, Right Padding, Bottom Padding, Left Padding** Click a device icon to adjust settings for that particular device resolution ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/493c3bb0-697d-46e9-87e5-c2d2df781780/ascreenshot.jpeg?tl_px=0,65&br_px=859,546&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=30,212) 12\. Select Alignment, specify Font Color and Background Color for the Week Days ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/ac610fca-c460-46d4-8c43-6e518863ba36/ascreenshot.jpeg?tl_px=0,96&br_px=859,577&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=109,212) 13\. Specify Font and Font Style for the Date ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/bf3f2d77-29e0-402f-bc26-de7539b5a422/ascreenshot.jpeg?tl_px=0,54&br_px=859,535&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=193,212) 14\. You can configure the following sizes and spacings for the Date: **Font Size, Top Padding, Right Padding, Bottom Padding, Left Padding** Click a device icon to adjust settings for that particular device resolution ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/eb524953-350d-4488-a6a5-f745fa3bfb00/ascreenshot.jpeg?tl_px=0,157&br_px=859,638&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=27,212) 15\. Use the Normal, Active State, and Inactive State buttons to set the color for Normal, Active, and Inactive states You can set the following for the Date: **Font Color, Background Color** If you need a specific color, use [the Color Picker](https://success.ministrydesigns.help/how-do-i-change-widget-colors) ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/b5afab12-b1fc-464b-b7d3-dbf5973ce49d/ascreenshot.jpeg?tl_px=0,130&br_px=859,611&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=173,212) 16\. Specify the Font and Font Style for the Event ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/8117271a-e6b2-4391-ac7a-d2300edc47b9/ascreenshot.jpeg?tl_px=0,185&br_px=859,666&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=224,212) 17\. You can configure the following sizes and spacings for the Event: **Font Size, Top Padding, Right Padding, Bottom Padding, Left Padding, Right Spacing, Left Spacing** Click a device icon to adjust settings for that particular device resolution ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/c37f1231-52b4-40aa-8e66-3859510422d5/ascreenshot.jpeg?tl_px=0,245&br_px=859,726&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=31,212) 18\. If needed, add a border for the Event. Specify Style (solid, dashed or dotted) add Color, specify Width and Corners. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-11/d7dddd55-bb08-49c1-83ff-69ea930d9ea8/ascreenshot.jpeg?tl_px=0,180&br_px=859,661&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=192,212) 19\. Specify the Font and Font Style for the More Label. The More Label can be made visible if you enable it in the Calendar widget settings - "Month Settings" block ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-16/3bb0d8d4-ae7b-4b9a-ae8e-fcd45a2ef1c1/ascreenshot.jpeg?tl_px=0,119&br_px=859,600&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=154,212) 20\. You can configure the following sizes and spacings for the More Label: **Font Size, Top Padding, Right Padding, Bottom Padding, Left Padding** Click a device icon to adjust settings for that particular device resolution ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-16/57e958c5-d717-4697-b077-da1f08df9dd8/ascreenshot.jpeg?tl_px=0,39&br_px=859,520&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=52,212) 21\. Select Alignment, specify Font Color and Background Color for the More Label Use the Normal and Hover State buttons to set the Font color for Normal and Hover states. Make text underlined with the "U" icon If you need a specific color, use [the Color Picker](https://success.ministrydesigns.help/how-do-i-change-widget-colors) ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-16/de2b8324-a9d9-45e7-9960-92d554097281/ascreenshot.jpeg?tl_px=0,83&br_px=859,564&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=84,212) 22\. You can configure the following spacings for More Popup: **Top Padding, Right Padding, Bottom Padding, and Left Padding** ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-16/291a9595-6f44-4e80-a035-4e6a291ac955/ascreenshot.jpeg?tl_px=0,135&br_px=859,616&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=31,212) 23\. If needed, add an Outset shadow. Specify X, and Y offsets, Blur, and Spread for the shadow. Additionally, specify the color ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-16/4f5b4fd8-3245-4c33-85ef-f17995639c20/ascreenshot.jpeg?tl_px=0,178&br_px=859,659&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=60,212) 24\. If needed, add an Inset shadow. Specify X, and Y offsets, Blur, and Spread for the shadow. Additionally, specify the color ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-18/e5cdefb3-6cab-475b-935a-9fea5d0be1eb/ascreenshot.jpeg?tl_px=0,301&br_px=859,782&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=107,212) ### Footer 25\. Specify the Font and Font Style for the Calendar Footer. Please note that you can edit this section only if you have enabled the "Display Active Time Zone" checkbox in the Calendar widget settings in the "Calendar" block ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-16/151a1da1-dca5-407a-aec5-95e4f5f5cdc2/ascreenshot.jpeg?tl_px=0,166&br_px=859,647&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=202,212) 26\. You can configure the following sizes and spacings for the Footer: **Font Size, and Top Spacing**. Click a device icon to adjust the settings for that particular device resolution. Additionally, set Alignment and Font Color ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-16/de39685e-0304-4731-862a-331b8fc32c15/ascreenshot.jpeg?tl_px=0,358&br_px=859,839&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=28,212) ### List 27\. The "List" tab allows you to configure the appearance of the Events Calendar in List format. You can configure the following for the list-based format: **Border, Day, Week Day, Date, Event, Indicator, Divider, No Results Message** What you can configure here is identical to Month's settings, select Font, Font Style, Colors, spacings, sizes, alignment, Border Style, Thickness, Corners etc. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-18/8851cf4f-0455-47a4-8fb0-f389cbeb3b1c/ascreenshot.jpeg?tl_px=0,69&br_px=859,550&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=196,212) 28\. One thing worth mentioning for the list-based format for the Calendar is the No Results Message. You can only see the changes you made to the No Results Message on the live preview if you don't have any events to show ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-18/926ffa65-aaca-462e-b385-08b9b15ce104/ascreenshot.jpeg?tl_px=0,241&br_px=859,722&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=359,212) 29\. Click the "Save" button to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-18/902bea52-92ed-4cc0-aaec-5fd0ae21f6cc/ascreenshot.jpeg?tl_px=0,464&br_px=859,945&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=179,415) - [Account](https://success.ministrydesigns.help/account) - [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega#main-content) - [Next-Steps Framework](https://success.ministrydesigns.help/sites-formerly-omega#next-steps-framework) - [Video Guides](https://success.ministrydesigns.help/sites-formerly-omega#video-guides) - [Site Builder Profile Settings](https://success.ministrydesigns.help/sites-formerly-omega#site-builder-profile-settings) - [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) - [Design](https://success.ministrydesigns.help/sites-formerly-omega#design) - [Media Library](https://success.ministrydesigns.help/sites-formerly-omega#media-library) - [Extensions](https://success.ministrydesigns.help/sites-formerly-omega#extensions) - [Blog](https://success.ministrydesigns.help/sites-formerly-omega#blog) - [Events](https://success.ministrydesigns.help/sites-formerly-omega#events) - [Small Groups](https://success.ministrydesigns.help/sites-formerly-omega#small-groups) - [Sermons](https://success.ministrydesigns.help/sites-formerly-omega#sermons) - [Settings](https://success.ministrydesigns.help/sites-formerly-omega#settings) - [SEO](https://success.ministrydesigns.help/sites-formerly-omega#seo) - [Website Management](https://success.ministrydesigns.help/sites-formerly-omega#website-management) - [FAQ](https://success.ministrydesigns.help/sites-formerly-omega#faq) - [illume for Church Members](https://success.ministrydesigns.help/illume-for-church-members#main-content) - [Signing Up](https://success.ministrydesigns.help/illume-for-church-members#signing-up) - [Giving](https://success.ministrydesigns.help/illume-for-church-members#giving) - [illume for Church Administration](https://success.ministrydesigns.help/illume-for-church-administration#main-content) - [Getting Started](https://success.ministrydesigns.help/illume-for-church-administration#getting-started) - [Managing Your Account](https://success.ministrydesigns.help/illume-for-church-administration#managing-your-account) - [Using People](https://success.ministrydesigns.help/illume-for-church-administration#using-people) - [Using Giving](https://success.ministrydesigns.help/illume-for-church-administration#using-giving) [![MD Logo 1\_Black-3](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-3.png?width=200&height=73&name=MD%20Logo%201_Black-3.png "MD Logo 1_Black-3")](http://ministrydesigns.com) 15 Carlyle St Floor 2, Battle Creek, Mi 49017 [mailto:email@email.com](mailto:email@email.com) Copyright © 2025,