Updated css files for better subscribe button integration in calendar…

… html. Added link to rss feed in calendar html. Updated subscribe button to only show options that are available. Updated xml output to have correct url for schema. Updated readme for subscribe button and additional files and error caching
Frimkron · Feb 8, 2014 · f03bbab · f03bbab
1 parent df243f0
commit f03bbab
Show file tree

Hide file tree

Showing 4 changed files with 292 additions and 111 deletions.
diff --git a/README.md b/README.md
@@ -54,7 +54,9 @@ FTP client, SCP client or similar:
 
 * __calendar.php__ (the PHP script)
 * __calendar.xsd__ (schema definition for XML)
-* __calendar.css__ (stylesheet for HTML)
+* __calendar-cal.css__ (stylesheet for HTML calendar)
+* __calendar-sub.css__ (stylesheet for subscribe button)
+* __calendar-sub.png__ (icon image for subscribe button)
 
 
 ### 3.2 Provide Event Info
@@ -589,9 +591,47 @@ Here are some examples:
 
 ### 3.3 Linking to Feeds
 
-To link to the feeds generated by the PHPCalFeed, simply use the URL of the 
-script file, adding the parameter `format=` to indicate the format of data to 
-access. For example, to link to an RSS feed, the following URL might be used:
+
+#### 3.3.1 Subscribe Button
+
+PHPCalFeed provides a handy subscribe button which you can add to your web 
+pages, giving your visitors a number of different ways to subscribe to your 
+events calendar.
+
+To create your subscribe button, visit the calendar script in your web browser,
+with the parameter `format=html-button` on the end of the URL:
+
+	http://example.com/calendar.php?format=html-button
+
+You will see what may appear to be a blank page. However, if you view the page
+source you will find a block of HTML markup which can be copied and pasted into
+your site's code. To make sure the button is styled correctly, you should add 
+a link to the button's accompanying CSS file. Add the following code inside 
+your page's `<head>` tag:
+
+``````````````````````````````````````````````````````````````` html
+
+<link rel="stylesheet" type="text/css" href="calendar-sub.css">
+
+
+```````````````````````````````````````````````````````````````
+
+You may need to adjust the `href` attribute above so that it points to the 
+correct location that you installed the calendar script to. The subscribe 
+button also requires the `calendar-sub.png` image file. You should make sure 
+that this is present in the same directory as the calendar script.
+
+You can edit `calendar-sub.png` and `calendar-sub.css` to change the look and 
+feel of the subscribe button. For more information see the 
+[Re-styling the HTML Calendar](#37-re-styling-the-html-calendar) section.
+
+
+#### 3.3.2 Linking Directly to Feeds
+
+As a more powerful alternative, you can also link direcly to the feeds 
+generated by PHPCalFeed. To do this, simply use the URL of the script file, 
+adding the parameter `format=` to indicate the format of data to access. For 
+example, to link to an RSS feed, the following URL might be used:
 
 	http://example.com/calendar.php?format=rss
 
@@ -632,6 +672,12 @@ HTML format (fragment) - just the HTML for the calendar itself,
 suitable for embedding in another page. Note that to generate this output, the 
 libxml and DOM extensions must be enabled for your server's PHP installation.
 
+#### `html-button`
+HTML format (subscribe button) - just the HTML for the calendar subscribe
+button, suitable for embedding in anoter page. Note that to generate this 
+output, the libxml and DOM extensions must be enabled for your server's PHP
+installation.
+
 #### `s-exp`
 S-Expression format - a data format used by the Lisp programming language.
 
@@ -679,6 +725,13 @@ To force the cache to clear, simply delete `calendar.html` and visit the script
 in your browser. The other feed formats will be recreated along with the HTML 
 output.
 
+The subscribe button HTML is cached separately. Delete `calendar-button.html` 
+and visit the script with `?format=html-button` to recreate it.
+
+If the calendar script encounters an error when generating the feed files, the
+error will be cached to `calendar.error` for 20 minutes. To force the script to
+try again, delete this file and visit the script in the browser.
+
 
 ### 3.6 Renaming the Script File
 
@@ -688,11 +741,14 @@ renaming the set of files might look like this:
 
 	calendar.php
 	calendar.xsd
-	calendar.css
+	calendar-cal.css
+	calendar-sub.css
+	calendar-sub.png
 	calendar-config.php
 	calendar-master.csv
 	calendar.html
 	calendar-frag.html
+	calendar-button.html
 	calendar.json
 	calendar.xml
 	calendar.ics
@@ -703,11 +759,14 @@ But we could rename them as follows:
 
 	events.php
 	events.xsd
-	events.css
+	events-cal.css
+	events-sub.css
+	events-sub.png
 	events-config.php
 	events-master.csv
 	events.html
 	events-frag.html
+	events-button.html
 	events.json
 	events.xml
 	events.ics
@@ -718,9 +777,9 @@ But we could rename them as follows:
 ### 3.7 Re-styling the HTML Calendar
 
 The HTML version of the calendar feed (`format=html`) uses the Cascading 
-Style Sheet file `calendar.css` to apply its visual style. The generated HTML 
-assigns different `class` attributes to the various page components which are
-referenced by this CSS file, making it easy to modify and thereby give your 
+Style Sheet file `calendar-cal.css` to apply its visual style. The generated 
+HTML assigns different `class` attributes to the various page components which 
+are referenced by this CSS file, making it easy to modify and thereby give your
 calendar page a different look and feel.
 
 The name and purpose of each CSS class is explained below:
@@ -751,6 +810,22 @@ In addition to these classes, each calendar table is given an `id` attribute:
 * `cal-calendar-1` - next month's calendar table
 * `cal-calendar-2` - the month after next's calendar table
 
+The subscribe button for the HTML calendar has its own CSS file, 
+`calendar-sub.css`, so that it can be included in other pages separately. The 
+name and purpose of each class defined in this file is explained below:
+
+* `calsub-button` - the outermost container surrounding the button.
+* `calsub-link` - the anchor element inside the button, allowing the button itself
+  to be clicked as a link.
+* `calsub-menu` - the popup menu containing the various subscribe options
+* `calsub-item` - a subscribe option within the popup menu
+* `calsub-icalendar`, `calsub-google`, `calsub-live`, `calsub-rss`, `calsub-json`,
+  `calsub-xml`, `calsub-sexp` - these classes identify the individual subscribe 
+  options.
+
+The subscribe button image and the subscribe icons can be found in the CSS
+spritesheet `calendar-sub.png`. 
+
 
 4 Licence
 ---------

diff --git a/calendar-cal.css b/calendar-cal.css
@@ -39,10 +39,12 @@
 				width: 33%; padding: 0.25em 0em; z-index: 8; margin-top: 1em; float: left; height: 1.5em; 
 				margin-bottom: -2.25em; position: relative; }
 .col-nav-link:hover { color: rgb(0,200,200); }
