If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.
You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

vietmusic_Calendar

Page history last edited by PBworks 17 years, 11 months ago

Wiki Calendars

by vietmusic

I've noticed that everybody keeps checking my wiki JUST to see the calendar, and it's a bit of a nuisance to explain exactly how that calendar works to everybody who wants one. It's magic, okay?

But I'm a nice guy, so this is what i did: I compiled everything together into the easiest PBwiki calendar package imaginable short of somehow making an applet out of Google Calendars.

So this is what you do:

1) Save these two files (Right-click and save as)

http://dochuyen.pbwiki.com/f/calendar-main.js

http://dochuyen.pbwiki.com/f/calendar-month.js

2) upload those files to your wiki

3) make a new page called CalendarMay06, or whatever month you want. It HAS to be "Calendar" + month + two-digit year (1-99, representing 2001-2099)

4) paste this code in:

<script>
var MonthLabelColor="#90d0a0"
var MonthText = "May 2006"
var MonthTextColor="black"
var NormalCellColor="white"
var EventCellColor="lightgreen"
var NormalTextColor="gray"
var EventTextColor="red"
</script>

<center><div id="PopUp"></div><div id="month">

|<td id="MonthLabel" colspan=5></td>||
|S|M|T|W|T|F|S|
||1|2|3|4|5|6|
|7|8|9|10|11|12|13|
|14|15|16|17|18|19|20|
|21|22|23|24|25|26|27|
|28|29|30|31||||
</div></center>

<!--MY EVENTS HERE-->

<div id="21">

* MY EVENT HERE

</div>

<!--END EVENTS--><script type="text/javascript" src="/f/calendar-month.js"></script>

5a) fiddle with the color variables if you like. To add dates, just add in:

<div id="MY_DAY">

whatever i want

</div>

5b) notice that each month has its own color settings, so you can customize things however you want. Also note that you have to change the date layout manually depending on the month. I may automate that later...we'll see.

6) Replace MY_DAY with the day of the event as a number, as in the code above. The javascript will automatically recognize it and make a link for it.

7) Make a new page called Calendar and paste in the following code

<script>
var monthnum = 5;
var yearnum = 6

var monthlow = 5;
var yearlow = 6;
var monthhigh=6;
var yearhigh = 6;
var bgcolor = "";
var heading = "Personal Calendar"
</script><script type="text/javascript" src="/f/calendar-main.js"></script>

8) monthnum/yearnum is the month/year to be displayed initially. Therefore, the code above means May 06 will be shown first. Make sure that the page CalendarMay06 exists. monthlow/yearlow represent the lower bound for the calendar while monthhigh/yearhigh represent the upperbounds. bgcolor is the page background color. heading is of course the page heading.

9) the script will also automatically generate a listing along the left hand side of all months available according to the bounds, and edit links will appear if you're logged in.

10) Example: http://dochuyen.pbwiki.com/Calendar

FUTURE: I plan on making a "wikilet" version to install in other pages, as is seen on http://pbwikifanclub.pbwiki.com/