amr calendar events list - responsive

style.scss

.largecalendar caption {
    font-size: 28px;
    text-align: center;
}

#calprop0 {
    display: none;
}

.calendar_navigation input {
    &, &:active, &:hover, &:focus {
        padding: .3em 1em;
        margin: 0 1em;
        border: none;
    }
}

.week td {
    border: 1px solid silver;
}

@media (max-width: 750px) {
    .largecalendar {
        thead,
        td:not(.hasevents) { display: none; }

        tr { display: block; }

        .hasevents {
            display: block;
            width: 100% !important;
            height: auto !important;
            overflow: visible;
        }

        .details1,
        .details2 { display: inline !important; }

        .details1 { font-weight: 700; }

        .details2 {
            &:before { content: '('; }
            &:after { content: ')'; }
        }
    }

    #events_wrap table.ical .event:hover div.details2 {
        color: inherit;
        background: none;
        display: inherit;
        position: inherit;
        margin: inherit;
        padding: 0;
        width: inherit;
        z-index: 100;
        border: inherit;
        overflow: inherit;
        border: none;
    }

    #events_wrap table.ical td.endweek .event:hover  div.details2 {
        /* shift the last column right side over a bit so it fits on the page*/
        margin: inherit;
    }

}