Google Calendar Link

by Dan Shahin

HTML

Text: <input id="text" value="test" /> <br>
Start Date: <input id="start_date" value="7/4/2018 5:00 pm" /> <br>
End Dates: <input id="end_date" value="7/4/2018 6:00 pm" /> <br>
Timezone: (difference from UTC)
<select id="timezone">
    <option value="0">UTC</option>
    <option value="4">EST</option><!-- NOT sure if this is right -->
    <option value="8">PST</option><!-- NOT sure if this is right -->
</select>
<p>
    Example of Dates:   <br>
    - Any JavaScript date - e.g. 1/1/2000 <br>
    - Can include time 1/1/2000 5:00 pm
    - 20140127T224000Z <br>
    - aka YYYYMMDD (just date) <br>
    - aka YYYYMMDDT######Z (date and time) <br>
</p>
<b>Optional</b><br>
Details: <textarea id="details"></textarea> <br>
Location: <input id="location" /> <br>
<button id="create_link">Create Link</button><br>
<section id="results" style="display:none;">
    Link: <span id="link"></span> <a id="actual_link" target="_blank">Open</a>
</section>

JavaScript

/*
key parameters
- text
- dates
- details
- location

<a href="http://www.google.com/calendar/event?
action=TEMPLATE
&text=[event-title]
&dates=[start-custom format='Ymd\\THi00\\Z']/[end-custom format='Ymd\\THi00\\Z']
&details=[description]
&location=[location]
&trp=false
&sprop=
&sprop=name:"
target="_blank" rel="nofollow">Add to my calendar</a>

TODO: 
Look at: `new Date('2014-01-23 5:00 pm est').toISOString()` that seems to work and I'm guessing it's more reliable
*/
$("#create_link").click(() => {
	try {
        let param = {};
        param.text = $("#text").val();
        // 20140127T224000Z/20140320T221500Z
        let start_date = new Date($("#start_date").val());
        let end_date = new Date($("#end_date").val());
        let has_time = ((start_date.getHours() > 0) || (end_date.getHours() > 0));
        let timezone = $("#timezone").val();
        if(has_time) { // TODO: Not sure about this functionality
        	let timezone = parseInt($("#timezone").val());
        	start_date.setHours(start_date.getHours() + timezone);
        	end_date.setHours(end_date.getHours() + timezone);
        }
        param.date = format_date(start_date)  + "/" + format_date(end_date);
        
        if($("#details").val()) {
        	param.details = $("#details").val();
        }
        
        if($("#location").val()) {
        	param.location = $("#location").val();
        }
        
        let link = "http://www.google.com/calendar/event?action=TEMPLATE&" + $.param(param);
        $("#link").text(link);
        $("#actual_link").attr("href", link);
        $("#results").show();
    } catch(ex) {
    	alert("Something went wrong. Check your inputs.");
    }
});

function zero_pad2(num) {
	if(num < 10) return "0" + num;
    return num;
}

function parse_time(time_string) {
	return new Date(`1/1/2000 ${time_string}`);
}

function format_date(date) {
  var day = date.getDate();
  var monthIndex = date.getMonth();
  var year = date.getFullYear();
  
  var hour =...