# Event Calendar **URL:** https://community.elfsight.com/c/css-codes/event-calendar/167.md [Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md) --- ## [Change size of the search bar](https://community.elfsight.com/t/change-size-of-the-search-bar/174195)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [September 14, 2026, 11:08am UTC](https://community.elfsight.com/t/change-size-of-the-search-bar/174195 "2026-09-14T11:08:55Z")
Add this code to the Custom CSS field on the Settings tab of your Event Calendar widget’s settings: .es-search-input, .es-search-input .es-text-control-base-placeholder, .es-search-input .es-text-control-base-inner, .es… --- ## [Make filters larger](https://community.elfsight.com/t/make-filters-larger/140183)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 1:14pm UTC](https://community.elfsight.com/t/make-filters-larger/140183 "2025-10-01T13:14:01Z")
Add this code to the Custom CSS field on the Settings tab of your Event Calendar widget’s settings: .es-filter-button-button, .es-filter-button-text { font-size: 14px !important; line-height: 20px !important; } --- ## [Change color of arrows in filters](https://community.elfsight.com/t/change-color-of-arrows-in-filters/152973)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [April 6, 2026, 5:53pm UTC](https://community.elfsight.com/t/change-color-of-arrows-in-filters/152973 "2026-04-06T17:53:59Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .es-filter-button-slot { fill: white!important; } --- ## [Change background color of filter containers](https://community.elfsight.com/t/change-background-color-of-filter-containers/140190)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 1:36pm UTC](https://community.elfsight.com/t/change-background-color-of-filter-containers/140190 "2025-10-01T13:36:51Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .es-filter-button-button { background-color: red; } --- ## [Hide Read More and display full description in the event popup](https://community.elfsight.com/t/hide-read-more-and-display-full-description-in-the-event-popup/57475)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 5\ **Last updated:** [March 24, 2026, 10:57am UTC](https://community.elfsight.com/t/hide-read-more-and-display-full-description-in-the-event-popup/57475 "2026-03-24T10:57:21Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .global-styles, .eapp-events-calendar-read-more-button { display: none; } .global-styles, .eapp-events-calendar-read-more-… --- ## [Reduce image size in the popup](https://community.elfsight.com/t/reduce-image-size-in-the-popup/149862)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [March 19, 2026, 10:23am UTC](https://community.elfsight.com/t/reduce-image-size-in-the-popup/149862 "2026-03-19T10:23:43Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .global-styles, .eapp-events-calendar-popup-item-inner .eapp-events-calendar-media-image { max-width: 50% !important; } --- ## [Change background color of filter popup (Popup style)](https://community.elfsight.com/t/change-background-color-of-filter-popup-popup-style/143302)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [January 20, 2026, 5:49pm UTC](https://community.elfsight.com/t/change-background-color-of-filter-popup-popup-style/143302 "2026-01-20T17:49:05Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: global-styles, .es-modal-content { background-color: gray; } --- ## [Display full location names in the Venues filter](https://community.elfsight.com/t/display-full-location-names-in-the-venues-filter/140187)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 1:20pm UTC](https://community.elfsight.com/t/display-full-location-names-in-the-venues-filter/140187 "2025-10-01T13:20:14Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .global-styles, .eapp-events-calendar-filter-modal { width: auto; } --- ## [Adjust font size, color, weight and padding for Day of Week, Day and Month in List View](https://community.elfsight.com/t/adjust-font-size-color-weight-and-padding-for-day-of-week-day-and-month-in-list-view/142801)
**Author:** [@Alex\_Frizzell](https://community.elfsight.com/u/Alex_Frizzell)\ **Replies:** 1\ **Last updated:** [December 31, 2025, 12:56pm UTC](https://community.elfsight.com/t/adjust-font-size-color-weight-and-padding-for-day-of-week-day-and-month-in-list-view/142801 "2025-12-31T12:56:28Z")
Add this code to the Custom CSS field on the Style tab of your widget’s settings: /\* Month Text Size \*/ .eapp-events-calendar-date-element-month { padding: 0 0 0 0; font-size: 16px; font-weight: 600; color: rgb(… --- ## [Add scrollbox and feathered edges (List layout)](https://community.elfsight.com/t/add-scrollbox-and-feathered-edges-list-layout/142812)
**Author:** [@Alex\_Frizzell](https://community.elfsight.com/u/Alex_Frizzell)\ **Replies:** 0\ **Last updated:** [December 31, 2025, 5:07pm UTC](https://community.elfsight.com/t/add-scrollbox-and-feathered-edges-list-layout/142812 "2025-12-31T17:07:35Z")
This code will create a scrollbox for your event calendar list and feather the top and bottom edges. It should be added to the Custom CSS field on the Style tab of your widget’s setting: /\* Scrollbox w/ feathered edges … --- ## [Hide weekends (Month layout)](https://community.elfsight.com/t/hide-weekends-month-layout/57656)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 4\ **Last updated:** [November 6, 2025, 1:01pm UTC](https://community.elfsight.com/t/hide-weekends-month-layout/57656 "2025-11-06T13:01:01Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .fc-day-sat, .fc-day-sun { display: none; } Guys, if this code was helpful, please drop us a line in the comments … --- ## [Change background and color of the day of the weeks (Monthly layout)](https://community.elfsight.com/t/change-background-and-color-of-the-day-of-the-weeks-monthly-layout/140205)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 2:53pm UTC](https://community.elfsight.com/t/change-background-and-color-of-the-day-of-the-weeks-monthly-layout/140205 "2025-10-01T14:53:08Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: th \[role = "columnheader"\] { background-color: red !important; } .fc-col-header-cell-cushion { color: white; } --- ## [Show custom image instead of error text (Sorry, no events right now)](https://community.elfsight.com/t/show-custom-image-instead-of-error-text-sorry-no-events-right-now/140204)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 2:51pm UTC](https://community.elfsight.com/t/show-custom-image-instead-of-error-text-sorry-no-events-right-now/140204 "2025-10-01T14:51:35Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .eapp-events-calendar-error-text { font-size: 0; } .eapp-events-calendar-error-text:after { content: ''; display: block; … --- ## [Reduce size of the popup and padding between its elements](https://community.elfsight.com/t/reduce-size-of-the-popup-and-padding-between-its-elements/140203)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 2:47pm UTC](https://community.elfsight.com/t/reduce-size-of-the-popup-and-padding-between-its-elements/140203 "2025-10-01T14:47:53Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .global-styles, .eapp-events-calendar-modal-modalContent { flex-basis: 450px; } .global-styles, .eapp-events-calendar-pop… --- ## [Move date to the right (Masonry)](https://community.elfsight.com/t/move-date-to-the-right-masonry/140202)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 2:44pm UTC](https://community.elfsight.com/t/move-date-to-the-right-masonry/140202 "2025-10-01T14:44:01Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .eapp-events-calendar-masonry-item-date { right: 0; left: initial; border-radius: 0 24px!important; } --- ## [Align month picker to center (Monthly layout)](https://community.elfsight.com/t/align-month-picker-to-center-monthly-layout/140201)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 2:42pm UTC](https://community.elfsight.com/t/align-month-picker-to-center-monthly-layout/140201 "2025-10-01T14:42:37Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .fc-header-toolbar { justify-content: center; } .fc-today-button\[disabled\] { display: none; } --- ## [Change widget's width on mobile](https://community.elfsight.com/t/change-widgets-width-on-mobile/140200)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 2:40pm UTC](https://community.elfsight.com/t/change-widgets-width-on-mobile/140200 "2025-10-01T14:40:42Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: @media (max-width: 500px) { \[class\*='WidgetBackground\_\_Wrapper-sc'\] { padding: 40px 0 !important; } } --- ## [Change color of Read More text in popup](https://community.elfsight.com/t/change-color-of-read-more-text-in-popup/140199)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 2:38pm UTC](https://community.elfsight.com/t/change-color-of-read-more-text-in-popup/140199 "2025-10-01T14:38:29Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .global-styles, .eapp-events-calendar-popup-item-readMoreButton { color: red!important; } --- ## [Make images in Grid layout bigger (like in Masonry layout)](https://community.elfsight.com/t/make-images-in-grid-layout-bigger-like-in-masonry-layout/140198)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 2:37pm UTC](https://community.elfsight.com/t/make-images-in-grid-layout-bigger-like-in-masonry-layout/140198 "2025-10-01T14:37:28Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .eapp-events-calendar-grid-component { display: flex; flex-wrap: wrap; } .eapp-events-calendar-grid-item-info { min-heig… --- ## [Change font size of the month in the month picker (Monthly layout)](https://community.elfsight.com/t/change-font-size-of-the-month-in-the-month-picker-monthly-layout/140197)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 2:34pm UTC](https://community.elfsight.com/t/change-font-size-of-the-month-in-the-month-picker-monthly-layout/140197 "2025-10-01T14:34:30Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .fc-toolbar-title { font-size: 22px !important; } --- ## [Make Read More button text in popup bold](https://community.elfsight.com/t/make-read-more-button-text-in-popup-bold/140196)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 2:32pm UTC](https://community.elfsight.com/t/make-read-more-button-text-in-popup-bold/140196 "2025-10-01T14:32:33Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .global-styles, .eapp-events-calendar-popup-item-readMoreButton { font-weight: bold; } --- ## [Hide location icon](https://community.elfsight.com/t/hide-location-icon/140195)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 2:30pm UTC](https://community.elfsight.com/t/hide-location-icon/140195 "2025-10-01T14:30:14Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .global-styles, .eapp-events-calendar-location-icon { display:none!important; } .global-styles, .eapp-events-calendar-pop… --- ## [Change color of the error text "Sorry, no events right now"](https://community.elfsight.com/t/change-color-of-the-error-text-sorry-no-events-right-now/140194)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 2:28pm UTC](https://community.elfsight.com/t/change-color-of-the-error-text-sorry-no-events-right-now/140194 "2025-10-01T14:28:40Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .eapp-events-calendar-error-text { color: red !important; } --- ## [Change color of Next Events button on hover](https://community.elfsight.com/t/change-color-of-next-events-button-on-hover/140193)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 2:26pm UTC](https://community.elfsight.com/t/change-color-of-next-events-button-on-hover/140193 "2025-10-01T14:26:06Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .global-styles, \[class\*='ButtonBase\_\_ButtonContainer-sc'\]:hover { background-color: rgb(74, 56, 56)!important; color: rgb(… --- ## [Change background color of all filter containers except Date](https://community.elfsight.com/t/change-background-color-of-all-filter-containers-except-date/140191)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 1:37pm UTC](https://community.elfsight.com/t/change-background-color-of-all-filter-containers-except-date/140191 "2025-10-01T13:37:38Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .eapp-events-calendar-filter-current { background-color: red; } --- ## [Hide end dates](https://community.elfsight.com/t/hide-end-dates/140188)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 1:21pm UTC](https://community.elfsight.com/t/hide-end-dates/140188 "2025-10-01T13:21:37Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .eapp-events-calendar-date-element-endContainer { display:none!important; } --- ## [Increase spacing between filter and error text "Sorry, no events right now" on mobile](https://community.elfsight.com/t/increase-spacing-between-filter-and-error-text-sorry-no-events-right-now-on-mobile/140186)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 1:17pm UTC](https://community.elfsight.com/t/increase-spacing-between-filter-and-error-text-sorry-no-events-right-now-on-mobile/140186 "2025-10-01T13:17:59Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: @media screen and (max-width: 640px) { .eapp-events-calendar-error-text { padding-top: 20px !important; } } --- ## [Increase size of Slider container on mobile to fix image cropping](https://community.elfsight.com/t/increase-size-of-slider-container-on-mobile-to-fix-image-cropping/140184)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 1:15pm UTC](https://community.elfsight.com/t/increase-size-of-slider-container-on-mobile-to-fix-image-cropping/140184 "2025-10-01T13:15:32Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: @media (min-width: 775px) { .eapp-events-calendar-slider-item-imageContainer { display: flex; align-items: center; justify… --- ## [Hide Get Directions button in popup](https://community.elfsight.com/t/hide-get-directions-button-in-popup/140182)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 1:12pm UTC](https://community.elfsight.com/t/hide-get-directions-button-in-popup/140182 "2025-10-01T13:12:49Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .global-styles, .eapp-events-calendar-popup-location-link { display: none; } --- ## [Make past events gray (Grid)](https://community.elfsight.com/t/make-past-events-gray-grid/140181)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 1:10pm UTC](https://community.elfsight.com/t/make-past-events-gray-grid/140181 "2025-10-01T13:10:47Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: .eapp-events-calendar-layout-past-events .eapp-events-calendar-grid-item { filter: grayscale(1) !important; } [Next page](https://community.elfsight.com/c/css-codes/event-calendar/167.md?page=1)