Merge pull request #8 from williamtroup/0.4.0

0.4.0
williamtroup · Mar 5, 2021 · 07aa09d · 07aa09d
2 parents 089ab9d + 0f13c37
commit 07aa09d
Show file tree

Hide file tree

Showing 27 changed files with 2,860 additions and 1,950 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 This is a JavaScript calendar library that is fully responsive and compatible with all modern browsers.
 
 Features include:
-- Event adding, updating, and removing.
+- Adding, updating, and removing events.
 - Full API support via public functions.
 - Drag and Drop support for events.
 - Configurable text for translations.
@@ -12,6 +12,7 @@ Features include:
 - Custom events for actions (adding/updating/removing events, skipping months, etc).
 - Export to CSV, XML, JSON and TEXT.
 - Full-screen mode.
+- Search support.
 
 To get started, download the source code and run the "index.html" file.  This will show an example of a calendar with most option enabled.
 

diff --git a/changelog.txt b/changelog.txt
@@ -1,3 +1,33 @@
+v0.4.0:
+- The Year Selector drop-down now auto-scrolls to the selected year.
+- Removed unneeded class variables.
+- All title-bar icons now use the "PureCSS" generated images, giving a much cleaner look and feel.
+- Fixed a fault that caused optional text fields for Events to show up as "undefined" when edited or exported.
+- Added "Location" support to events, with the extra information being shown in full events and tooltips.
+- Event tooltip widths now auto-size to the available content (saves a lot of empty space).
+- Added support to set the event Color, Text Color and Border Color (color, colorText, colorBorder properties).
+- The "Title" field is now the first field in the Event Editor dialog.
+- Added a new "..." button next to the Title text box on the event editor (allows choosing the colors for the event).
+- Decreased the width of the "Select Export Type" dialog.
+- Fixed a fault that allowed bad values through from Times on the Event Editor.
+- Fixed a fault that caused bad times (characters other than numbers) to be allowed in events, which never show up.
+- Fixed a fault that set the toolbar buttons to the wrong display type.
+- The extra toolbar buttons on the main display are now hidden on smaller displays (refresh, export, list all, list week).
+- Fixed spelling mistakes across the CSS and JS code for CSS class names.
+- Renamed all dialog CSS classes to added "calendar-dialog" CSS class (to allow easier use of custom input styles).
+- Added full search support (new "Search" button on the main toolbar), with option to Match Case.
+- Fixed the text cursor being shown for text that cannot be selected.ß
+- Fixed the Today button redrawing the main display even when the current month is in view.
+- Added new option "minimumDayHeight", which allows you to set the height of the days in the main view (defaults to 0 - auto).
+- Fixed the check/radio boxes using the full width of the container areas.
+- The background color used for the headers on the main display is now a slightly lighter shade of gray.ß
+- Weekend days in the main display are now shown in a color as the headers.
+- The current day is now indicated by the day number being highlighted (instead of the whole day).
+- Building events on the main display is now much faster.
+- Updating the toolbar icons on the main display is now based on the events already checked, instead of searching again.
+- The element that will hold the Calendar is now cleared before building starts (was causing some strange display issues).
+- More JSDoc documentation improvements and type fixes.
+
 v0.3.0:
 - Added the custom scrollbar to the textarea on the "Event Editor" dialog.
 - The custom scroll-bar now has :hover and :active selectors.

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <html>
     <head>
         <meta charset="utf-8" />
-        <title>Calendar.js v0.3.0</title>
+        <title>Calendar.js v0.4.0</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="src/calendarjs.css" />
         <script src="src/calendarjs.js"></script>
@@ -14,7 +14,9 @@
         <button onclick="calendarInstance.clearEvents();">Clear Events</button>
         <br />
         <br />
-        <div id="myCalendar" style="max-width: 800px;"></div>
+        <div id="myCalendar" style="max-width: 800px;">
+            <p>Some data that should be cleared.</p>
+        </div>
         <br />
         <br />
         <a href="index_minified_files.html" target="_self">Minimized Version</a>
@@ -30,7 +32,8 @@
         var calendarInstance = new calendarJs( "myCalendar", { 
                 exportEventsEnabled: true, 
                 manualEditingEnabled: true, 
-                showTimesInMainCalendarEvents: false 
+                showTimesInMainCalendarEvents: false,
+                minimumDayHeight: 0
             } ),
             previousDay = new Date(),
             today9 = new Date(),
@@ -64,42 +67,54 @@
                 to: previousDay,
                 title: "Previous Day",
                 description: "This is a another description of the event that has been added, so it can be shown in the pop-up dialog.",