+#cal-0-link { clear: both; }
 .cal-hcal-link { font-size: 60%; display: block; width: 14em; margin: 1em 1em 0 auto; text-align: right; 
 				color: rgb(64,64,64); text-decoration: none; clear: both; padding: 1em 0 0 0; }
 .cal-event abbr { text-decoration: none; border: none; }
-.calsub-button { width: 5em; height: 5em; }
+.calsub-button { width: 5em; height: 5em; float: right; margin-left: 1em; }
+.calsub-menu { left: auto; right: 50%; }
 
 
 @media screen and (max-width: 600px) {

diff --git a/calendar-sub.css b/calendar-sub.css
@@ -3,7 +3,7 @@
 .calsub-button:hover { }
 .calsub-link { background-image: url('calendar-sub.png'); background-size: cover; 
 			width: 100%; height: 100%; display: block; position: relative; }
-.calsub-button:hover .calsub-link { top: -0.3em; left: -0.05em; }
+.calsub-button:hover .calsub-link { top: 0.2em; left: 0.2em; }
 .calsub-menu { position: absolute; width: 18em; top: 50%; left: 30%; 
 			border: 0.1em solid rgb(64,64,64); padding: 0.2em; text-align: left; 
 			background-color: white; box-shadow: 0.2em 0.2em 0.3em rgba(0,0,0,0.5);