AddEvent styling, behaviour and some more

README.md

@@ -1,24 +1,27 @@
-# OuiCal
+# OuiCal2
 
 A simple JS library that enables you to add an "add to calendar" button for your upcoming events.
 
 ## Inspiration
 
-This project was inspired by [Eventbrite's](http://www.eventbrite.com/) add to calendar feature (which should have been open sourced #justSayin).
+This project was inspired by [Eventbrite's](http://www.eventbrite.com/) add to calendar feature (which should have been open sourced #justSayin). 
+
+Later, it was adjusted to look and behave more like [AddToCalendar](https://addtocalendar.com), which suddenly became a commercial tool, and very expensive too #justSayin.
 
 ## How to use it?
 
-Call 'createCalendar' with your event info, pass in any optional parameters such as a class and/ or id and boom! Insert your add-to-calendar div wherever you'd like.
+### Method 1
+
+Call 'addToCalendar' with your event info, pass in any optional parameters such as a class and/ or id and boom! Insert your add-to-calendar div wherever you'd like.
 
 The only fields that are mandatory are:
 
   - Event title
   - Start time
-  - Event duration, in minutes
 
-## Example
+#### Example
 
-    var myCalendar = createCalendar({
+    var myCalendar = addToCalendar({
       options: {
         class: 'my-class',
 
@@ -32,12 +35,19 @@ The only fields that are mandatory are:
         // Event start date
         start: new Date('June 15, 2013 19:00'),
 
+        // Event timezone. Will convert the given time to that zone
+        timezone: America/Los_Angeles,          
+
         // Event duration (IN MINUTES)
         duration: 120,
 
         // You can also choose to set an end time
         // If an end time is set, this will take precedence over duration
-        end: new Date('June 15, 2013 23:00'),     
+        // end: new Date('June 15, 2013 23:00'), 
+
+        // You can also choose to set 'all day'
+        // If this is set, this will override end time, duration and timezone
+        // allday:true,
 
         // Event Address
         address: 'The internet',
@@ -49,23 +59,62 @@ The only fields that are mandatory are:
 
     document.querySelector('#place-where-I-want-this-calendar').appendChild(myCalendar);
 
-[Here is a live example](http://carlsednaoui.github.io/add-to-calendar-buttons/example.html)
+### Method 2
+
+Write your events data in several hidden HTML tags with the right classnames, and wrap them in a div. Then call 'createCalendar' with the outer div and boom! The calendar is appended to your wrapping div.
+The only fields that are mandatory are:
+
+  - Event title
+  - Start time
+
+
+#### Example  
+
+    <div title="Add to Calendar" class="add-to-calendar">
+      <span class="start">12/18/2018 08:00 AM</span>
+      <span class="timezone">America/Los_Angeles</span>
+      <!--span class="end">12/18/2018 10:00 AM</span-->
+      <!--span class="duration">60</span-->
+      <!--span class="allday">true</span-->
+      <span class="title">Summary of the event</span>
+      <span class="description">Description of the event</span>
+      <span class="location">Location of the event</span>
+    </div>
+
+
+### method 3
+
+If you are ony interested in the data, call 'addToCalendarData' with your event info, pass in any optional parameters as described in method #1. An object with some html links is returned.
+
+
+#### Example
+
+    var caldata = addToCalendarData({
+      data: {
+        // Event title
+        title: 'Get on the front page of HN',
+
+        // Event start date
+        start: new Date('June 15, 2013 19:00'),
+
+        //.. and the rest was optional.
+
+      }
+    });
+    console.log(caldata);
 
-## Looking for Instant Gratification?
-[Copy OuiCal into Chrome's JS console](https://raw.github.com/carlsednaoui/ouical/master/ouical.js) (or whatever browser you're using).
 
+## Demo
 
-Then call this:
+[Here is a live example](https://commonpike.github.io/add-to-calendar-buttons/example.html)
 
-    document.getElementsByTagName('body')[0].appendChild(createCalendar({data:{title:"this is the title of my event", start: new Date(), duration: 90}}));
 
-\#winning!
 
 ## Calendar Generator
-Need to generate an add-to-calendar widget on the fly? No problem, [go here](http://carlsednaoui.github.io/add-to-calendar-buttons/generator/generator.html).
+Need to generate an add-to-calendar widget on the fly? No problem, [go here](https://commonpike.github.io/add-to-calendar-buttons/generator/generator.html).
 
 ## GitHub Project Page
-[Official Project Page](http://carlsednaoui.github.io/ouical/)
+[Official Project Page](http://commonpike.github.io/ouical/)
 
 ## License
 [MIT](http://opensource.org/licenses/MIT)

main.css → add-to-calendar.css

@@ -1,24 +1,46 @@
-#add-to-calendar-checkbox-label {
+/* --------------------
+	this css is embedded in the script in
+	minified version. it is here for reference
+	only
+-------------------- */
+
+.add-to-calendar {
+	position: relative;
+  text-align: left;
+}
+
+.add-to-calendar > * {
+	display:none;
+}
+
+.add-to-calendar > .add-to-calendar-widget {
+	display:block;
+}
+
+.add-to-calendar-label {
   cursor: pointer;
 }
 
-.add-to-calendar-checkbox ~ a {
+.add-to-calendar-checkbox + div.add-to-calendar-dropdown {
   display: none;
+  margin-left: 20px;
 }
 
-.add-to-calendar-checkbox:checked ~ a {
+.add-to-calendar-checkbox:checked + div.add-to-calendar-dropdown {
   display: block;
-  width: 150px;
-  margin-left: 20px;
 }
 
 input[type=checkbox].add-to-calendar-checkbox {
   position: absolute;
-  top: -9999px;
-  left: -9999px;
+  visibility:hidden;
+}
+
+.add-to-calendar-checkbox + div.add-to-calendar-dropdown a {
+	cursor:pointer;
+	display:block;
 }
 
-.add-to-calendar-checkbox ~ a:before {
+.add-to-calendar-checkbox + div.add-to-calendar-dropdown a:before {
   width: 16px;
   height: 16px;
   display: inline-block;
@@ -35,10 +57,70 @@ input[type=checkbox].add-to-calendar-checkbox {
   /*this is the default icon*/
 }
 
+.icon-off365:before {
+  /*this is the default icon*/
+}
+
 .icon-yahoo:before {
   background-position: -36px +4px;
 }
 
 .icon-google:before {
   background-position: -52px 0;
-}
+}
+
+/* --------------------
+    prettify
+-------------------- */
+
+.add-to-calendar-widget {
+	font-family:sans-serif;
+	margin: 1em 0;
+	position:relative;
+}
+
+.add-to-calendar-label {
+	display: inline-block;
+	background-color: white;
+  background-image: url(data:image/vndmicrosofticon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/wAAAAAAAAAAVlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/AAAAAFZWVv9WVlb///////////9WVlb///////////9WVlb///////////9WVlb///////////9WVlb/VlZW/wAAAABWVlb/VlZW////////////VlZW////////////VlZW////////////VlZW////////////VlZW/1ZWVv8AAAAAVlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/AAAAAFZWVv9WVlb///////////9WVlb///////////9WVlb///////////9WVlb///////////9WVlb/VlZW/wAAAABWVlb/VlZW////////////VlZW////////////VlZW////////////VlZW////////////VlZW/1ZWVv8AAAAAVlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/AAAAAFZWVv9WVlb///////////9WVlb///////////9WVlb///////////9WVlb///////////9WVlb/VlZW/wAAAABWVlb/VlZW////////////VlZW////////////VlZW////////////VlZW////////////VlZW/1ZWVv8AAAAAVlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/AAAAAFZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/1ZWVv9WVlb/VlZW/wAAAAAAAAAAVlZW/1ZWVv///////////1ZWVv9WVlb/VlZW/1ZWVv9WVlb///////////9WVlb/VlZW/wAAAAAAAAAAAAAAAAAAAABWVlb///////////9WVlb/AAAAAAAAAAAAAAAAVlZW////////////VlZW/wAAAAAAAAAAAAAAAAAAAAAAAAAAVlZW/1ZWVv9WVlb/VlZW/wAAAAAAAAAAAAAAAFZWVv9WVlb/VlZW/1ZWVv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==);
+  background-position: 10px 45%;
+	background-repeat:no-repeat;
+	padding: 1em 1em 1em 40px;
+	background-size: 20px 20px;
+	border-radius: 3px;
+	box-shadow: 0 0 0 0.5px rgba(50, 50, 93, .17), 
+		0 2px 5px 0 rgba(50, 50, 93, .1), 
+		0 1px 1.5px 0 rgba(0, 0, 0, .07), 
+		0 1px 2px 0 rgba(0, 0, 0, .08), 
+		0 0 0 0 transparent!important;	
+}
+
+.add-to-calendar-dropdown  {
+	position: absolute;
+	z-index: 99;
+	background-color: white;
+	top: 0;
+	left:0;
+	padding: 1em;
+	margin:0!important;
+	border-radius: 3px;
+	box-shadow: 0 0 0 0.5px rgba(50, 50, 93, .17), 
+		0 2px 5px 0 rgba(50, 50, 93, .1), 
+		0 1px 1.5px 0 rgba(0, 0, 0, .07), 
+		0 1px 2px 0 rgba(0, 0, 0, .08), 
+		0 0 0 0 transparent!important;
+}
+
+.add-to-calendar-dropdown a {
+	display: block;
+	line-height: 1.75em;
+	text-decoration: none;
+	color: inherit;
+	opacity:.7;
+}
+
+.add-to-calendar-dropdown a:hover {
+	opacity:1;
+}
+
+