Try ShortPoint nowBy default, when you connect a SharePoint Calendar List to a Design Element, the time is automatically shown with the date:
This article will demonstrate how to hide the time using JavaScript code:
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must have a Design Element connected to a SharePoint Calendar List.
- Your date property must be in the Subtitle field:
Interactive Tutorial
Before starting the interactive tutorial, copy the JavaScript code below:
const removeTimeFromElements = () => {
const elements = document.querySelectorAll('#events-image-list .shortpoint-listitem-subtitle');
if (elements.length > 0) {
elements.forEach(element => {
const dateTimeText = element.textContent.trim();
const dateOnly = dateTimeText.split(' ')[0];
element.textContent = dateOnly;
});
console.log(`Updated ${elements.length} date elements`);
return true;
}
return false;
};
const checkInterval = setInterval(() => {
removeTimeFromElements();
}, 1000);
setTimeout(() => {
clearInterval(checkInterval);
}, 10000);NOTEYou can use any ID name you want. Just don’t forget to replace #events-image-list in the JavaScript code above.
Step-by-step Tutorial
Follow the detailed guide below to learn how to hide time in a connected SharePoint Calendar list:
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit:
- Close the Toolbox:
- Click the ShortPoint tag.
- Select the Edit Properties icon:
Step 2: Edit the Connected Design Element
NOTEBefore proceeding, you must have a Design Element connected to a SharePoint Calendar List. In our case, we will use a connected Image List. In addition, the date property must be in the Subtitle field. For example, our date property is #Start:
- Click the EasyPass tag of the connected Design Element:
- Select the cogwheel icon:
Step 3: Add an ID Name
- Click the next icon:
- Go to the Custom CSS tab.
- Write “events-image-list” as the ID name:
NOTEYou can use any ID name you want. Just make sure to take note of it as you will need to replace #events-image-list in the JavaScript code.
- Click the green check mark.
Step 4: Copy the JavaScript Code
- Copy the JavaScript Code below:
const removeTimeFromElements = () => {
const elements = document.querySelectorAll('#events-image-list .shortpoint-listitem-subtitle');
if (elements.length > 0) {
elements.forEach(element => {
const dateTimeText = element.textContent.trim();
const dateOnly = dateTimeText.split(' ')[0];
element.textContent = dateOnly;
});
console.log(`Updated ${elements.length} date elements`);
return true;
}
return false;
};
const checkInterval = setInterval(() => {
removeTimeFromElements();
}, 1000);
setTimeout(() => {
clearInterval(checkInterval);
}, 10000);NOTEIf you used a different ID name, make sure to replace #events-image-list in the JavaScript code.
Step 5: Add the Code Design Element
- Click the pink plus icon below your connected Design Element:
- Look for Code and select it.
Step 6: Paste the Code
- Paste the code in the JavaScript field:
Step 7: Disable Sandbox Mode
- Go to the Design tab.
- Disable Sandbox Mode:
- Click the green check mark.
Step 8: Save
- Click the eye icon to see your page in real-time:
- Click Save to apply all your changes:
Related articles:
