The Fullcalendar header is not responsive. So, when a smartphone is using a responsive theme, you have to scroll for the "month week day" options when holding it in portrait mode.

Here's a video demonstrating what I mean: http://youtu.be/jvauzaQw4dQ

Comments

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
CreditAttribution: tim.plunkett commented
Status: Active » Closed (won't fix)

Unfortunately, there's nothing the module can (or should) do about this.

You could probably write some custom CSS to work around that, but its a table element, so you'd probably need to file an issue in the plugin itself: http://code.google.com/p/fullcalendar/issues/list

bjlewis2’s picture

bjlewis2 CreditAttribution: bjlewis2 commented

Thanks Tim,
I posted it there. Do you know if I'll get an email when someone replies to it there?

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
CreditAttribution: tim.plunkett commented

If you "starred" it, you will.

BDuell’s picture

BDuell CreditAttribution: BDuell commented
Issue summary: View changes

This CSS seems to do the trick for us...

@charset "UTF-8";
/* FullCalendar CSS Document */

table.fc-header {
  table-layout: fixed;
  margin-left: auto;
  margin-right: auto;
}

table.fc-header td {
    white-space: normal;
}

td.fc-header-center .fc-header-title h2 {
    font-size: 16px;
}

td.fc-header-left {
    width: auto;
    vertical-align: middle;
    text-align: center;
}

td.fc-header-right {
    width: auto;
    vertical-align: middle;
    text-align: center;
}

.fc-header-title h2 {
    white-space: normal;
}

.fc .fc-header-space {
  visibility: hidden;
  display: none;
}
.fc-button {
  margin-left: 5px;
}
.fc-header .fc-corner-right, .fc-header .ui-corner-right {
  margin-right: 5px;
}

div.fc-content table {
  table-layout: fixed;
}
bjlewis2’s picture

bjlewis2 CreditAttribution: bjlewis2 commented

Just wanted to report back incase anyone else is looking for this. I was able to make the header responsive with the following css (it's actually Sass, in .scss form, but it's all the same.) You could probably remove some of the explicit tags, but this is what is working for me.

@include breakpoint(max-width $calendar-mobile) {
    /**
     * Header styles for small screens
     */
    table {
        // Header including: Navigation, Month name and View toggles (Month, Week, Day)
        &.fc-header {
            tbody {
                tr {
                    td {
                        width: 100%;
                        float: left;
                        text-align: center;
                        &.fc-header-center {
                            // Month name
                            .fc-header-title {
                                h2 {
                                margin: .5em 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}