Home » Categories » Events » Widgets and more

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.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.
1.5 (4)
Article Rating (4 Votes)
Rate this article
  • Icon PDFExport to PDF
  • Icon MS-WordExport to MS Word
Attachments (3) Attachments
Comments (4) Comments
Comment by Nate Dunlevy on Wed, Mar 6th, 2013 at 9:01 AM
It works with Events. It is not a separate product.
Comment by Quentin Edwards on Fri, Mar 1st, 2013 at 12:24 PM
Is the Tiny Calendar a separate product or can it be used with the Evanced Calendar?
Comment by Jeremy on Thu, Jun 14th, 2012 at 8:18 PM
Mary, I
Comment by Mary on Fri, Mar 2nd, 2012 at 3:35 PM
Is there a way to make a day a different color if there is an event scheduled? A tiny blank calendar doesn‘t seem too helpful. (Maybe the widget does this, but it didn‘t work when I tried it with our calendar.)
Related Articles
How To Events-Include a link to a calendar on my website
Viewed 13482 times since Tue, Sep 27, 2011
How to add a logo or website header to my calendar page
Viewed 29684 times since Tue, Sep 27, 2011
Creating XML-RSS Feeds
Viewed 116136 times since Tue, Sep 27, 2011
Events-Client Side XML Example
Viewed 14618 times since Tue, Sep 27, 2011
Adding Facebook Thumbs-up Button to Events
Viewed 10804 times since Wed, Jan 11, 2012
Events List Widget
Viewed 27942 times since Tue, Jan 3, 2012
Events Search Widget
Viewed 4676 times since Tue, Jan 3, 2012