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;
  }
}

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;
  }
}

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net