Responsive Calendar?

• 

  jpiller3 · Member · May 6, 2014 at 5:19 pm

  • Copy link
  • Add topic to favorites

  The Google Calendar I embedded on the Events page is not appearing correctly on mobile. The calendar was much larger than the rest of the content. I was able to add a div tag and some CSS and got it to look like this: http://successcomputerconsulting.files.wordpress.com/2014/05/photo.png

  How do I get it to show the entire calendar within that space instead of hiding half of it?

  Another option would be to have a different calendar appear on desktops (month view) and mobile devices (agenda view) so it fits better on each, but I have no idea how to do that.

  HTML:

  <div class="calendar-container">
  [googleapps domain="www" dir="calendar/embed" query="showTitle=0&showCalendars=0&height=600&wkst=1&bgcolor=%23FFFFFF&src=th0td7ie810a2467bv172edums%40group.calendar.google.com&color=%232952A3&ctz=America%2FChicago" width="800" height="600" /]
  </div>

  CSS:

  .calendar-container {
      position: relative;
      padding-bottom: 75%;
      height: 0;
      overflow: hidden;
  }
  
  .calendar-container iframe {
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
  }

  The blog I need help with is: (visible only to logged in users)

• 

  hafizr · Member · May 7, 2014 at 2:42 am

  • Copy link

  Hi there,

  Table is notoriously difficult to make responsive on mobile screen. I think we can go with the different calendar approach as well.

  So if you can make this:

  <div class="calendar-container">
  [googleapps shortcode /]
  </div>
  
  <div class="calendar-container-mobile">
  [googleapps shortcode /]
  </div>

  You can then use CSS media query to show/hide them. Something like this:

  /* Mobile version */
  @media all and (max-width: 480px) {
    .calendar-container {
      display: none;
    }
    .calendar-container-mobile {
      display: block;
    }
  }
  
  /* Everything else */
  @media all and (max-width: 480px) {
    .calendar-container {
      display: block;
    }
    .calendar-container-mobile {
      display: none;
    }
  }

  I have no idea if this works, though, but try it first!

• 

  jpiller3 · Member · May 7, 2014 at 2:54 am

  • Copy link

  Tried it, and on my computer I can see both calendars, and on my iPhone I can only see the large monthly calendar (and it is too big for the page again).

  Any other ideas?

• 

  hafizr · Member · May 7, 2014 at 3:07 am

  • Copy link

  Sorry, the second part of the CSS is wrong. Should be:

  /* Everything else */
  @media all and (min-width: 481px) {
    .calendar-container {
      display: block;
    }
    .calendar-container-mobile {
      display: none;
    }
  }

• 

  jpiller3 · Member · May 7, 2014 at 4:22 am

  • Copy link

  That worked – thank you!