Hello,

I am trying create a calendar view which will display upcoming events on a calendar. Something like this:-



And the data that I am getting are :-

 User EventStartTime EventEndTime EventDesc 

It it even possible to build WF report for that if yes will please guide me toward right direction ?

Thank you.

This message has been edited. Last edited by: Jump_faster,

Yes. here is psuedo code for one event. For multiple events you will need code to dynamically create the correct number of rows but this should get you started:

 

compute colnbr
compute rownbr
...

table file final output
SUM day as '' OVER
    event as ''
BY ROWNBR
ACROSS COLNBR

This will be a pretty big project and you will have to work on the styling a bit if you want it that nice. It will be a whole lot easier if you have just the calendar as focus code and the rest is in an html page controlling the other stuff via javascript, etc.

I built something like this 20 odd years ago on Mainframe.

The key to how you do this is the output format.

Thank you J and Waz for input, the output will be on HTML format.

I am planning on using Jquery to control the calendar date and time function.Which will be easy than writing WF code; Use CSS for the design and WF to pass data to the calendar.

So what are you going to supply to jquery ?

The thing I built determied the weekday and week number of a month and created a matrix.

The following is some proof-of-concept code I wrote to produce general calendar for something I was working on. It also does some counting of M-F days for months and quarters. Not sure if this is what you are looking for, maybe this can get you started. You can run it in a fex and see what it does.

 
-DEFAULT &Start = '20130701';
-DEFAULT &End   = '20130930';
-SET &i         = 1         ;
-SET &Date      = &Start    ;

 SET STYLE=ENDEFLT,PAGE=NOLEAD,ACROSSLINE=SKIP,NODATA=' ',LINES=899

 SQL CREATE TABLE CAL (KEY INTEGER ,DATE_YYMD DATE, COMMENT CHAR(100));
 END

 MODIFY FILE CAL
 MATCH KEY
 ON MATCH REJECT
 ON NOMATCH INCLUDE
 DATA
-REPEAT ENDREPEAT WHILE &End GE &Date ;
 &i,'&Date','comment',$
-SET &i = &i + 1;
-SET &Date = AYMD(&Date, 1, 'I8YYMD');
-ENDREPEAT
 END

 DEFINE FILE CAL
 DATE_W/w     = DATE_YYMD ;
 DATE_wr/wr   = DATE_YYMD ;
 DATE_wt/wt   = DATE_YYMD ;
 DATE_D/D     = DATE_YYMD ;
 DATE_Mtr/Mtr = DATE_YYMD ;
 DATE_Q/Q     = DATE_YYMD ;
 DATE_YY/YY   = DATE_YYMD ;
 DATE_W2/I1   = IF DATE_W EQ 7 THEN 0 ELSE DATE_W ;
 WEEK/YYMD    = DATE_YYMD - DATE_W2;
 WDAYS/I9     = IF DATE_W2 EQ 0 OR 6 THEN 0 ELSE 1;
 END

 TABLE FILE CAL
    SUM WDAYS     AS ''
     BY DATE_YY   AS ''
    SUM WDAYS     AS ''
     BY DATE_YY   AS ''
     BY DATE_Q    AS ''
    SUM WDAYS     AS ''
     BY DATE_YY   AS ''
     BY DATE_Q    AS ''
     BY DATE_Mtr  AS ''
    SUM DATE_D    AS ''
     BY DATE_YY   AS ''
     BY DATE_Q    AS ''
     BY DATE_Mtr  AS ''
     BY WEEK      NOPRINT
 ACROSS DATE_W2   NOPRINT
 ACROSS DATE_wt   AS ''
 END

 

