Made various non-breaking feature improvements and additions

README.md

@@ -1,8 +1,20 @@
-######v0.0.1
-#Caleandar 
+# Caleandar v0.1.1
 Let me keep the intro brief. It's a lightweight (about `7.5kb` minified at the time of writing) and library-independent calendar script with optional themes. You can add events to the calendar and add functionality on click of the event. That's about the jist of it. Continue reading for instructions on how to use and examples.
 
-###Installing
+## What's New in v0.1.1
+I forked from the 2016 version in Aug 2020 to make a few minor changes, including:
+* Limiting navigation to a minimum and maximum month.
+* Using a `ClickEvent` without removing the href from the link anchor tag.
+* Added option to disable hover text tips.
+* Changed cells to anchors so they can be clicked and opened in new tab (enable `MakeEachCellAnchor = true`).
+* Navigating forwards/backwards a full year at a time.
+* Allowed `adjuster` argument of `createCalendar()` to accept a Date to set the calendar to a specific date.
+	* This could be used to have links within the web page to link to a certain day, with minor changes to the instantiation process.
+	* However, it was not actually used, and is not thoroughly tested.
+
+Note that I only tested these features with **theme 1 and theme 2**, so there is no guarantee they work with your own application. Testing was not exhaustive, and only minimal testing was done on Theme 1.
+
+## Installing
 Simply download the caleandar.js file and any of the css themes you'd like. Then include a reference to the file(s) in your html:
 ```
 <script type="text/javascript" src="js/caleandar.min.js"></script>
@@ -14,16 +26,17 @@ plus any of the following optional css files
 <link rel="stylesheet" href="css/theme3.css"/>
 ```
 
-###Instantiating
+## Instantiating
 At it's simplest, call the `calendar()` function with the following 3 optional parametars:
 ```
 caleandar(element, events, settings);
 ```
 Where `element` is an HTML element, `events` is an array of event objects and `settings` is an object of settings. Pretty straightforward so far.
 
-####Element
+### Element
 A single HTML element.
-######Examples:
+
+#### Examples:
 `var element = caleandar(document.querySelector('#foo'));`
 
 `var element = caleandar(document.getElementById('foo'));`
@@ -33,59 +46,67 @@ A single HTML element.
 or if you are using jQuery:
 `var element = caleandar($('#foo'));`
 
-####Events
+### Events
 An array of event objects to be placed on their respective dates on the calendar.
-######Examples:
+
+#### Examples:
 Using Simple links for events:
 ```
 var events = [
-  {'Date': new Date(2016, 6, 1), 'Title': 'Doctor appointment at 3:25pm.'},
-  {'Date': new Date(2016, 6, 7), 'Title': 'New Garfield movie comes out!', 'Link': 'https://garfield.com'},
-  {'Date': new Date(2016, 6, 11), 'Title': '25 year anniversary', 'Link': 'https://www.google.com.au/#q=anniversary+gifts'},
+	{'Date': new Date(2016, 6, 1), 'Title': 'Doctor appointment at 3:25pm.'},
+	{'Date': new Date(2016, 6, 7), 'Title': 'New Garfield movie comes out!', 'Link': 'https://garfield.com'},
+	{'Date': new Date(2016, 6, 11), 'Title': '25 year anniversary', 'Link': 'https://www.google.com.au/#q=anniversary+gifts'},
 ];
 ```
 Using anonymous functions to instantiate on click:
 ```
 var events = [
-  {'Date': new Date(2016, 6, 1), 'Title': 'Doctor appointment at 3:25pm.', 'Link': function(){console.log('Reminder!');}},
-  {'Date': new Date(2016, 6, 7), 'Title': 'New Garfield movie comes out!', 'Link': function(){alert("Better not miss the movie!");}},
-  {'Date': new Date(2016, 6, 11), 'Title': '25 year anniversary', 'Link': function(){console.debug(document.getElementById('foo'));}},
+	{'Date': new Date(2016, 6, 1), 'Title': 'Doctor appointment at 3:25pm.', 'Link': function(){console.log('Reminder!');}},
+	{'Date': new Date(2016, 6, 7), 'Title': 'New Garfield movie comes out!', 'Link': function(){alert("Better not miss the movie!");}},
+	{'Date': new Date(2016, 6, 11), 'Title': '25 year anniversary', 'Link': function(){console.debug(document.getElementById('foo'));}},
 ];
 ```
 
