Events Tiny Calendar Widget

Please note that working with widgets requires basic knowledge of HTML, CSS, and JavaScript code.
 
The Tiny Calendar Widget allows you to embed a small version of your Evanced Events calendar on your web page. It will eventually look similar to the tiny calendar for our training sessions that is displayed on our knowledge base page (Attachment evanced_tinycal_new_onecal.html will give you this look):
 
 
 
 
  • The month label links to the full version of the calendar.
  • The number for each day links to that date's events.  

To obtain the code written by Evanced for this tiny calendar, download the desired attachment in this article below by right-clicking the link then selecting to Save Target on your PC. Find in the source code of the downloaded file where the script line(s) mentioned below are, then modify the parts in red with your own tiny calendar link instead, as such:

Note: Attached to this article at the bottom of the page, you will find three attachments (onecal, twocals, threecals). The difference is that one will show a tiny calendar of just the current month, the second one will show this month and next month, and the last one will show this month and the next two months. Depending on which file you chose to download, you might have either both of those two script lines below or just one.
 
<script
type="text/javascript" src="http://demo.evanced.info/events/lib/tinycal.asp?monthcount=1&divid=eventstinycal"></script>

<script
type="text/javascript" src="http://demo.evanced.info/events/lib/tinycal.aspmonthcount=2&monthoffset=1&divid=eventstinycal2&target=_blank"></script>

So, let us say that your public event calendar link reads:
 
http://test.evanced.info/libraryname/evanced/eventcalendar.asp  (This is not a real a link, just an example)
 
then your tiny calendar link should be the same, except for the page name:
 
http://test.evanced.info/libraryname/evanced/tinycal.asp  (This is not a real a link, just an example)
 
This means that you need to replace the red part in the previous script with the following line, for the example on hand:
 
test.evanced.info/libraryname/evanced
 
 Now, save the file and test it to make sure it works as expected. If it is working properly, do the following:
 
1- Copy the code  between <head> and </head> tags, then paste it in your page's source code between the starting and ending of the head tag as well. Please make sure to address any style code issues with your existing code.
2- Copy the code  between <body> and </body> tags, then paste it in your page's source code between the starting and ending of the body tag as well. Position the tiny calendar code within your page's code according to where you want it to appear on the page.
 
Please note that Evanced's support is limited to the functionality of the tiny calendar and the way it looks independently, not its design after embedding on the customer's page. Also note that the original provided code offers three tiny calendars for three consecutive months (see attachment below labeled with "threecals" in its name). However, with minor manipulation of this original widget code, you can display only two or one, like the example in the screen shot above. See attachments labeled with "twocals" and "onecal" in their names respectively. 
 
 
Custom Fields
  • Applicable To: All Users
  • Attachments: No
  • Summary: How to work with Events Tiny Calendar Widget.
Posted - Tue, Jan 3, 2012 at 8:36 AM. This article has been viewed 19574 times.
Online URL: http://kb.demcosoftware.com/article.php?id=331

Powered by PHPKB (Knowledge Base Software)