Huge Collections of Software Manuals and Knowledgebase

GreatManuals.com
Huge Collections of Software Manuals and Knowledgebase

 
Home Contact Us Request to publish your help manuals Request to remove your help manuals
Introduction
» Likno Drop-Down Menu Trees
» About Likno Software
User Interface
» Main Window Layout
» Keyboard Shortcuts
» Commands
» Command Structure
» Theme
» Tools
» Project Properties
» Customize
» Properties
Manage Trees Programmatically
» API For Programmable Trees
» API Reference
» Objects Properties
» Functions
» LiknoTreeRoot Properties
» LiknoTreeRoot Functions
» Themes
Examples
» Building Calendar Tree
» Stock Market Portfolio
» Shopping Cart Management
FAQ & Tips
» Frequently Asked Questions
» Troubleshooting
 

Building Calendar Tree

The following code creates a calendar tree for the current month, categorizing days into weeks starting on Monday and marking Sundays with a different color. It also marks the current date in green color.

keystroke logger software updates Free keystroke recorder
best software help freeware data recovery best software faqs
free mobile messaging free recovery freeware Keylogger

Note: We use two functions, y2k() and getWeek() (found on the internet) to get the week number.

Example:

function createDatesTree()
{
var today = new Date();
var year = today.getFullYear();

treeDates = new LiknoTreeRoot("treeDates", "example", 0, 0, 176, 600, 16, true, "border:0; padding:4px; background-color:#FFFFFF; border:1px solid #003366;", "png");
treeDates.setHorzScroll(false);
treeDates.setImagesDir("images/ldmt/16x16/winvista/");
treeDates.addClass("de", "font-family:Tahoma, Arial, sans-serif; font-size:11px; color:black; background-color:transparent; text-decoration:none; font-weight:normal; padding:2px 4px;");
treeDates.addClass("mo", "font-family:Tahoma Arial, sans-serif; font-size:11px; text-decoration:underline; color:blue; padding:2px 4px;");
treeDates.addClass("se", "font-family:Tahoma, Arial, sans-serif; font-size:11px; color:black; background-color:#EBF2FA; padding:2px 4px; border:1px solid #DFDFE1;");
var months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var dayspermonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var days = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday");
var day = 0;
var week = -1;
var month = today.getMonth();
var t5w = new Array(6);
t5d = new Array(31);
var t5m = treeDates.addLeafWithParams("<b>"+months[month]+"</b>", "", "", true, "");
var dayofmonth = 1; 22: var nodedate = new Date(year, month, dayofmonth);
while(dayofmonth <= dayspermonth[month])
{
if(nodedate.getDay() == 1 || week == -1)
{
week++;
t5w[week] = t5m.addLeafWithParams("<span style='color:#004f8f;'><b>week "+getWeek(nodedate)+"</b></span>", "", "", true, "");
}
if(dayofmonth == today.getDate())
t5d[day] = t5w[week].addLeafWithParams("<span style='color:#308f00;'><b>"+dayofmonth+", "+days[nodedate.getDay()]+" <span style='font-family:arial; font-size:13px;'>&#9668;</span></b></span>", "", "", true, "");
else
if(days[nodedate.getDay()] == "Sunday")
t5d[day] = t5w[week].addLeafWithParams("<span style='color:#ff6600;'>"+dayofmonth+", "+days[nodedate.getDay()]+"</span>", "", "", true, "");
else
t5d[day] = t5w[week].addLeafWithParams(dayofmonth+", "+days[nodedate.getDay()], "", "", true, "");
dayofmonth++;
day++;
nodedate = new Date(year, month, dayofmonth);
}
treeDates.drawTree();
}

In the example above, when the user clicks on a node in the tree, nothing happens.

If we wanted for example a PHP page ("showdate.php") with the date as a parameter to load inside a frame with the name "main" when the user clicks on a certain day, we could modify the code as follows:

Example:

...
var link = "showdate.php?date="+nodedate.getFullYear()+"-"+month+"-"+dayofmonth;
if(dayofmonth == today.getDate())
t5d[day] = t5w[week].addLeafWithParams("<span style='color:#308f00;'><b>"+dayofmonth+", "+days[nodedate.getDay()]+" <span style='font-family:arial; font-size:13px;'>&#9668;</span></b></span>", link, "main", true, "");
else
if(days[nodedate.getDay()] == "Sunday")
t5d[day] = t5w[week].addLeafWithParams("<span style='color:#ff6600;'>"+dayofmonth+", "+days[nodedate.getDay()]+"</span>", link, "main", true, "");
else
t5d[day] = t5w[week].addLeafWithParams(dayofmonth+", "+days[nodedate.getDay()], link, "main", true, "");
...

The code above will open the page "showdate.php?date=2006-3-10" when the user clicks on the "10, Monday" node.

This is how our example looks like:

Example

Home | Contact Us | Request to publish your help manuals | Request to remove your help manuals