This Joomla 4 override allows you to display a list of events simply using the Joomla's mod_articles_category 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;
}

?>

<div class="container">
	<?php foreach ($list as $item) : ?>
	<div class="row row-striped">
		
		<!-- Date event -->
		<div class="col-2 text-center">
			<h1 class="display-4"><span class="badge bg-danger"><?php echo JHtml::_('date', $item->created, "d"); ?></span></h1>
			<h2 class="text-danger"><?php echo JHtml::_('date', $item->created, "M"); ?></h2>
		</div>
		
		<div class="col-10">
			<!-- Article title -->
			<h3 class="text-uppercase"><strong>				
				<?php if ($params->get('link_titles') == 1) : ?>
				<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
				<?php else : ?>
				<?php echo $item->title; ?>
				<?php endif; ?>
			</strong></h3>
			
				<!-- Infos -->
          		<?php $item->urls = new JRegistry($item->urls); ?>
				<div class="d-flex justify-content-start">	
					<div class=""><i class="far fa-calendar pe-1"></i> <?php echo $item->urls->get('urlatext'); ?></div>
					<div class="px-4"><i class="far fa-clock pe-1"></i><?php echo $item->urls->get('urlbtext'); ?></div>
					<div class=""><i class="fas fa-location-arrow pe-1"></i><?php echo $item->urls->get('urlctext'); ?></div>
				</div>
				
				<!-- Introtext -->
				<?php if ($params->get('show_introtext')) : ?>
				<p class="mod-articles-category-introtext pe-5">
					<?php echo $item->displayIntrotext; ?>
				</p>
				<?php endif; ?>
		</div>
		
	</div>
	<?php endforeach; ?>
</div>

CSS

.row-striped:nth-of-type(odd){
  background-color: #efefef;
  border-left: 4px #000000 solid;
}

.row-striped:nth-of-type(even){
  background-color: #ffffff;
  border-left: 4px #efefef solid;
}

.row-striped {
    padding: 15px 0;
}

This Joomla 3 override allows you to display a list of events simply using the Joomla's mod_articles_category 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;

?>

<div class="container">
	<?php foreach ($list as $item) : ?>
	<div class="row row-striped">
	
		<!-- article date creation -->
		<div class="col-2 text-right">
			<h1 class="display-4"><span class="badge bg-danger"><?php echo JHtml::_('date', $item->created, "d"); ?></span></h1>
			<h2 class="text-danger ms-3"><?php echo JHtml::_('date', $item->created, "M"); ?></h2>
		</div>
		
		<div class="col-10">
			<!-- title -->
			<h3 class="text-uppercase"><strong>				
				<?php if ($params->get('link_titles') == 1) : ?>
					<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
				<?php else : ?>
					<?php echo $item->title; ?>
				<?php endif; ?>
			</strong></h3>
			
			<!-- custom fields -->
			    <?php $customFields = FieldsHelper::getFields('com_content.article', $item, true);
				foreach ($customFields as $customField){
				$customFields[$customField->name] = $customField;
				}?> 
			<ul class="list-inline">
				<li class="list-inline-item"><i class="far fa-calendar-alt"></i> <?php echo $customFields['jour']->value; ?></li>
				<li class="list-inline-item"><i class="far fa-clock"></i> <?php echo $customFields['horaires']->value; ?></li>
				<li class="list-inline-item"><i class="fas fa-location-arrow"></i> <?php echo $customFields['lieu']->value; ?></li>
			</ul>
			
			<!-- intro text -->
				<?php if ($params->get('show_introtext')) : ?>
					<p class="mod-articles-category-introtext">
						<?php echo $item->displayIntrotext; ?>
					</p>
				<?php endif; ?>
		</div>
		
	</div>
<?php endforeach; ?>
</div>

CSS

.row-striped:nth-of-type(odd){
  background-color: #efefef;
  border-left: 4px #000000 solid;
}

.row-striped:nth-of-type(even){
  background-color: #ffffff;
  border-left: 4px #efefef solid;
}

.row-striped {
    padding: 15px 0;
}

web-eau.net

France - 29800 Landerneau

+33 674 502 799

daniel@web-eau.net