This Joomla 4 override allows you to display a series of events, meetings (or whatever) simply using Joomla's mod_articles_news module. At the bottom of this page, you can download the files for the Joomla 4 version.

Joomla 4 frontend rendering

Joomla override - Agenda activities

Markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_news
		* @author	   web-eau.net
		* @copyright   (C) 2006 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;
	
	if (!$list)
	{
		return;
	}
	
?>

<div class="row">   
	<div class="recent-activities card">
		
		<div class="card-header text-info text-center">
			<h3 class="h4">Agenda Activities</h3> <!-- category title -->
		</div>
		
		<div class="card-body no-padding">	
			
			<?php foreach ($list as $item) : ?>
			
			<div class="item">
				<div class="row">			
					
					<div class="col-4 date-holder text-end">
						<div class="icon"><i class="fas fa-clock"></i></div>							
						<div class="date"> 
							<?php $item->urls = new JRegistry($item->urls); ?>
							<span class="text-info">
								<?php echo $item->urls->get('urlatext'); ?> <!-- text A url --> - 
								<?php echo $item->urls->get('urlbtext'); ?> <!-- text B url -->
							</span>
						</div>
					</div>
					
					<div class="col-8 content">									
						<h5>								
							<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
						</h5>
						<p class="card-text description"><?php echo $item->introtext; ?></p>	
					</div>
					
				</div>
			</div>
			<?php endforeach; ?>
			
		</div>
	</div>
</div>

CSS

.recent-activities .item {
    padding: 0 15px;
    border-bottom: 1px solid #eee
}
.recent-activities .item div[class*='col-'] {
    padding: 15px
}
.recent-activities h5 {
    font-weight: 400;
    color: #333
}
.recent-activities p {
    font-size: 0.75em;
    color: #999
}
.recent-activities .icon {
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: #f5f5f5;
    text-align: center;
    display: inline-block
}
.recent-activities .date {
    font-size: 0.75em;
    color: #999;
    padding: 10px
}
.recent-activities .date-holder {
    padding: 0 !important;
    border-right: 1px solid #eee
}

This Joomla 3 override allows you to display a series of events, meetings (or whatever) simply using Joomla's mod_articles_news module. At the bottom of this page, you can download the files for the Joomla 3 version.

Joomla 3 frontend rendering

Joomla override - Agenda activities

Markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_news
		* @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">
    <div class="row">   
		<div class="recent-activities card">
			
			<div class="card-header text-info text-center">
				<h3 class="h4">Agenda Activities</h3> <!-- category title -->
			</div>
			
			<div class="card-body no-padding">	
			
			<?php foreach ($list as $item) : ?>
			
				<div class="item">
					<div class="row">			
			
						<div class="col-4 date-holder text-right">
							<div class="icon"><i class="fa fa-clock-o"></i></div>							
							<div class="date"> 
								<?php $item->urls = new JRegistry($item->urls); ?>
								<span class="text-info"><?php echo $item->urls->get('urlatext'); ?> <!-- text A url --> - <?php echo $item->urls->get('urlbtext'); ?></span><!-- text B url -->
							</div>
						</div>

						<div class="col-8 content">									
							<h5>								
								<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
							</h5>
							<p class="card-text description"><?php echo $item->introtext; ?></p>	
						</div>
					
					</div>
				</div>
			<?php endforeach; ?>
			
			</div>
		</div>
	</div>
</div>

CSS

.recent-activities .item {
    padding: 0 15px;
    border-bottom: 1px solid #eee
}
.recent-activities .item div[class*='col-'] {
    padding: 15px
}
.recent-activities h5 {
    font-weight: 400;
    color: #333
}
.recent-activities p {
    font-size: 0.75em;
    color: #999
}
.recent-activities .icon {
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: #f5f5f5;
    text-align: center;
    display: inline-block
}
.recent-activities .date {
    font-size: 0.75em;
    color: #999;
    padding: 10px
}
.recent-activities .date-holder {
    padding: 0 !important;
    border-right: 1px solid #eee
}

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net