DONE: ICS link on calendar page

CLOSED: TT4 Beta Users
1

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;

2020-01-21_15-24-36
2020-01-21_15-24-361321×937 148 KB

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.

2020-01-21_15-58-16
2020-01-21_15-58-161321×937 153 KB 

<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.

2020-01-21_16-02-14
2020-01-21_16-02-14411×731 54.6 KB

3 Likes
2

I agree it should be easier to get to. I’ve taken to copying that link to our “Private Home Page” so users can add it there without too much trouble. Still not convenient, but better than nothing.

3

Love it. Going to do it.

Thanks @PrestonKorn for all your help. You deserve a trophy!

2 Likes
4

Pushing it up in just a few minutes. Thanks again @PrestonKorn!