Responsiveness Issues

Just to follow up, I think a (hopefully) easy fix would be to add the full title to the Tooltip hover. That way, when the title is too long to read, it is still visible on the tooltip. It’d also be nice, if possible, to do some custom formatting (line breaks) on the tooltip, and I’ve noticed that sometimes the tooltip is cut off by the edge of the calendar.

The other thing would be to possibly remove some of the nav elements below a certain screen size, because they break over two lines.

Ok, sorry for all of the posts. I’ve been able to do a little on my own, by modifying shortcodes.php, as follows:

if(($event->start_Time != NULL) && ($event->end_Time != NULL)){
				$tooltip = $event->summary." Start: ".$event->start_Time." - ";
                $tooltip .= "End: ".$event->end_Time;
                if(!empty($event->location)) $tooltip .= "Location: ".$event->location;
                if(!empty($event->description)) $tooltip .= " (".$event->description.")";
				$ev[] = array(
					'title' => "$event->summary",
					'start' => $event->start_Date.'T'.$event->start_Time,
					'end' => $event->end_Date.'T'.$event->end_Time,
					'allDay' => false,
					'tooltip' => $tooltip
					);
			}

(adding $event->summary to the tooltip)

The things I have left that I’m trying to accomplish:

1) Line breaks to make the tooltip more readable.

2) Force tooltips to be in viewable areas, on smaller screens. For example, the last day of the week always has the tooltip box shifted left, to be readable. But the 2nd to last, or 3rd from last, sometimes overflow out of the viewable area.

3) Forcing a minimum size on the calendar, so if it’s not initially displayed, I’m not forced to click a button to display it (this one is more on me, since I’m using it with another plugin.

Thanks!

Some further updates, to help with responsiveness:

I’ve been working on public/css/wp-gc-style.css . I found a few changes that help with making the tooltips useful on a small (phone) screen.

a.fc-event:hover:after {
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    top: -34px;
    color: #fff;
    content: attr(glose);
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 600%;
    max-width:200px;
    font-size: 9px
}

I changed the width and set a max-width, so that the window isn’t tiny on small phone screens. I also decreased the font size to 9 to make it fit a little better.

.fc-content-skeleton table tr td:nth-last-child(-n+3) a.fc-event:hover:after{
    right: 20%;

}

I also changed it to shift the last 3 tooltips to the left, not just the last one, for each row. This helps keep the tooltips more generally centered, and prevents overflow out of the visible area.

Hi,

We see you been working on the source code. that’s the risk if you’re not having a good knowledge of how the concept works. And for any help you can always contact our support team.

Thanks for your support!

EuroCizia Team