Calendar Tweaks | How to change calendar text and color
Modified on: Tue, 26 Sep, 2023 at 2:19 PM
Text Script:
<script>
var myVar = setInterval(myTimer, 100);
function myTimer() {
if(document.getElementsByClassName('hl_button')[0]) {
document.getElementsByClassName('hl_button')[0].innerText = 'Continue'; //Your button text here
clearInterval(myVar);
}
}
</script>JavaScript
Text Script - For Team Calendar:
<script>
var myVar = setInterval(myTimer, 100);
function myTimer() {
if(document.getElementsByClassName('hl_button')[0]) {
document.getElementsByClassName('hl_button')[0].innerText = 'Test'; //Your button text here
clearInterval(myVar);
}
var myVar2 = setInterval(myTimer, 100);
if(document.getElementsByClassName('btn-schedule')[0]) {
document.getElementsByClassName('btn-schedule')[0].innerText = 'Test'; //Your button text here
clearInterval(myVar2);
}
}
</script>JavaScript
Custom CSS:
<style>
.vdpCell.selected .vdpCellContent, .hour-select input:checked+label, button.hl_button {
background-color: #005840 !important;
border-color: #005840 !important;
}
.vdpCell.selectable:hover .vdpCellContent
{
background-color: #4A9E86 !important;
}
.selectable .vdpCellContent
{
color: #000 !important;
}
.vdpCell.selected .vdpCellContent
{
color: #fff !important;
}
.load-more
{
color: #005840 !important;
}
.hour-select label:hover
{
background-color: #d1f0e7 !important;
border-color: #d1f0e7 !important;
}
.vdpArrowPrev:after
{
border-right-color: #005840;
}
.vdpArrowNext:after
{
border-left-color: #005840;
}
</style>CSS
Custom CSS for Team Calendars:
<style>
.vdpCell.selected .vdpCellContent, button.btn-schedule {
background-color: #005840 !important;
border-color: #005840 !important;
}
.widgets-time-slot span {
color: #005840 !important;
}
.widgets-time-slot, .widgets-time-slot:hover span{
border-color: #005840 !important;
}
.widgets-time-slot.actived span{
color: #fff !important;
background: #005840 !important;
border-color: #005840 !important;
}
.vdpCell.selectable:hover .vdpCellContent
{
background-color: #4A9E86 !important;
}
.selectable .vdpCellContent
{
color: #000 !important;
}
.vdpCell.selected .vdpCellContent
{
color: #fff !important;
}
.arrowPrevious rect, .arrowNext rect
{
stroke: #005840 !important;
}
.arrowPrevious path, .arrowNext path
{
fill: #005840 !important;
}
.action-back-link{
color: #005840 !important;
}
.action-back-link path {
fill: #005840 !important;
}
</style>