Hi,
It’s not possible to change it to a dropdown menu. With the filter you can select one or more calendars, and I’m not sure that a dropdown menu is the appropriate user interface element for this functionality.
You can change the CSS of the filter by overriding the “pgc-calendar-filter-wrapper” class (wrapper DIV) and the label and span elements in it. For example:
.pgc-calendar-filter-wrapper {
background-color:gold;
padding:1rem;
}
.pgc-calendar-filter-wrapper label {
font-family: Arial;
color: orangered;
}
.pgc-calendar-filter-wrapper span {
border-radius:.2rem;
padding:.4rem;
}
Best wishes,
Michiel
Thank you so much, this was very helpful.
I am wondering if there is a document that contains all the css classes associated with the calendar… such as what you just sent me for the filter.
ie if i want to style the events themselves or other things.
Also i an issue in the listDay view in my widget where it doesn’t display the last event of the day…
Thank you for all your help. This plugin is amazing.
Hi,
Glad I could help.
If you can send me the URL of the page where you have this listDay issue, I can have a look.
Best wishes,
Michiel
http://www.minasidhom.com
Bottom right.
And if you can send me the names of the different css classes or where I can find them. Thank you so much.
I looked at the calendar on your website and I think it’s a timezone issue. Maybe you can solve this by setting the “timeZone” property on your widget in the “FullCalendar JSON config” textfield:
"timeZone": "America/New_York"
Or maybe another timezone in your case.
A full example:
{
"header": {
"left": "dayGridMonth,timeGridWeek,listWeek",
"center": "title",
"right": "today prev,next"
},
"timeZone": "America/New_York"
}
Regarding the CSS classes: when I have time I’ll add them to the plugin page at https://blog.michielvaneerd.nl/private-google-calendars/. If you want to look them up now, you can use the inspector console in your browser (F12 or rightclick and choose “Inspect”).
Thank you,
I added the timezone code but that didn’t work.
It seems to be eliminating the last event, so on days with just one event for example, it shows no events at all.
Hi,
Sorry to hear it didn’t work.
If I look to your website for today I see “May 5, 2020” and I can see that the following 2 events are downloaded (but not displayed in the calendar):
St Mary Ladies Meeting
start: 2020-05-04T19:00:00-04:00
end: 2020-05-04T20:30:00-04:00
Deaconate Class
start: 2020-05-04T20:00:00-04:00
end: 2020-05-04T21:00:00-04:00
If I go to the previous day, both events are displayed a short time and then only the St Mary Ladies Meeting remains visible but the Deaconate Class disappears.
I’m not sure what is the cause of this. I’ll investigate this in the near future.
Best wishes,
Michiel
Hi,
I’ve looked into this a little more and I see correct results if I add the “timeZone” to the widget.
Are you sure you have an uppercase “Z” in the “timeZone”? Without it, it won’t work.
So in your case:
“timeZone”: “America/New_York”
Michiel
Thank you for looking into it.
I am not sure where the error is. I have timezone the way you explained. here is a screenshot of my widget settings
Screenshot
Thank you so much for all your help
I searched on the internet for similar issues, and it’s maybe related to the FullCalendar link. If you start the calendar in dayList view, not all events are displayed.
I made a test page with the calendars you are using, see:
https://blog.michielvaneerd.nl/calendar-test/
This calendar starts out in month-view and now more events are displayed. Maybe you can have a look if you now see all events?
yes, i changed it to listWeek and other default views and it works fine and loads everything even when i switch to listDay after initial load in another view, it works fine… but listDay doesn’t work as a default view.
I am lost.
Thanks for trying out, we’re getting closer!
I’ve made a new release (v20200511) of the plugin and it may be solved now.
FYI: I’ve made another release v20200512 that corrected another timezone issue.
the latest release fixed the problem. thank you so much.
2 more questions:
Is there a way to change the check marks in the filter into X’s instead.
Is there a way to place the filter in the footer and add a title to it that says filter
Thank you so much
