--- title: Calendars in Connect description: How to use the Calendar widgets in Connect App Builder. --- [Skip to content](https://go.screenfeed.com/portal/calendars-in-connect#main-content) ![Screenfeed Logo\_White (1)](https://go.screenfeed.com/hs-fs/hubfs/Screenfeed%20Logo_White%20(1).png?width=300&height=63&name=Screenfeed%20Logo_White%20(1).png) Open main navigation Close main navigation Hello how can we help you? - There are no suggestions because the search field is empty. 1. [Portal](https://go.screenfeed.com/portal?hsLang=en) 2. [Connect](https://go.screenfeed.com/portal/connect?hsLang=en) 3. [Widget Walkthroughs](https://go.screenfeed.com/portal/connect?hsLang=en#widget-walkthroughs) # Calendars in Connect ## How to use the Calendar widgets in Connect App Builder.   **How to add calendars in Connect** Before you begin adding a calendar widget to display data from your connected calendar. Consider which calendar widget will best display your data.  **‍** **Event** shows the details of a single event, either from a Google calendar, Microsoft calendar or ical data connection. ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628d406f109fff951f0269b1_X6jGZIewCtk5E9WgHFSHsEWUTVQ8WzHp4LefIRXpNwgFZEbmhds3maIEQfuYBpPROwtgNH6Ur339U3VMYGr63LyVpTLrJW3Pk1DozQB2LlTG2HsoHHAG5p7Lkg-2HhEVV7T_lKgSwv2DYDVKfA.png) **‍** **Day** shows a list of events over a given period of time for one day in a horizontal format. You can set the Day widget to show either events from today or up to three days in advance. **‍** ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628d406fbbdcf108a171a475_qAv0NAMDMi1lzmSNg2E-bzBsAn4asvQzWrlQT6ELPbz5Y8gZhGv_UD96bUCi0UXX4aTrbK6SOTxYOh8ou7MQtVHZx6KSjrUymuzJjsbWdTeMBbJKnLj6ZUXKkk7uPpmDu2BcMNaK-r2T9-pX0g.png) **‍** **Agenda** shows a list of events over a given period of time for one day in a vertical format. You can set the Agenda widget to show either events from today or up to three days in advance. ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628d406f7a9dffd4a33a5a0b_LFqeUFrKd-5AjO_wuFdR4fW5ENna5OwymxDgIAj36HgSsi7SYsKhkkrMVh6ScmzVgcU-1MDNM6CJS0eD2hDc9eh2fpNEu6gc2BqPWhdaPQfAW1NSi14mq50pzvazB01WdwBi7Y7awcTceaiXPg.png) **‍** **Week** shows multiple events over a week in a horizontal format. You can set the Week widget to show either events from the current week or up to three weeks in advance. ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628d406f3acc1df5d0b64f20_6rOMMeRxBGijYNVRfw7PNaIWV6hYCR6hS6KJyErZVCHn7q1Jw1a0GfIRItw6J1Jb8VDila6Fio5jVis8660FvyaB_tE0SsnKEYAMcxFQnkh4Qm-e4M_gh0cPK8gz7cmfFR57tk6qGZIa0ufiYg.png) **‍** **Room Schedule** is intended to display events associated with a specific location or room. It will display the next two upcoming events for the location in a vertical format. ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628d406fd3328799d7bcd45d_bq5BZJSIClfkTFQrBOvjmrjJCBv5OcGuEi0jA014QOhuSGxXXtw2ZbfKpXIxm3ZzHchnE-uN1rAQ-9m1Td_9LouUiaYxdisEGnzqkjAyvMexfJHNVLIFKNlAkrWDyqBSgWLprwcYF9PrLuR_EA.png) **‍** ### **Connecting your Calendar** First either open an existing app in app builder or create a new app. Follow this link for more information on creating your first app.  **‍** Calendar widgets require a data source; Google calendar, Microsoft Calendar or an iCal URL. Make sure your iCal URL is publicly accessible, or your user has full access to the Google calendar you wish to use.  **‍** #### **Add your calendar widget to the App** Click on the **Widgets** option in the left menu in app builder.  ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/649c58646c56366abae6a96f_Yl2R5Rf3fMqxu0h5quow9L50lU-_b1ppzpBaKSikIEicLF8LOBEw8EOytfPBUHfJMI4TSpRBjmYClj9e0OP_j31_coZKDEdEYupGAZf3rQxukrtgr8xt-mnoFAdHpto2dnU-NJtYRwUZoibzKdXEoG8.png) **‍** Click on a widget in the calendar section to add it to the app builder canvas.  ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/649c586695f05a2c992e6475_rbdrsILap0ie6NTIb0avHSSaUvY5i0Xu8p0aVWI06o00TTN99UCCdh4IBZ2NiGin_NH7MfEff9NSL4Qrzsp_y1QT8KkTvJEAt6LdhIc-b_2Kw5kH_snrNzgjdG9VtT39FhLRZZKOG2sva-qvOeGGfbc.png) **‍** #### **Connect your calendar data to the widget.** With the calendar widget selected on the canvas, choose **Data** from the properties menu on the right. Click on **Connect to Data Source** and either select an existing connection or create a new connection.   ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628d406fc7681c3d8d79c2c1_R9ro_bNftrFe06g5KzAV22ruWVll7WREfICoDzJ1XUgUl0sEbqnyerMJDBmzr3RcreF7dBoGsWDuNRxRl2mJnEl9Ii1XzHaZQwODuY1BAn9OwERjOz8pI3gPNtdcjqKdtGLDoTxTgD5yEM-d3A.png)   **‍** Follow these links to learn more about connecting to your calendar type. Connecting to google calendar, connecting to Microsoft Calendar, Connecting to an iCal Calendar Once connected to your calendar, the event(s) should appear in the calendar widget.  **‍** ### **Adjusting widget properties** Select the calendar widget on the app builder canvas and the right hand properties menu window will appear. The properties menu is contextual and will show properties based on the component selected on the canvas.  **‍** #### **Appearance properties** Calendar widgets have text properties that can be changed individually.  For example; Click on the **Event Title** label in the right hand properties menu. Click on the corresponding text properties to change the font, font size and font style of the event title. Follow this link for more detail about **Text in Connect** ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70e31ad0b794d2efd39_N0szV5gNxz59S8PZz6oiN6TECXA4we0KCskw1GVehdWUBfKlAB4CdRguqU3vbNGrtOheVME7tqe7pp9spWCqX6VWU3MtriG68ycbbJzUxetVq9kU75VrGLALztQl6t7a6DfyVBJRv9mgggaX1A.png) **‍** Change the color of the text by clicking on the swatch next to the font style, then choosing from the color picker or entering in a hex code.  ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70e52c018c6656a3cef_4HQ06CDXPYyXsmRXvGF3zQsudSZhjeXlYqt7A4T86FyCJr3YPxSOOe4D2GQKm4MBsq6-Zh1oW4qgLDkdYSdn-phn_MdM6kvMFuHLsGlhUG7eSuyRpIG4eJrpWwk2Zwm-EWDREMPK9bMZMaYz7w.png) Alternatively, selecting the lightning bolt icon next to the color swatch can connect your text color to a data source. Follow this link to learn more about **connecting to a single data value** ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70e0cb2421d87731993_Hdega5Xe8WWZKXf1ZPqOxFbDrb7TwkGZE6k8eZAvgWlhTIMZYdn-wzJNuZHM7Ctxu2rcfVgw7lY4BWm0A3zSPGiA_WQbRwsgmx2cMYlobN3KgwBXxcMjnbVf-969T5ucbevKQYa9riXMIv0QoA.png) **‍** Rather than change each text property in the widget individually, choose **Title** in the right hand properties menu and select **Sync Fonts** for all text to have the same font. Choosing **Sync Text Colors** will change all text to the same color.  ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70e7a32ff218f74f362_ZwaCKJIrtV_PzGSAobvWR7TG23AoGN-127XrYdKDexyX1YqkwQYk3RUqFQepFowwY3pskw-U4oovidXXs5lexJWLiNgYXVR7xe4Sr546Gr--deiGhFIGD5viAqbHVSohH1TEPbg0b-6N-DSHIQ.png) **‍** Some text properties are capable of multiple lines of text and text alignment. In the **Agenda** widget the **Event Title** property has the option for line height and text alignment. Enter in a value or click on the corresponding arrows to for the **Line Height** of the event title to add additional space between your event title and the location of the event.  ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70e82c739861c0c7010_fRm1bWI2EkyL7tS6-XPRMJ1HTw1VVHmjxpOcJf_sh4u6tH2-4wrHPGqcXUUX-IeSpokCylw5ORL0CjQ8T5zJ5dsZIvPMQkN6cUfIbgr2pyEx7nyjS009-ryY9U1-5eRlpbUqwKTn23xrn3Cl9A.png) **‍** Several calendar widgets have properties that only allow color adjustment.  For example; the **Day** widget **Time Marker.** To change the color of the time marker click on the **Time Marker** labelin the widget properties menu on the right.  **‍** Click on the corresponding color swatch to bring up the color picker.  ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70e258dd60ef92509fc_I52DDebUAM_pRrJKDTNgVln3cHm7C3Ovv1CLlamibZH94ZoHKWvL3Ja53q8UrIwpKc8mvgfw8xw7-uylmoxHhp1fUCQ4HvFPcKw__NJ0_MKTBcW9EdKRPzZCUbstyIObawBiHAENBga5VemEHw.png) **‍** Then pick your color from the swatch library provided or enter in hex values at the bottom of the color picker.  **‍** ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70edd1baa6ed4b562f3_ATBdcVBVY9y3XIuzdXGwWNl18PjN8OLPFK4Q5W1ynLVUyrI59GUvl5FrziEbApX7MyoUNuN0KSSAqFtxJvIgAyYVelTrvNFaYXncBGsrXQSrnyHqwoUiZXGOtLgc6ii_AQBdtsW-uYI9hV3syQ.png) **‍** Alternatively, selecting the lightning bolt icon next to the color swatch can connect your text color to a data source. Learn more about **using a data source to drive dynamic colors and opacities**  ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70e0cb2421d87731993_Hdega5Xe8WWZKXf1ZPqOxFbDrb7TwkGZE6k8eZAvgWlhTIMZYdn-wzJNuZHM7Ctxu2rcfVgw7lY4BWm0A3zSPGiA_WQbRwsgmx2cMYlobN3KgwBXxcMjnbVf-969T5ucbevKQYa9riXMIv0QoA.png) **‍** Changes to the size of a Calendar widget do not affect the size of the text components; rather text responds by spilling over to the next line when required.  ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70fbef97e4dc2eaed71_Z2vuFz-lfNIFiPR8UtaXTEa3VPsrKffYWZkXdWxml9kS_JcsINXQzMuf5S2qzEYWyRRNmqUM4feiz8grVlNOz7Q59lWsl39sS74a8C_AIXSdJ0uhFYZNtyiFMLoJrBhRgIj26Jv7FzLGrbgU7g.png) Adjusting the position of a calendar widget is relative to the canvas and can be either done through manual manipulation on the canvas or adjustment of the x and y parameters in the right hand properties menu.  **‍** Calendar widgets can be rotated either by clicking and dragging the rotation handle that appears above the widget or by entering a value into the right hand properties menu.   ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70f0552220b8d16f995_kpEDY8Ss8bDzjbNFjmL7uhdMk36h6vWjJURHaNvOb2kYSIiQ1tkKMSQYSNCGsaCej1HvC3zqIq0Ev-eNUblqtORGIkZ7XMCnIVBVyG-_01eY6TxIpK8qdYjHX7tAhT3rmK8czXdFfcDyuqqn-g.png) Changes to opacity at the bottom of the right hand properties menu will affect the entire widget. This setting can be connected to a data source, to learn more about dynamic opacity see **Scalar Bindings in Connect.** ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70fa2b2196247a91d77_bhP0K5z-ttXWsU-Z5_rAbVrRviyaiTFmx_ep0qtmT-tXmipdhA4JrEzBDAZdcy1RKc3bPsHfaXvGrT7a_5JsmtjQaT80rtGJF1Ec64HwS7bzpGiiIHVxFvZ1unHyPYdvNBlTEH4DpTHtvA5cPw.png) #### **Other properties** Calendar widgets also allow for the time of the event to appear in a 24 hour clock format. Use the 24 hour clock format by selecting **Title** from the right hand properties menu, then toggle **Use 24 Hour Clock** as shown in the image below.  ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70fa2b21975baa91d76_4BEYpaxbtsk-9hRz9HZ5k5cZZIu-Wb1ZmcN9Hxw32xfkeY-LMo0DNlu3_dT-KwjkBU6v6cRLTo6aztBcnSu2RzRCZRoUoQM6XSqLpCf6TkL3g4d38qmjJBdjlcGElwPc1uljj5SVSj5Q-VjQOA.png) **‍** Some properties have the option to show or hide the element altogether. For example in the **Event** widget, click on the **Location** label then click to toggle whether or not the event locationis visible. ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70f0c2e9ecc8a4aec3a_T4RChlS7aC08Wss2wD8eJk6vax8W3KORiKTVf52Z6alCQINuQRQ4Al_qWqloKwMdnx40AR1PxV5JDtAUyMDKX4RFcSzKLNRFLUtqYGwMpD40Uw5XcKlIJ6XmX2jmkbwAqsf982VfYIcJNv0_tw.png) **‍** Calendar widgets such as day, week and agenda show a range of events over a period of time. This range can be defined by setting start and end times. In the **Day** widget, click and drag on the left slider in the **Hour Display Range** to adjust the start time and right slider to adjust the end time.  ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70f7a32ff659074f363_RO_H1Yf8Dk_8z2GKmO4mpkxFbK3-fY3AoYazhdH9q8t7EN47jSOrqq8b7qVS4LZNfUiuxTHI3H9j5o2wlZmLj4IKSXbLI5In7L_rpiEGk9U41PesLbfBIgC2_2e8XcgNFfMsbZHED5aYaseG6Q.png) **‍** Calendars with a defined range of events can also display future events. You also can adjust the day or week shown in the widgets. For example in the **Day** widget, choose the **Day** label then click on the dropdown menu below **Day Offset** if you would like to show the previous, next day’s events, or events up to three days in advance. ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc70f1f2356dcda8470fb_Vpb2R2JmtVY37wXygwnvZwVKh6RZ2gGL62yOWt_ad9moUbnCXSOg7lUA8x6opGgYHfsz9BOvr8b5BoWivNHAgv3ErzCjaRBQmZAIJb-CBitGeiPdVC5P1mSWgo7lLyQMOoZT2SX_5bRxPC-E6w.png) **‍** Set the date format for the date that shows in the top left corner of the **Day** widget by clicking on **Day Title**  then the **Date Format**  dropdown menu.  ![](https://uploads-ssl.webflow.com/61a49075fd3a7af706d0fa22/628fc71092e78c6a6c3a7b6b_goKrlQKGyF_15n6ZrwVV7n0YPKhfNnPfIvGxUJP7B8buykwtKF3mtzqAUyOrFP9asueOKhClI3mOboADDk0EKTzM7btLjYyEKnvmC43ssg-BaQbzgmYo43xdY0IFyockRMMc1ZJozw2IIJixpw.png) **‍** ### Next Steps Check out what  Widgets in Connect can do. Not sure how to start? Get inspired Using pre-built Templates Learn more about Connecting your Data screenfeed.com Copyright © 2025, Screenfeed