I need to make some customizations and only see a thread about changing Google font. I would like to make group titles all caps and customize several other aspects of the plugin regarding how it appears… The width of the filters at the top of the widgets would be nice to set to 100%, I’d like to style some other parts too. Is there a legend of all the classes used?
Hello @David9 and we are happy to greet you at the best place in the world 
! Welcome to Elfsight Community 
!
Unfortunately, we don’t have a list of classes for the Event Calendar app. I am so sorry 
However, our devs will be happy to help you with customization. Could you please provide me with your widget id and give more detailed information about customization you’d like to have?
Okay thanks.
My widget is:
elfsight-app-c6f15fc6-54cf-4c3c-a802-1a9e6a212367
The filter widths are too small and should be adjustable or set to something like 90%! When I want to do filters for events and locations, it cuts off so much of the text, it’s pointless, so sadly I won’t be able to offer the locations filter.
I also wanted to adjust fonts for the widget. The solution listed in another thread doesn’t work. Perhaps the module name has changed? I’ve used the code provided and placed it in the CSS area, but not seeing anything change.
For the Day/Date headings, I want to change font, font color, make all caps.
I also wish there were a custom area for setting recurring events. You only have daily, weekly, monthly, etc. but I need to put a date range.
Okay thanks.
My widget is:
elfsight-app-c6f15fc6-54cf-4c3c-a802-1a9e6a212367
The filter widths are too small and should be adjustable or set to something like 90%! When I want to do filters for events and locations, it cuts off so much of the text, it’s pointless, so sadly I won’t be able to offer the locations filter.
I also wanted to adjust fonts for the widget. The solution listed in another thread doesn’t work. Perhaps the module name has changed? I’ve used the code provided and placed it in the CSS area, but not seeing anything change.
For the Day/Date headings, I want to change font, font color, make all caps.
I also wish there were a custom area for setting recurring events. You only have daily, weekly, monthly, etc. but I need to put a date range.
Also, on the popups, when viewed on mobile, the leading of the title is too close when the title has to wrap. I would change it if I could. It does not look good.
Where is the ultimate support we’re laying for with the enterprise package?
Thanks!
@okjedi Firstly, I’d like to bring you my sincere apology for the delayed reply! Thank you for your patience.
I am happy to provide you with requested CSS codes 
.
- To adjust the size of the filter:
.eapp-events-calendar-filter-component:nth-child(2) .eapp-events-calendar-filter-modal {
width:300px;
}
- To change the font of all elements:
* {
font-family: Open Sans;
}
- To change the font of the Date section:
.eapp-events-calendar-date-element-item {
font-family: Roboto;
}
Please add these codes to the Custom CSS section on the last tab in your widget’s settings and let me know if it helped.
As for the color of the Date, unfortunately, there is a technical issue on our side, please accept my apologies for that! However, at the moment you can change it by following these steps:
- Choose Style tab of your widget’s settings and click on Event:
- Scroll down and you’ll see the setting Group text color. It allows you to change the color of the date:
Also, I see that Date text is already in caps.
As for the custom area for recurring events, unfortunately, this feature isn’t supported by our app. I am very sorry .
We have this request in our wishlist, by the way, so feel free to vote for it: More flexible event repeat options
If it gets a lot of votes, it might speed up the implementation process 
As for the issue with the popup on mobile, could you please provide me with a direct link to the website where your widget is installed! We’ll be happy to investigate it for you!
Looking forward to your reply!
Thanks so much!
Yes, on the popup when you click an event title, the event title on the popup needs more leading when it wraps (longer titles wrap often on mobile devices)
This site will go live soon, but for now, you’ll have to enter user and password to view.
You’d tap the Schedule of Events button to view the page containing the widget and tap some of the events with longer titles to see what I mean. The wrapped line is too close to the line above. If I can set the leading that would be great, otherwise if you can do something that makes it look aesthetically pleasing, that would be good. Thanks!
link: http://m.thecherokeeholiday.com/
user: CNHoliday
pw: holiday2022
Hi Maksim,
The font css doesn’t work in either instance you sent.
Thanks,
David
@okjedi I am so sorry that you’ve experienced difficulties using our app . Please accept my sincere apologies!
As for the CSS code for font changing I’ve applied it and it seems to be working fine (1st screenshot - without CSS code, 2nd screenshot with CSS code):
Please do not forget to save changes and update your widget!
As for the leading setting, I have forwarded your request to our developers, and hopefully, they will come up with a solution very soon, I’ll keep you updated.
@okjedi Thank you for waiting!
I am happy to provide you with a special CSS code to increase the leading:
.eapp-events-calendar-popup-item-name {
line-height: 36px;
}
Could you please check it and let me know if it works fine?
Hi Maksim,
None of these seem to work. I’m looking at it on my phone after apply updates.
The font code appears to have opposite effect. When I put it in the CSS field, it makes the fonts serif/times looking.
The code for line height doesn’t seem to have any effect, nor does the code for filter width.
- {
font-family: Open Sans;
}
seems
Hello @okjedi! We are very sorry for any inconvenience caused by wrong CSS codes.
I’ve consulted with our devs once again and they’ve provided me with new CSS codes.
To increase the leading:
.global-styles, .eapp-events-calendar-popup-item-name {
line-height: 36px;
}
To change the font:
.global-styles,
.eapp-events-calendar-events-calendar-component * {
font-family: 'Open Sans';
}
Also, I need to inform you that the second CSS code will work correctly if you add this font to your webpage.
Regarding the CSS code to increase filter width, if I understood you correctly, you had issues with Location filter. However, I see that at the moment, you’ve disabled this filter.
I’ve tried to enable this filter and apply the CSS code I’ve sent you before and everything seems to be working fine:
Could you please double-check it and let me know if it helped?
However, if I misunderstood you and you meant another filter, would it be an option for you to describe the issue in more detail?
Looking forward to your reply!
Thanks! The leading on the popup is working.
The font still seems to have opposite effect. When I put the code it, it looks like a serif/times roman type font. I’ve tried some very different Google font names just to see if it would change. I’ve used the name with and without single quotes around it. Nothing seems to work.
I’m using Elementor theme builder, so not sure if that has anything to do with it, and my global settings for that. I’m using 2 different fonts I’ve set up with Elementor.
Regarding the filter, I’m using the events filter. It would aesthetically look better if it would be 100% of container or maybe 90% centered.
You have the access info right?
https://m.thecherokeeholiday.com
user: CNHoliday
pw: holiday2022
Thanks for your help.
It would just be nice to have a list of the classes/elements of the widget so I can customize as I need.
It’s usually a 24 hour delay between response and questions, so it would save time and frustration.
Thanks,
David
For the font have you tried to add !important; to it?
.global-styles,
.eapp-events-calendar-events-calendar-component * {
font-family: ‘Open Sans’ !important;
}
If it is a theme related issue this should override it.
1 Like
Hello @Rhonda and we are happy to see you at the best place in the world Welcome to Elfsight Community 
Thank you so much for your indifference and help! That’s highly appreciated!
For greater convenience, we contacted David through support and provided with the proper CSS code:
@font-face {
font-family: "Open Sans";
src: url("./fonts/open-sans.woff") format("woff");
font-weight: 400;
font-style: normal;
}
1 Like