• Resolved DarthTater

    (@darthtater)


    I would like to display just a month name with navigation links to previous & next months, but without the drop-down list. Just the month name centered in between the nav links, same row. show_month_nav=1 always displays the drop-down list.

    Similar to this: https://www.micaflatsgrange.com/events.html

    I can hide the drop-down list by hiding that form element, but can’t figure out a way to insert the month name in between the nav links.

    I looked into css before /after to try to insert the month name between the nav links, but it wants a fixed string, and I want to the month name to change appropriately depending upon what the use has clicked on the nav links.

    I can display the month name by itself in the table hr, but it looks clumsy.

    Is there a way ti twiddle the drop-down box with a css before/after which would display the month name only, then hide the drop-down box? I’m pretty much a WordPress noobie and trying to achieve such a simple styling is making my head spin.

    Test site is here: https://wp.interiorhorsecouncil.com/events/

    Thank you, anyone, for suggestions & guidance.

    https://www.ads-software.com/plugins/amr-ical-events-list/

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author anmari

    (@anmari)

    Ideally one should have the appropriate html generated, not try to force things with css.

    You have some options:

    You could group by the month (see the list settings) like here
    https://test.icalevents.com/agenda/html5-agenda/
    and style that however you want. The plugin html provides heaps of CSS selectors. Set your number of events and months/days to match.

    You can add you own next/prev html before the shortcode – using offset parameters in the hyperlinks – see the navigation links at the bottom for examples. Also Read here https://icalevents.com/support/documentation/shortcodes/#parameters
    eg: prev and monthsoffset=1 for next month.

    or if have amr-events, there is an additional shortcode provided. See [month_prev_next]
    https://icalevents.com/support/documentation/shortcodes/

    Thread Starter DarthTater

    (@darthtater)

    Thank you, anmari, for the quick reply. Yes, I am grouping by the month which helped, but was unable to figure out how to add the next/prev html that would update the central month header name.

    I put in some fairly torturous & clunky css and it looks pretty sharp now, and works.

    New problem, though. I wanted to make the “summarY” field text a little bigger, but every time I try to add some html <style></style> tags into the fields for html before / html after, it won’t save or update.

    Thread Starter DarthTater

    (@darthtater)

    I was able to use some more duct tape, spit, and bailing wire on the css and things are looking pretty good now.

    I will therefore mark this as “resolved” even thought the solutions(s) were pretty kludgy.

    Thank you again for the nice plugin, and the help.

    Plugin Author anmari

    (@anmari)

    Hi
    Next and prev links are just hyperlinks (ie those <a href things ? ), But linking back onto the same page. Enter the html for the links before the short-code

    I gave it to you above – see under the ‘prev’ that is hyperlinked ?
    Replace “prev” with whatever you want
    The href part just passes the ?monthsoffset=x where x is 1 or -1

    As far as making the summary field bigger – please DO NOT use the before and after. Do it cleanly using Css.

    Use your browsers ‘inspect element’ or ‘view source’ to see all the css selectors that you can use.

    Thread Starter DarthTater

    (@darthtater)

    Hi Anmari,

    I’ll give the “next” & “prev” a try linking back to the same page, it would be cleaner that what is working now. “next” & “prev” as you described seemed to be working before, but the month name (for the month’s activities displaying) didn’t update. I’ll try that again, though.

    I didn’t use “::before or :: after”, but appreciate the caution.

    I do really like the look, it’s clean & very readable:

    This week’s task – getting different displays calendars working on the same page (event list & mini-calendar), and a smaller version of the list display for yet another page. ??

    I’ll be doing chores today, but will post another update in a few days to let you know how things are going.

    I appreciate all the help & feedback. I thought I knew html & css pretty well but things have changed a lot since I last used them seriously, 16 years ago.

    Have a great rest of the weekend.

    Thread Starter DarthTater

    (@darthtater)

    Hah, tried to include a link in last post above, and the entire remainder of the post turned into a link. Sorry about that. No ability to edit comments, so will just leave this addendum.

    Thread Starter DarthTater

    (@darthtater)

    So, here’s what I have on the page:

    ——————————————————-
    <div id=”event_nav”>
    <<>>
    </div>

    [iCal https://calendar.google.com/calendar/ical/admin%40interiorhorsecouncil.com/public/basic.ics https://calendar.google.com/calendar/ical/en.usa%23holiday%40group.v.calendar.google.com/public/basic.ics https://calendar.google.com/ical/admin%40micaflatsgrange.org/public/basic.ics months=1 show_month_nav=1 pagination=0 listtype=2]
    ——————————————————–

    If you click on the “<<” to move to the previous month, it will bring up the previous month, but if you click again, it will stay on that month. So you seemingly can’t just click thru the months with the html code as shown. Perhaps there’s a global variable that’s not being reset with each month change?

    I’ll leave the example page link up for a day or two. If I don’t hear back I’ll stick with the bubble gum / bailing wire css that I had working.

    Plugin Author anmari

    (@anmari)

    Yes HTML code is of course more static.

    Perhaps you would just be better off with something like
    .calendar_navigation form {display: none;}

    rather than buying amr-events just for the one shortcode.

    Thread Starter DarthTater

    (@darthtater)

    Ye, that’s pretty much what I had done before. I’ll put back my prior css so you can take a look.

    I still need to tinker with the sidebar box calendar styling.

    Thank you again for the help.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Table header row display with nav links but no drop-down box’ is closed to new replies.