Waz, Jquery gets the date, calculates the month, find the weekdays and so on. Basically builds a empty calendar. Simple way to look at the code will be something like this :-

 $(document).ready(function(){
var today=new Date();
var date =today.getDATE();
var month = today.getMonth();
var year= today.getFullyear();

On which I can pass data something like this :-

 
$("#calendar').mycalendar ({
events: [
{
eventTitle:'MY EVENT TITLE',
eventStarts :new Date(year, month, 15, 12, 0),
eventEnds : new Date (year, month, 15, 13, 0)
},

 

So that will open event on 12 o'clock and ends the event on 1 p.m. So part that I am stuck is the creating dynamic code to load the event on Jquery.


dbeagan,
Thank you so much for your code, I was able to generate a calendar from your code, Do you know how do you pass event on that calendar date ?

Once again thank you for your help.

quote:

Do you know how do you pass event on that calendar date ?

You would like to click on a date and run a WebFOCUS procedure?

quote:

You would like to click on a date and run a WebFOCUS procedure?

Thats a good idea. So my next question is how do you prepare the parameter to pass date to WF procedure.

Here is a revised version.

-DEFAULT &Start = '20130701';
-DEFAULT &End   = '20130930';
-SET &i         = 1         ;
-SET &Date      = &Start    ;
 
 SET STYLE=ENDEFLT,PAGE=NOLEAD,ACROSSLINE=SKIP,NODATA=' ',LINES=899
 
 SQL CREATE TABLE CAL (KEY INTEGER ,DATE_YYMD DATE, COMMENT CHAR(100));
 END
 
 MODIFY FILE CAL
 MATCH KEY
 ON MATCH REJECT
 ON NOMATCH INCLUDE
 DATA
-REPEAT ENDREPEAT WHILE &End GE &Date ;
 &i,'&Date','comment',$
-SET &i = &i + 1;
-SET &Date = AYMD(&Date, 1, 'I8YYMD');
-ENDREPEAT
 END
 
 DEFINE FILE CAL
 DATE_W/w     = DATE_YYMD ;
 DATE_wr/wr   = DATE_YYMD ;
 DATE_wt/wt   = DATE_YYMD ;
 DATE_D/D     = DATE_YYMD ;
 DATE_Mtr/Mtr = DATE_YYMD ;
 DATE_Q/Q     = DATE_YYMD ;
 DATE_YY/YY   = DATE_YYMD ;
 DATE_W2/I1   = IF DATE_W EQ 7 THEN 0 ELSE DATE_W ;
 WEEK/YYMD    = DATE_YYMD - DATE_W2;
 WDAYS/I9     = IF DATE_W2 EQ 0 OR 6 THEN 0 ELSE 1;
 END
 
 TABLE FILE CAL
    SUM WDAYS     AS ''
     BY DATE_YY   AS ''
    SUM WDAYS     AS ''
     BY DATE_YY   AS ''
     BY DATE_Q    AS ''
    SUM WDAYS     AS ''
     BY DATE_YY   AS ''
     BY DATE_Q    AS ''
     BY DATE_Mtr  AS ''
    SUM DATE_D    AS ''
        DATE_YYMD NOPRINT
     BY DATE_YY   AS ''
     BY DATE_Q    AS ''
     BY DATE_Mtr  AS ''
     BY WEEK      NOPRINT
 ACROSS DATE_W2   NOPRINT
 ACROSS DATE_wt   AS ''
 ON TABLE SET STYLE *
 TYPE=DATA, FOCEXEC=CALENDAR_DATE(Date=DATE_YYMD),$
 ENDSTYLE
 END  

It lets you drill down to the procedure calendar_date.fex passing the date. Calendar_date.fex could simply contain:

 -TYPE Date=&Date 

Just to show it's working.

If I understand the requirement from the OP correctly:
1. A datasource contains event information: start date, end date, and description.
2. The events should display within a jQuery event calendar plugin.

Here is a prototype:

  
-* jQueryCalendar.fex
-*
-* Environmental Commands.
-*
SET DTSTANDARD = STANDARD
-*
-* Pull/Create Events.
-*
DEFINE FILE GGSALES
-* Event Start date
MYSDATE/A26 = DECODE SEQ_NO (1 '20130815 19:00:00'
                             2 '20130816 12:00:00'
							 3 '20130817 19:10:00'
                            );
XSDATE/HYYMDUSZ = HINPUT(26, MYSDATE, 8, XSDATE);
SDATE/A30 = FPRINT(XSDATE, 'HYYMDUSZ', SDATE);
-* Event End date
MYEDATE/A26 = DECODE SEQ_NO (1 '20130815 20:00:00'
                             2 '20130816 14:00:00'
                             3 '20130817 22:00:00'
                            );
XEDATE/HYYMDUSZ = HINPUT(26, MYEDATE, 8, XEDATE);
EDATE/A30 = FPRINT(XEDATE, 'HYYMDUSZ', EDATE);
-* Event Title
MYTITLE/A50 = DECODE SEQ_NO (1 ' Work on FullCalendar mashup'
                             2 ' Lunch with Gerry Cohen'
							 3 ' White Sox @ Twins'
                            );
-* Combine Event Start Date, End Date, and Title.  
ARYELEMENT/A250 = '{ title: ' | '''' | MYTITLE | '''' | ', start: ' | '''' | SDATE || '''' |
                   ', end: ' | '''' | EDATE || '''' |
				   ', allDay: false' | 
                   '}' ;
END
TABLE FILE GGSALES
SUM     CNT.SEQ_NO NOPRINT 
PRINT   SEQ_NO     NOPRINT
        MYSDATE    NOPRINT
        XSDATE     NOPRINT
        SDATE      NOPRINT
        MYTITLE    NOPRINT
	    EDATE      NOPRINT
        ARYELEMENT
COMPUTE COMMAOUT/A1 = IF CNT.SEQ_NO NE SEQ_NO THEN ',' ELSE ' ';
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE HOLD AS MYHOLD FORMAT ALPHA
IF RECORDLIMIT EQ 3
END
-RUN
-*
-* Display Events to Web App User.
-*
-HTMLFORM BEGIN
<!DOCTYPE html>
<html>
<head>
-* Pull in jQuery and FullCalendar plugin code.  
<link href='/approot/summit2014/fullcalendar.css' rel='stylesheet' />
<link href='/approot/summit2014/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='/approot/summit2014/jquery-1.10.2.min.js'></script>
<script src='/approot/summit2014/jquery-ui-1.10.3.custom.min.js'></script>
<script src='/approot/summit2014/fullcalendar.min.js'></script>
<script>
	$(document).ready(function() {
	 $('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			editable: false,
			events: [
			 !IBI.FIL.MYHOLD;
			]
		});
	});
</script>
<style>
	body {
		margin-top: 10px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}
	#calendar {
		width: 700px;
		margin: 0 auto;
		}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
-HTMLFORM END
-EXIT 

Upon rendering:

Upon clicking 'week':

The prototype rolls in FullCalendar: http://arshaw.com/fullcalendar/
I took a quick survey of jQuery event calendars, and FullCalendar seemed like a good compromise between feature set and ease of implementation.

Thank you so much Dbeagan that is really great of you. Your code works like a charm. . I will mess with it more and try to bells and whistles

Thank you David, you read my mind. I will look more into FullCalendar. But I have a small question, so if I want to populate my event dynamically will I just change the code

 
MYSDATE/A26 = DECODE SEQ_NO (GGSALES.START_DATE);
  
MYEDATE/A26 = DECODE SEQ_NO (GGSALES.END_DATE);
   
MYTITLE/A50 = DECODE SEQ_NO(GGSALES.TITLE);

or I have to do something else.

quote:

...I have a small question, so if I want to populate my event dynamically will I just change the code...

As far as I know, there isn't a IB sample file containing events. Therefore, the code 'hitches a ride' on an existing sample file, to 'create' event instances.

The 'hardcoding' of events you see, is not part of the technique; it is only a way to get some input data for the working prototype to operate upon.

In your scenario, the event data is stored in a datasource of some type, and you would therefore, start with the 'build of the array' process (combine start date, end date, title: ARYELEMENT/A250 = '{...}'; ), you see in the prototype.

This message has been edited. Last edited by: David Briars,

No need for any jQuery to do this. Oddly enough, I presented a presentation for Summit a few years ago, and didn't get to present (that's another story). However, a few weeks later AmericanExpress came out with a very similar thing which they called, the same as I called it in my presentation proposal, a "Financial Calendar". While this one had credits, over debits, over balance for every day, with drilldowns for every items displayed, and full pagination, and ....
Too much to get into now. But, it's all based on your database design. Mine started off being a flat file and soon became a full FOCU SDB with a supporting MODIFY maintenance app. I'll give you a start which I did a while ago. It's grown since then, again, too much for now...

FILENAME=RPT_DATA, SUFFIX=FOC     , $
  SEGMENT=SEG01, SEGTYPE=S#, $
    FIELDNAME=TRANS_DATE, ALIAS=E11, USAGE=A10V, TITLE='TRANS_DATE', $
    FIELDNAME=DailyLedgerBalanceSort, ALIAS=E12, USAGE=I1, $
    FIELDNAME=DEBITAMOUNT, ALIAS=E13, USAGE=D12.2CS, $
    FIELDNAME=CREDITAMOUNT, ALIAS=E14, USAGE=D12.2CS, $
    FIELDNAME=BALANCE, ALIAS=E15, USAGE=D12.2CS, $
    FIELDNAME=KEYWORDS, ALIAS=E18, USAGE=A64, $

This was done entirely in WebFOCUS, no extra JavaScript or jQuery...

Something like this (HTML Version, with totally bogus numbers for this demo / chump change):

Also available in PDF and Excel.

BTW: This was inspired by an old post by Tony A. You may want to search for that one. I don't have the time to pull it up now...

Thank you David for clarifying that .

Doug, Thank you for input, I will be using SQL server 2008 for my Data source. I search for Tony's code in forum but its kinda finding a needle on hay sack, but I will keep looking.
If it is possible can you please post sample fex code of the calendar. Thank you once again for your help.

I decided to revisit this (Financial Calendar). Here's my latest, not showing all the drill-downs from Year, Month, Week, Day, Credit, Debit, or Balance.

Financial Calendar-Monthly
Financial Calendar-Annual