-                isAllDayEvent: true
+                location: "Teams Meeting",
+                isAllDayEvent: true,
+                color: "#FF0000",
+                colorText: "#FFFF00",
+                colorBorder: "#00FF00"
             },
             {
                 from: today11,
                 to: tomorrow,
                 title: "Title 1",
                 description: "This is a another description of the event that has been added, so it can be shown in the pop-up dialog.",
+                location: "Teams Meeting",
                 isAllDayEvent: false
             },
             {
                 from: tomorrow,
                 to: today11,
                 title: "Title Bad (should not show)",
                 description: "This is a another description of the event that has been added, so it can be shown in the pop-up dialog.",
+                location: "Teams Meeting",
                 isAllDayEvent: false
             },
             {
                 from: today9,
                 to: today9,
                 title: "Title 2",
                 description: "This is a another description of the event that has been added, so it can be shown in the pop-up dialog.",
+                location: "Teams Meeting",
                 isAllDayEvent: true
             },
             {
                 from: firstDayInNextMonth,
                 to: firstDayInNextMonth,
                 title: "First Day",
                 description: "This is a another description of the event that has been added, so it can be shown in the pop-up dialog.",
-                isAllDayEvent: true
+                location: "Teams Meeting",
+                isAllDayEvent: true,
+                color: "#00FF00",
+                colorText: "#FF0000",
             },
             {
                 from: lastDayInNextMonth,
                 to: lastDayInNextMonth,
                 title: "Last Day",
                 description: "This is a another description of the event that has been added, so it can be shown in the pop-up dialog.",
-                isAllDayEvent: true
+                location: "Teams Meeting",
+                isAllDayEvent: true,
+                color: "#0000FF",
             },
             {
                 from: today,

diff --git a/index_minified_files.html b/index_minified_files.html
@@ -1,7 +1,7 @@
 <html>
     <head>
         <meta charset="utf-8" />
-        <title>Calendar.js - Minimized - v0.3.0</title>
+        <title>Calendar.js - Minimized - v0.4.0</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="src/calendarjs.min.css" />
         <script src="src/calendarjs.min.js"></script>
@@ -14,7 +14,9 @@
         <button onclick="calendarInstance.clearEvents();">Clear Events</button>
         <br />
         <br />
-        <div id="myCalendar" style="max-width: 800px;"></div>
+        <div id="myCalendar" style="max-width: 800px;">
+            <p>Some data that should be cleared.</p>
+        </div>
         <br />
         <br />
         <a href="index.html" target="_self">Unminimized Version</a>
@@ -30,7 +32,8 @@
         var calendarInstance = new calendarJs( "myCalendar", { 
                 exportEventsEnabled: true, 
                 manualEditingEnabled: true, 
-                showTimesInMainCalendarEvents: false 
+                showTimesInMainCalendarEvents: false,
+                minimumDayHeight: 0
             } ),
             previousDay = new Date(),
             today9 = new Date(),
@@ -64,42 +67,54 @@
                 to: previousDay,
                 title: "Previous Day",
                 description: "This is a another description of the event that has been added, so it can be shown in the pop-up dialog.",
-                isAllDayEvent: true
+                location: "Teams Meeting",
+                isAllDayEvent: true,
+                color: "#FF0000",
+                colorText: "#FFFF00",
+                colorBorder: "#00FF00"
             },
             {
                 from: today11,
                 to: tomorrow,
                 title: "Title 1",
                 description: "This is a another description of the event that has been added, so it can be shown in the pop-up dialog.",
+                location: "Teams Meeting",
                 isAllDayEvent: false
             },
             {
                 from: tomorrow,
                 to: today11,
                 title: "Title Bad (should not show)",
                 description: "This is a another description of the event that has been added, so it can be shown in the pop-up dialog.",
+                location: "Teams Meeting",
                 isAllDayEvent: false
             },
             {
                 from: today9,
                 to: today9,
                 title: "Title 2",
                 description: "This is a another description of the event that has been added, so it can be shown in the pop-up dialog.",
+                location: "Teams Meeting",
                 isAllDayEvent: true
             },
             {
                 from: firstDayInNextMonth,
                 to: firstDayInNextMonth,
                 title: "First Day",
                 description: "This is a another description of the event that has been added, so it can be shown in the pop-up dialog.",
-                isAllDayEvent: true
+                location: "Teams Meeting",
+                isAllDayEvent: true,
+                color: "#00FF00",
+                colorText: "#FF0000",
             },
             {
                 from: lastDayInNextMonth,
                 to: lastDayInNextMonth,
                 title: "Last Day",
                 description: "This is a another description of the event that has been added, so it can be shown in the pop-up dialog.",
-                isAllDayEvent: true
+                location: "Teams Meeting",
+                isAllDayEvent: true,
+                color: "#0000FF",
             },
             {
                 from: today,