This Joomla 4 override allows you to display on your site the schedule of an event simply using the Joomla's mod_related_items module. At the bottom of this article, you can download the files of the override.
Joomla 4 frontend rendering
PhP markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category
* @author web-eau.net
* @copyright (C) 2010 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;
if (!$list)
{
return;
}
$db = JFactory::getDbo();
$query = $db->getQuery(true);
$query->select(array('id', 'title', 'description'));
$query->from($db->quoteName('#__categories'));
$query->where($db->quoteName('extension') . ' = ' . $db->quote('com_content'));
$db->setQuery($query);
$categories = $db->loadObjectList('title');
?>
<ul class="schedule-events-main category-module<?php echo $moduleclass_sfx; ?>">
<?php if ($grouped) : ?>
<?php foreach ($list as $group_name => $group) : ?>
<li class="schedule-events-date">
<h3 class="mod-articles-category-group"><?php echo $group_name; ?></h3>
<p><?php echo count($group) > 0 ? $categories[$group_name]->description : ''; ?></p>
</li>
<li class="schedule-events">
<ul class="list-unstyled schedule-events-detail">
<?php foreach ($group as $item) : ?>
<li>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
<span class="schedule-event-time"><?php echo $item->displayDate; ?> - </span> <!-- date format -->
<span class="schedule-event-name"><?php echo $item->title; ?></span> <!-- article title -->
<br />
<?php $item->urls = new JRegistry($item->urls); ?>
<span class="schedule-event-location"><?php echo $item->urls->get('urlatext'); ?></span>
</a>
</li>
<?php endforeach; ?>
</ul>
</li>
<?php endforeach; ?>
<?php else : ?>
<?php foreach ($list as $item) : ?>
<li class="schedule-events-date">
<h3 class="mod-articles-category-group"><?php echo $item->displayCategoryTitle; ?></h3>
<p>Title of the day</p>
</li>
<li>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
<span class="schedule-event-time"><?php echo $item->displayDate; ?> - </span> <!-- date format -->
<span class="schedule-event-name"><?php echo $item->title; ?></span> <!-- article title -->
<br />
<?php $item->urls = new JRegistry($item->urls); ?>
<span class="schedule-event-location"><?php echo $item->urls->get('urlatext'); ?></span>
</a>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul.schedule-events-main {
list-style: none;
max-width: 75%;
margin: 20px auto;
}
.schedule-events-date {
width: 17%;
padding: 15% 1% 0 0;
float: left;
margin-top: 15%;
}
.schedule-events-date h3 {
font-size: 1.5em;
}
.schedule-events-date p {
font-size: 0.8em;
}
.schedule-events {
float: left;
width: 80%;
border-left: 1px solid #ccc;
margin-top: 10%;
padding-top: 3%;
}
.schedule-events-detail {
max-width: 550px;
}
.schedule-events-detail li {
padding: 10px;
border-bottom: 1px dashed #ccc;
line-height: 22px;
transition: ease 0.4s all;
}
.schedule-events-detail li:hover {
background: #e9e9e9;
}
.schedule-event-time {
font-weight: 900;
}
.schedule-events-detail li a {
text-decoration: none;
color: #444;
width: 100%;
height: 100%;
display: block;
}
.schedule-event-location {
font-size: 0.8em;
color: tomato;
margin-left: 65px;
}
@media all and (max-width: 641px) {
.schedule-events-date {
width: 100%;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
.schedule-events {
border: none;
width: 100%;
margin-top: 0;
}
.schedule-events-detail {
padding: 0;
}
li.schedule-events-date p {
margin: 0;
}
}
Inspiration: https://codepen.io/tywlacock/pen/gpGEK
This Joomla 3 override allows you to display on your site the schedule of an event simply using the Joomla's mod_related_items module. At the bottom of this article, you can download the files of the override.
Joomla 3 frontend rendering
PhP markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category
* @author web-eau.net
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
$db = JFactory::getDbo();
$query = $db->getQuery(true);
$query->select(array('id', 'title', 'description'));
$query->from($db->quoteName('#__categories'));
$query->where($db->quoteName('extension') . ' = ' . $db->quote('com_content'));
$db->setQuery($query);
$categories = $db->loadObjectList('title');
?>
<ul class="schedule-events-main category-module<?php echo $moduleclass_sfx; ?>">
<?php if ($grouped) : ?>
<?php foreach ($list as $group_name => $group) : ?>
<li class="schedule-events-date">
<h3 class="mod-articles-category-group"><?php echo $group_name; ?></h3>
<p><?php echo count($group) > 0 ? $categories[$group_name]->description : ''; ?></p>
</li>
<li class="schedule-events">
<ul class="list-unstyled schedule-events-detail">
<?php foreach ($group as $item) : ?>
<li>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
<span class="schedule-event-time"><?php echo $item->displayDate; ?> - </span> <!-- date format -->
<span class="schedule-event-name"><?php echo $item->title; ?></span> <!-- article title -->
<br />
<?php $item->urls = new JRegistry($item->urls); ?>
<span class="schedule-event-location"><?php echo $item->urls->get('urlatext'); ?></span>
</a>
</li>
<?php endforeach; ?>
</ul>
</li>
<?php endforeach; ?>
<?php else : ?>
<?php foreach ($list as $item) : ?>
<li class="schedule-events-date">
<h3 class="mod-articles-category-group"><?php echo $item->displayCategoryTitle; ?></h3>
<p>Title of the day</p>
</li>
<li>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
<span class="schedule-event-time"><?php echo $item->displayDate; ?> - </span> <!-- date format -->
<span class="schedule-event-name"><?php echo $item->title; ?></span> <!-- article title -->
<br />
<?php $item->urls = new JRegistry($item->urls); ?>
<span class="schedule-event-location"><?php echo $item->urls->get('urlatext'); ?></span>
</a>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul.schedule-events-main {
list-style: none;
max-width: 75%;
margin: 20px auto;
}
.schedule-events-date {
width: 17%;
padding: 15% 1% 0 0;
float: left;
margin-top: 15%;
}
.schedule-events-date h3 {
font-size: 1.5em;
}
.schedule-events-date p {
font-size: 0.8em;
}
.schedule-events {
float: left;
width: 80%;
border-left: 1px solid #ccc;
margin-top: 10%;
padding-top: 3%;
}
.schedule-events-detail {
max-width: 550px;
}
.schedule-events-detail li {
padding: 10px;
border-bottom: 1px dashed #ccc;
line-height: 22px;
transition: ease 0.4s all;
}
.schedule-events-detail li:hover {
background: #e9e9e9;
}
.schedule-event-time {
font-weight: 900;
}
.schedule-events-detail li a {
text-decoration: none;
color: #444;
width: 100%;
height: 100%;
display: block;
}
.schedule-event-location {
font-size: 0.8em;
color: tomato;
margin-left: 65px;
}
@media all and (max-width: 641px) {
.schedule-events-date {
width: 100%;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
.schedule-events {
border: none;
width: 100%;
margin-top: 0;
}
.schedule-events-detail {
padding: 0;
}
li.schedule-events-date p {
margin: 0;
}
}
Inspiration: https://codepen.io/tywlacock/pen/gpGEK