Hi there. One of the biggest challenges I’ve run into with troop track is helping users find the URL to the ICS and then helping them subscribe to the troop calendar.
While you can’t help with the latter, it would be very helpful to have the link right on the calendar page. It would be easy to send them to the calendar. For the most part, I know they can find that.
If there is no security issues with having that there, I suggest something like this where the copy button puts the url into the clipboard;
Here’s that code for the fc-left div:
<div class="fc-left">
<style>
#icsUrl {
max-width: 300px;
min-width: 250px;
font-size: .7em;
}
.btn-xs {
padding: 1px 3px !important;
font-size: 10px !important;
line-height: 1.5 !important;
border-radius: 3px !important;
}
.icsButton {
color: #9F9DA3 !important;
background-color: #ffffff !important;
border-color: #9F9DA3 !important;
border-width: 1px !important;
float: left;
margin-left: 8px;
margin-bottom: 8px;
}
.icsButton:hover,
.icsButton:focus,
.icsButton:active,
.icsButton.active,
.open .dropdown-toggle.icsButton {
color: #ffffff;
background-color: #6F3BB3;
border-color: #797685;
}
.icsButton:active,
.icsButton.active,
.open .dropdown-toggle.icsButton {
background-image: none;
}
.icsButton.disabled,
.icsButton[disabled],
fieldset[disabled] .icsButton,
.icsButton.disabled:hover,
.icsButton[disabled]:hover,
fieldset[disabled] .icsButton:hover,
.icsButton.disabled:focus,
.icsButton[disabled]:focus,
fieldset[disabled] .icsButton:focus,
.icsButton.disabled:active,
.icsButton[disabled]:active,
fieldset[disabled] .icsButton:active,
.icsButton.disabled.active,
.icsButton[disabled].active,
fieldset[disabled] .icsButton.active {
background-color: #9F9DA3;
border-color: #797685;
}
.icsButton .badge {
color: #9F9DA3;
background-color: #ffffff;
}
</style>
<h2 style="display: block; margin-left: 0px;">January 2020</h2><br>
<div class="form-group" style="margin-left: 0px !important; margin-right: 20px !important;">
<label for="icsUrl" style="font-size: .8em;font-size: .8em; display: block; float: left;">ICS URL</label>
<button class="btn-xs icsButton" id="icsButton" style="float: left; margin-left: 8px; margin-bottom: 8px;" onclick="toClipboard()">COPY</button>
<input type="text" class="form-control form-control-sm" id="icsUrl" value="https://troop-7039.trooptrack.com/calendar.ics" disabled>
</div>
</div>OR, a placement at the bottom of the calendar. Notice, using a text field makes manual copy easier for a user. It’s pretty easy to grab the URL with javascript as well in a text input.
<div class="icsDiv">
<style>
.icsDiv {
margin-top: 20px;
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
#icsUrl {
max-width: 300px;
min-width: 250px;
font-size: .7em;
}
.btn-xs {
padding: 1px 3px !important;
font-size: 10px !important;
line-height: 1.5 !important;
border-radius: 3px !important;
}
.icsButton {
color: #9F9DA3 !important;
background-color: #ffffff !important;
border-color: #9F9DA3 !important;
border-width: 1px !important;
float: left;
margin-left: 8px;
margin-bottom: 4px;
}
.icsButton:hover,
.icsButton:focus,
.icsButton:active,
.icsButton.active,
.open .dropdown-toggle.icsButton {
color: #ffffff;
background-color: #6F3BB3;
border-color: #797685;
}
.icsButton:active,
.icsButton.active,
.open .dropdown-toggle.icsButton {
background-image: none;
}
.icsButton.disabled,
.icsButton[disabled],
fieldset[disabled] .icsButton,
.icsButton.disabled:hover,
.icsButton[disabled]:hover,
fieldset[disabled] .icsButton:hover,
.icsButton.disabled:focus,
.icsButton[disabled]:focus,
fieldset[disabled] .icsButton:focus,
.icsButton.disabled:active,
.icsButton[disabled]:active,
fieldset[disabled] .icsButton:active,
.icsButton.disabled.active,
.icsButton[disabled].active,
fieldset[disabled] .icsButton.active {
background-color: #9F9DA3;
border-color: #797685;
}
.icsButton .badge {
color: #9F9DA3;
background-color: #ffffff;
}
</style>
<div class="row">
<div class="col align-self-end" style="width: 250px;">
<label for="icsUrl" style="font-size: .8em;font-size: .8em;">ICS URL</label>
<input type="text" class="form-control form-control-sm" id="icsUrl" value="https://troop-7039.trooptrack.com/calendar.ics">
</div>
<div class="col align-self-end">
<button class="btn-xs icsButton" id="icsButton" style="margin-right: 8px;">COPY</button>
</div>
</div>
</div>It would be so nice for a mobile user to just hit that copy button when configuring their calendar subscription on their phone.