-####Settings
-Below are all the possible settings attributes with example values.
+### Settings
+Below are all the possible settings attributes with example values (the defaults, mostly).
 ```
 var settings={
-    Color: '#999',                //(string - color) font color of whole calendar.
-    LinkColor: '#333',            //(string - color) font color of event titles.
-    NavShow: true,                //(bool) show navigation arrows.
-    NavVertical: false,           //(bool) show previous and coming months.
-    NavLocation: '#foo',          //(string - element) where to display navigation, if not in default position.
-    DateTimeShow: true,           //(bool) show current date.
-    DateTimeFormat: 'mmm, yyyy',  //(string - dateformat) format previously mentioned date is shown in.
-    DatetimeLocation: '',         //(string - element) where to display previously mentioned date, if not in default position.
-    EventClick: '',               //(function) a function that should instantiate on the click of any event. parameters passed in via data link attribute.
-    EventTargetWholeDay: false,   //(bool) clicking on the whole date will trigger event action, as opposed to just clicking on the title.
-    DisabledDays: [],             //(array of numbers) days of the week to be slightly transparent. ie: [1,6] to fade Sunday and Saturday.
-    ModelChange: model            //(array of objects) new data object to pass into calendar (serving suggestion: passing through only the currently selected month's events if working with large dataset.
-  }
-```
+		Color: '#999',                    					//(string - color) font color of whole calendar.
+		LinkColor: '#333',            						//(string - color) font color of event titles.
+		NavShow: true,                						//(bool) show navigation arrows.
+		NavShowYear: true,            						//(bool) show navigation arrows for years (only tested in theme 2, doesn't work with NavVertical=true)
+		NavVertical: false,           						//(bool) show previous and coming months.
+		NavLocation: '#foo',          						//(string - element) where to display navigation, if not in default position.
+		DateTimeShow: true,           						//(bool) show current date.
+		DatetimeLocation: '',         						//(string - element) where to display previously mentioned date, if not in default position.
+		EventClick: '',               						//(function) a function that should instantiate on the click of any event. parameters passed in via data link attribute.
+		RemoveAnchorHrefIfEventClickGiven: false, 			//(bool) true: put <a href=#>; false: put <a href=Link>
+		EventTargetWholeDay: false,   						//(bool) clicking on the whole date will trigger event action, as opposed to just clicking on the title.
+		DisabledDays: [],             						//(array of numbers) days of the week to be slightly transparent. ie: [0,6] to fade Sunday and Saturday.
+		ModelChange: model,           						//(array of objects) new data object to pass into calendar (serving suggestion: passing through only the currently selected month's events if working with large dataset.   
+		MinDateMonth: new Date(1900, 0, 1), 				// (Date) minimum allowable (first valid) month
+		MaxDateMonth: new Date(2050, 0, 1),  				// (Date) maximum allowable (last valid) month
+		HideHover: false,									// (bool) whether or not to hide hover text link (so that just clicking the cell will link, if EventClick is set appropriately)
+		MakeEachCellAnchor: true							// (bool) whether to change each cell to an anchor tag, so that each cell can easily be opened in a new window
+	}
+```
+* Remember, when using `new Date(2020, 0, 1)` is January 1st because months start at 0, but days start at 1. Use the first day of the month (third arg is 0) for MinDateMonth/MaxDateMonth.
+* A common EventClick value may be: `function(link) {window.location.href=link;}`.
 
-###CSS Themes
-#####Theme 1
+### CSS Themes
+#### Theme 1
 ```
 <link rel="stylesheet" href="css/theme1.css"/>
 ```
 ![theme1.css](http://i.imgur.com/MoBMUEa.png)
 
-#####Theme 2
+#### Theme 2
 ```
 <link rel="stylesheet" href="css/theme2.css"/>
 ```
 ![theme2.css](http://i.imgur.com/6l7VSIL.png)
 
-#####Theme 3
+#### Theme 3
 ```
 <link rel="stylesheet" href="css/theme3.css"/>
 ```

css/theme1.css

@@ -12,13 +12,17 @@
     max-width: 300px;
     margin: auto;
     overflow: hidden;
+    text-align: center;
+  }
+  .cld-datetime>div{
+    display: inline-block;
+    text-align: center;
   }
   .cld-datetime .today{
     position: relative;
-    float: left;
-    width: calc(100% - 40px);
-    margin: auto;
-    text-align: center;
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 100px;
   }
   .cld-nav{
     position: relative;
@@ -33,10 +37,10 @@
       fill: #666;
   }
   .cld-rwd{
-    float: left;
+
   }
   .cld-fwd{
-    float: right;
+
   }
     .cld-nav svg:hover{
 
@@ -49,6 +53,14 @@
     width: 14.28%;
     text-align: center;
   }
+  .cld-day:not(.clickable){
+  color: black;
+  text-decoration: inherit;
+  }
+  .cld-day:not(.clickable){
+  color: black;
+  text-decoration: inherit;
+  }
   .cld-day.today .cld-number{
     display: inline-block;
     height: 20px;

css/theme2.css

@@ -1,5 +1,6 @@
 .cld-main{
-  width: 400px;
+  /*width: 400px;*/
+  width: 100%;
 }
 .cld-main a{
   color: #0080FF;
@@ -9,18 +10,23 @@
 }
   .cld-datetime{
     position: relative;
-    width: 66%;
-    min-width: 100px;
-    max-width: 300px;
+    width: 80%;
+    min-width: 150px;
+    max-width: 500px;
     margin: auto;
+    margin-bottom: 15px;
     overflow: hidden;
+    text-align: center;
+  }
+  .cld-datetime>div{
+    display: inline-block;
+    text-align: center;
   }
   .cld-datetime .today{
     position: relative;
-    float: left;
-    width: calc(100% - 40px);
-    margin: auto;
-    text-align: center;
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 100px;
   }
   .cld-nav{
     position: relative;
@@ -35,16 +41,17 @@
       fill: #005EFF;
   }
   .cld-rwd{
-    float: left;
+
   }
   .cld-fwd{
-    float: right;
+
   }
     .cld-nav svg:hover{
 
     }
 .cld-labels, .cld-days{
   padding-left: 0;
+  margin-left: 0 !important;
 }
   .cld-label, .cld-day{
     box-sizing: border-box;
@@ -54,6 +61,15 @@
   }
   .cld-day{
     border: 1px solid #eee;
+    margin: 0 !important;
+  }
+  .cld-day:not(.clickable){
+	color: black;
+	text-decoration: inherit;
+  }
+  .cld-day:not(.clickable){
+	color: black;
+	text-decoration: inherit;
   }
   .cld-day.today .cld-number{
     background: #0080FF;
@@ -67,7 +83,7 @@
   }
     .cld-number{
       position: relative;
-      margin: 0;
+      margin: 0 !important;
       padding: 10px;
     }
       .cld-title{