SharePoint is a fantastic tool for creating intranets, portals and much more but it can sometimes be limited for when you want to achieve specific scenarios. One of my customers needed to redirect users from an Events web part's "See All" link to a specific page rather than the SharePoint default link. They also wanted the date filter to auto select today's date as the start date.
The below instructions are from João Ferreira's site (make sure to follow him!)
Article Link: How to use a script editor in modern SharePoint sites - HANDS ON SharePoint (handsontek.net) "Before installing the script editor, you will need the web part package. You can download a compiled version from here, if you want to compile the project yourself the source code is available here."
FYI, I find it easier to grab the compiled version.
Hopefully you made it back to this post after getting that bit done.
Next, add the web part to the top of your SharePoint page. I found adding it to the top of my page seemed to help performance for me, but I am not sure that's 100% true.
Next, I need to add my markup to the page, so I click on Edit markup.
Next, Toggle on the options as shown below.
Click into the Edit HTML Code box and you will be able to past in the script. I have checked across multiple tenants and the class identifier seems to be consistent. I changed the last part of the link to be dynamic as this changes on each page load.
var links = document.querySelectorAll("a[href*='Events.aspx']"); links = Array.from(links).filter(link => link.className.includes('seeAll') || link.textContent.includes('See All'));
You could inspect the site using Developer tools to use this approach for other webparts such as the News Webpart etc.
<script type="text/javascript">
(function modifyLinkHref() {
var checkExist = setInterval(function() {
// Attempt to select links more generically, then filter based on specific criteria.
var links = document.querySelectorAll("a[href*='Events.aspx']");
links = Array.from(links).filter(link => link.className.includes('seeAll') || link.textContent.includes('See All'));
// Get today's date in the format YYYY-MM-DD
var today = new Date();
var yyyy = today.getFullYear();
var mm = ('0' + (today.getMonth() + 1)).slice(-2); // Months are 0-indexed, add 1 to get the correct month and pad with leading zero if necessary
var dd = ('0' + today.getDate()).slice(-2); // Pad day with leading zero if necessary
var formattedToday = yyyy + '-' + mm + '-' + dd;
links.forEach(function(link) {
console.log("Element found, updating href...");
// Use the formattedToday variable for the StartDate parameter in the URL
link.setAttribute("href", "https://mytenant.sharepoint.com/sites/mysite/_layouts/15/Events.aspx?ListGuid=163d5ec1-6ca5-465d-bcde-3f041ddc5c45&Category=&StartDate=" + formattedToday + "&EndDate=2024-12-31&AudienceTarget=false");
});
if (links.length > 0) {
clearInterval(checkExist); // Stop checking once the element(s) are found and updated
} else {
console.log("Element not found, retrying...");
}
}, 100); // Check every 100 milliseconds
})();
</script>
Save the code in the webpart and republish the site and your link should now be pointing to your new page.
I should point out that this is custom code and not supported and may break at any time if Microsoft change something, however, it shows some of the things you can do with the script editor webpart in SharePoint online.