Trying to use column when displaying google calendar

  • Resolved davidconover

    (@davidconover)


    9 years, 11 months ago

    Phil.
    Thanks for the great plug in and for your help.

    I am working on a website for our international school in Kiev, Ukraine. I am able to pull my calendar in (https://weekwithoutwalls.kis.net.ua/calendar) but am having some issues with formatting.

    I would like to use two columns and have the event Time and location in the left side and the description on the right hand side. I have been trying to use the short codes [one_half][/one_half] and [one_half_last][/one_half_last] but to no avail as it messes up the formatting of the entire page (including sidebars) when I do this.

    Here is the current feed details…

    <h4 class=”gce-list-event gce-tooltip-event”><span style=”color: #000000;”>[event-title]</span></h4>
    <div><span style=”color: #000000;”>Time</span>: [start-time] to?[end-time]</div>
    [if-location]
    <div><span style=”color: #000000;”>Location</span>: [location]</div>
    [/if-location]
    [if-description]
    <div><span style=”color: #000000;”>Description</span>: [description]</div>
    [/if-description]
    <div></div>

    While I am being needy… would love to change the formatting of the dates to <h4> as well.

    Thanks so much for your help.

    David Conover
    Week Without Walls Coordinator
    Kiev International School

    https://www.ads-software.com/plugins/google-calendar-events/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Nick Young

    (@nickyoung87)

    What you will likely need to do is just add some HTML markup to your event builder codes.

    You can add your own classes to use in CSS in there as well. By doing that you can then use CSS to try and get the desired look you feel for.

    To change the formatting of the date you will just need to wrap your event builder code for date related stuff with an <h4> tag.

    A small example would be something like this for your event builder codes:
    <div class=”event-wrap”>
    <div class=”left”>
    <h4>[event-title]</h4>
    <h4>[start-time] – [end-time]</h4>
    </div>
    <div class=”right”>
    [description]
    </div>
    </div>

    With some CSS:

    .event-wrap { width: 500px; }
    .event-wrap .left { float: left; }
    .event-wrap .right { float: right; }

    This is an untested example that is only meant to show you the flexibility and hopefully get you going in the right direction.

    Hope it helps!

    Plugin Contributor Nick Young

    (@nickyoung87)

    Assuming resolved since there has not been a reply here lately. Please let us know if we can help you in any other way.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Trying to use column when displaying google calendar’ is closed to new replies.

Tags