Joomla: add calendar view to the filter

Question

I made a list of events on Joomla 4 with custom fields and install a filter for them. 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:

1. So that dates are active in the calendar only where there are events.
2. So that these dates in the calendar are highlighted in color

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.

Answer 1

The answer will be found. You can take any ready-made Javascript calendar. I use this: 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. Also in the calendar, the first month is 0, so I had to subtract one digit from the month.