Hey,
on my website i saw that the calendar is not nice on mobile phones.So i tryed to make it responsive.
What i have done is in the "calendar.css" some aditional styles at the bottom of the file.
@media only screen and (max-width: 768px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td,tr {
display: inline;
}
/* Nobody needs the Row with the daynames anymore */
tr.daynamesRow {
display:none;
}
/* Save place for the important information */
td.nomonthday {
display:none;
}
/* Otherwhise there are some litle borders */
div#jem td {
border: 0px solid #cacaca;
}
/* This runs only if you change somethin in the calendar.class.php
* change line 643 from:
* $out = "<td class=\"".implode(' ', $cssClass)."\"><div class=\"daynum\">".$linktext.'</div>'.$eventContent."</td>";
* to:
* $out = "<td class=\"".implode(' ', $cssClass)."\"><div class=\"daynum\" eemonthname=\"".$this->getMonthName()."\" eedayname=\"".$this->getDayName($this->getWeekday($var))."\">".$linktext.'</div>'.$eventContent."</td>";
* after this you will see the days like "Mo, 2. August" instead of only the daynumber */
td.monthday div.daynum::after {
content: ". " attr(eemonthname);
}
td.monthday div.daynum::before {
content: attr(eedayname) ", ";
}
}
And like you read there, i have to edit the calendar.class.php file in components->com_jem->classes.
There i have changed the line 643 to give the <div class="daynum"> two aditional attributes, called eedayname und eemonthname. After this you will see a list of the events in your calendar. (Screenshot)
I wrote this because eventually something else looks for such a solution.
Eventually you have some tips to make it better.