Home | Ciber
Knowledge page of Ciber Netherlands

OBIEE Events Calendar

 image

First of all Kudos to Hitesh for laying the ground work: http://hiteshbiblog.blogspot.com/2010/04/obiee-showing-data-on-calendar.html

First you have to go to the MooTools site and download the basics:

The mootools core: http://mootools.net/download => choose the uncompressed version, it makes debugging easier.

Next get the More building blocks Date, Scroller, Tips: http://mootools.net/more 

Finally get the calendar control: http://dansnetwork.com/mootools/events-calendar/download/

Put everything in a subfolder of the Res folder (if you are using OC4J as webserver, you have to sync both RES folders):

image

Let’s get some base data to work with: Startdate, Enddate, dayofweek, brand, revenue:

image

Now we add a narrative view:
image

In the prefix part we first select the size of the calendar control:

<link rel="stylesheet" type"text/css" href="./res/mooTools/mooECalLarge.css">

or

<link rel="stylesheet" type"text/css" href="./res/mooTools/mooECal.css">

or

<link rel="stylesheet" type"text/css" href="./res/mooTools/mooECalSmall.css">

Next we add the references to the javscript:

<script language="javascript" src="./res/mooTools/mootools-1.2.4-core-nc.js"></script>
<script language="javascript" src="./res/mooTools/mootools-1.2.4.4-more.js"></script>
<script language="javascript" src="./res/mooTools/mooECal.js"></script>

as div tag to hold the body:

<div id="calBody"></div>

and a function to set the background and font color:

<script language="javascript">

function getDiv(holFlag)
{
if(holFlag==’1′ || holFlag==’7′)
{
return ‘<div style="background-color:#990000;color:#ffffff;">’;
}
else
{
return ‘<div style="background-color:#999900;color:#ffffff;">’;
}
}

finally the header of the control:

new Calendar({calContainer:’calBody’, newDate:’1/3/2007′,
cEvents:new Array(

The date is the date on which the control wil be opened.

The total prefix should look like this:

<link rel="stylesheet" type"text/css" href="./res/mooTools/mooECalLarge.css">
<script language="javascript" src="./res/mooTools/mootools-1.2.4-core-nc.js"></script>
<script language="javascript" src="./res/mooTools/mootools-1.2.4.4-more.js"></script>
<script language="javascript" src="./res/mooTools/mooECal.js"></script>
<div id="calBody"></div>
<script language="javascript">

function getDiv(holFlag)
{
if(holFlag==’1′ || holFlag==’7′)
{
return ‘<div style="background-color:#990000;color:#ffffff;">’;
}
else
{
return ‘<div style="background-color:#999900;color:#ffffff;">’;
}
}
new Calendar({calContainer:’calBody’, newDate:’1/3/2007′,
cEvents:new Array(

In the narrative part we fill the array:

{
title: getDiv(’@3′) +’@4: ‘+ ‘@5 </div>’,
start: ‘@1′,
end: ‘@2′,
location: ‘’
}

In the postfix we close the array:

)
}); </script>

Set the separator to “,”

Warning if you try to save this from the narrative view you will get the ‘opaque’ save screen….

image

switch to the criteria view first and then save!

Add the narrative to your compound lay-out:

image

Till Next Time

No comments yet. Be the first.

Leave a reply