Google Calendar Events
[resolved] Tabbed (jquery) day view using this plugin? (3 posts)

  1. rolling-stone
    Posted 2 years ago #

    Hi, I love the plugin, working perfectly, but....

    I'd like to use it to have a javascript tabbed display with 7 tabs, one for each day, which when clicked, show the events for their respective days. (Like this)

    Ideally implemented like this...

    <div class="simpleTabs">
    		        <ul class="simpleTabsNavigation">
    		            <li><a href="#">Today</a></li>
    		            <li><a href="#">php today + 1</a></li>
    		            <li><a href="#">php today + 2 (and so on)</a></li>
      [google-calendar-events id="2" type="list-grouped" title="" max="25"]

    ...But to do that I would have to enclose each day of events in a div class called simpleTabsContent I think. Is that possible? And would that cause problems that can't be fixed? (I managed to get the ul that each day sits in styled to look how I need it but, but I can't get the tabs to work with ul's, I need the div class.

    I was hoping I can do some small edits to gogle-calendar-events.php and the css to get what I need?

    Thanks in advance for any help!


  2. Ross Hanney
    Plugin Contributor

    Posted 2 years ago #

    Hi Nick,

    You could do this without altering the plugin code, by using 7 separate feeds, using the "Retrieve events from" and "Retrieve events until" options to retrieve 1 day's worth of events per feed.

    The feeds would be set up as follows:

    Feed 1:

    • Retrieve events from: 00:00 today
    • Retrieve events until: 00:00 today, with an offset of 86400

    Feed 2:

    • Retrieve events from: 00:00 today, with an offset of 86400
    • Retrieve events until: 00:00 today, with an offset of 172800

    Feed 3:

    • Retrieve events from: 00:00 today, with an offset of 172800
    • Retrieve events until: 00:00 today, with an offset of 259200

    and so on (incrementing the offsets by 86400).

    The markup for your page would look something like this:

    <div class="simpleTabs">
    	<ul class="simpleTabsNavigation">
    		<li><a href="#">Tab 1</a></li>
    		<li><a href="#">Tab 2</a></li>
    		<li><a href="#">Tab 3</a></li>
    	<div class="simpleTabsContent">[google-calendar-events type="list" id="1"]</div>
    	<div class="simpleTabsContent">[google-calendar-events type="list" id="2"]</div>
    	<div class="simpleTabsContent">[google-calendar-events type="list" id="3"]</div>

    It's not particularly elegant, but it should do the trick! Let me know if you have any questions.

  3. rolling-stone
    Posted 2 years ago #

    I was trying to avoid that method but I've followed your advice, and it's working beautifully. Thanks for taking the time.

    You really have made an excellent plugin!

    I'm sure I had another question but I can't think of it right now. Probably speak again soon.

    All the best,

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Google Calendar Events
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic