JSignage:Examples

Displaying a schedule

 // Data source
 var uri = 'GymSampleICS_Calendar.ics';
 
 // Time to be displayed
 var startTime = 16;  // from 16:00
 var endTime = 20;   // to 20:00
 
 // Days do to be displayed 
 var f = 1, l = 6; // from monday to friday
 
 // Internal computation is done with a min accuracy
 startTime*=60;
 endTime*=60;
 var timeScale = 100/(endTime-startTime);
 var dayWidth = 100/(l-f);
 
 // Display all the data for one day. Each event will be displayed as a rounded rectancle
 // The title of the event will be showm
 function displayDay( icsFile, day, where ) {
    var now = new Date();
 
    // Display the name of teh day
    var day_of_the_week=[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
    $.textArea( { height : '10%', fontSize : 30 }).tspan( day_of_the_week[day] ).addTo( where );
    
    // Display the meetings
    var area = $.g( { top: '10%' } ).addTo( where );
    var d = day-now.getDay();
    var start = new Date( now.getFullYear(), now.getMonth(), now.getDate()+d ); //this day of the week
    var end   = new Date( now.getFullYear(), now.getMonth(), now.getDate()+d+1 ); // one day of data
    var sched = $.parseICAL(icsFile, start, end);
    
    // display all the event. Overlapping event will.. overlapp.
    for ( e in sched ) {
        var st = sched[e].startDate;
        var ed = sched[e].endDate;
        var st_min = st.getHours()*60 + st.getMinutes();
        var ed_min = ed.getHours()*60 + ed.getMinutes();
        
        if ( st_min < startTime || ed_min > endTime ) 
            continue; // do not display
        event = $.textArea( { height: timeScale*(ed_min-st_min)+'%', 
                              top: timeScale*(st_min-startTime)+'%', 
                              fill: 'grey', fontSize : 30,
                              frame : { shape: 'round', frameColor: 'grey', backColor : 'white' }  } )
                          .text(sched[e].title)
                          .addTo( area );
    }
 }
 
 // Get the data from the ics source
 $.get( uri, function( icsFile ) {
 
    // Create a table with 10% onthe right to display the time
    var table = $.g( { left: '10%' } ).addTo('svg');
    var names = $.g( { width: '10%', top: '10%' } ).addTo('svg');
    // Show the hours
    for ( var t=startTime; t<endTime ; t+=60 ) { // headline
        $.textArea( { top: timeScale*(t-startTime)+'%', height: 40, displayAlign: 'before', fontSize : 30 })
                  .text( Math.floor(t/60) + ":00" )
                  .addTo( names );
    }
    // Show the data for all selected days
    for ( var w=f; w<l; w++ ) {
        var col = $.g( { width: dayWidth+'%', left: dayWidth*(w-f)+'%' } ).addTo( table );
        displayDay( icsFile, w, col );
    }
 }, 'text' );