Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC:

Responsive Eventcalendar view 5 years 6 months ago #19187

  • Egnarts
  • Egnarts's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
  • Posts: 272
  • Thank you received: 114
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.
Take a look at the responsive version of JEM: The Responsive JEM
Attachments:
The following user(s) said Thank You: minminiweb

Please Log in or Create an account to join the conversation.

Last edit: by Egnarts.

Responsive Eventcalendar view 5 years 6 months ago #19188

what site template are you using?
I use a responsive t3_purity_iii and my calendar is responsive without your changes!
on JEM 2.3.0 stable in latest Joomla (3.9.22) Protostar php7.4.5

Please Log in or Create an account to join the conversation.

Responsive Eventcalendar view 5 years 6 months ago #19189

  • Egnarts
  • Egnarts's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
  • Posts: 272
  • Thank you received: 114
hey i am using rockettheme corvus. this template is also responsive, but on phones the calendar itself is not usable because 7 days in a row need too many space. thats why i change on phones "calendar" to "list" as you see in the screenshot.
Take a look at the responsive version of JEM: The Responsive JEM

Please Log in or Create an account to join the conversation.

Responsive Eventcalendar view 5 years 6 months ago #19190

I see and tried, looks good.
But I use the ajax calendar module from JEM 3 too, and with that then there is a problem
only to say for observation
on JEM 2.3.0 stable in latest Joomla (3.9.22) Protostar php7.4.5

Please Log in or Create an account to join the conversation.

Responsive Eventcalendar view 4 years 1 month ago #23329

I tried the changing for calendar view (not the module)

In JEM 2.2 there are some changings, I think I found in calendar.class.php
changings have to be in 647, 650 and 667
with the changings only in the div class
on JEM 2.3.0 stable in latest Joomla (3.9.22) Protostar php7.4.5

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Time to create page: 0.561 seconds

Donate

If you find JEM useful and if you use it on your site, please consider a donation to the project.

Private Messages

You are not logged in.

Follow us......