[英]Joomla: add calendar view to the filter
I made a list of events on Joomla 4 with custom fields and install a filter for them.我在 Joomla 4 上制作了一个带有自定义字段的事件列表,并为它们安装了一个过滤器。 The filter works well, but filtering by date is now based on a list of dates.
过滤器运行良好,但按日期过滤现在基于日期列表。 Example:
例子:
01 - December - 2022
02 - December - 2022
28 - November - 2022
29 - November - 2022
30 - November - 2022
...
How difficult is it to add a calendar instead of this list and do:添加日历而不是此列表并执行以下操作有多困难:
How should it work?它应该如何工作? I understand correctly that this is done only in the front end?
我正确理解这仅在前端完成? The list of dates that I need is already available in the filter as a list.
我需要的日期列表已经在过滤器中作为列表提供。 Tell me please the direction in which I need to work.
请告诉我我需要工作的方向。
The answer will be found.答案将会被发现。 You can take any ready-made Javascript calendar.
您可以使用任何现成的 Javascript 日历。 I use this: https://www.cssscript.com/create-simple-event-calendar-javascript-caleandar-js/
我用这个: https://www.cssscript.com/create-simple-event-calendar-javascript-caleandar-js/
Set it up according to the instructions, and where the dates are inserted in calendar code, insert my data array with dates from the filter.根据说明进行设置,在日历代码中插入日期的位置,插入我的数据数组,其中包含过滤器中的日期。 Everything is very simple.
一切都很简单。
An example that works for me.一个对我有用的例子。 You can use this principle, adapting to your conditions:
你可以使用这个原则,适应你的条件:
<script type="text/javascript">
jQuery(document).ready(function($){
var events = [
<?php foreach($options as $option) :
$date = date_format(date_create($option->getValue()),'d/m/Y');
$explodeDate = explode('/', $date);
$explodedDay = $explodeDate[0];
$explodedMonth = $explodeDate[1];
$explodedYear = $explodeDate[2];
$explodedMonth = $explodedMonth - 1;
if ($explodedDay >= 1 && $explodedDay <=9) {
$EventDate = str_replace("0", "", $explodedDay);
} else {
$EventDate = $explodedDay;
};
?>
{'Date': new Date(<?php echo $explodedYear; ?>, <?php echo $explodedMonth; ?>, <?php echo $explodedDay; ?>), 'Title': '<?php echo $EventDate; ?>', 'Link': '<?php echo Route::_($option->getLink()) ?>'},
<?php endforeach; ?>
];
var settings = {};
var element = document.getElementById('caleandar');
caleandar(element, events, settings);
});
The way the date comes from the database does not fit the calendar format, so with the help of PHP I had to convert the date and split the day, month and year separately.日期来自数据库的方式不符合日历格式,所以在PHP的帮助下我不得不转换日期并将日月年分开。 Also in the calendar, the first month is 0, so I had to subtract one digit from the month.
同样在日历中,第一个月是 0,所以我不得不从月份中减去一位数字。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.