Difference between revisions of "Team:Hong Kong UCCKE/Notebook"

Line 2: Line 2:
 
<html>
 
<html>
  
 +
<link rel="shortcut icon" href="../favicon.ico">
 +
<link rel="stylesheet" type="text/css" href="css/calendar.css" />
 +
<link rel="stylesheet" type="text/css" href="css/custom_2.css" />
 +
<script src="js/modernizr.custom.63321.js"></script>
  
  
 +
<div class="container">
 +
<section class="main">
 +
<div class="custom-calendar-wrap">
 +
<div id="custom-inner" class="custom-inner">
 +
<div class="custom-header clearfix">
 +
<nav>
 +
<span id="custom-prev" class="custom-prev"></span>
 +
<span id="custom-next" class="custom-next"></span>
 +
</nav>
 +
<h2 id="custom-month" class="custom-month"></h2>
 +
<h3 id="custom-year" class="custom-year"></h3>
 +
</div>
 +
<div id="calendar" class="fc-calendar-container"></div>
 +
</div>
 +
</div>
 +
</section>
 +
</div><!-- /container -->
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 +
<script type="text/javascript" src="js/jquery.calendario.js"></script>
 +
<script type="text/javascript" src="js/data.js"></script>
 +
<script type="text/javascript">
 +
$(function() {
 +
 +
var transEndEventNames = {
 +
'WebkitTransition' : 'webkitTransitionEnd',
 +
'MozTransition' : 'transitionend',
 +
'OTransition' : 'oTransitionEnd',
 +
'msTransition' : 'MSTransitionEnd',
 +
'transition' : 'transitionend'
 +
},
 +
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
 +
$wrapper = $( '#custom-inner' ),
 +
$calendar = $( '#calendar' ),
 +
cal = $calendar.calendario( {
 +
onDayClick : function( $el, $contentEl, dateProperties ) {
  
 +
if( $contentEl.length > 0 ) {
 +
showEvents( $contentEl, dateProperties );
 +
}
  
 +
},
 +
caldata : codropsEvents,
 +
displayWeekAbbr : true
 +
} ),
 +
$month = $( '#custom-month' ).html( cal.getMonthName() ),
 +
$year = $( '#custom-year' ).html( cal.getYear() );
 +
 +
$( '#custom-next' ).on( 'click', function() {
 +
cal.gotoNextMonth( updateMonthYear );
 +
} );
 +
$( '#custom-prev' ).on( 'click', function() {
 +
cal.gotoPreviousMonth( updateMonthYear );
 +
} );
 +
 +
function updateMonthYear() {
 +
$month.html( cal.getMonthName() );
 +
$year.html( cal.getYear() );
 +
}
 +
 +
// just an example..
 +
function showEvents( $contentEl, dateProperties ) {
 +
 +
hideEvents();
 +
 +
var $events = $( '<div id="custom-content-reveal" class="custom-content-reveal"><h4>Events for ' + dateProperties.monthname + ' ' + dateProperties.day + ', ' + dateProperties.year + '</h4></div>' ),
 +
$close = $( '<span class="custom-content-close"></span>' ).on( 'click', hideEvents );
 +
 +
$events.append( $contentEl.html() , $close ).insertAfter( $wrapper );
 +
 +
setTimeout( function() {
 +
$events.css( 'top', '0%' );
 +
}, 25 );
 +
 +
}
 +
function hideEvents() {
 +
 +
var $events = $( '#custom-content-reveal' );
 +
if( $events.length > 0 ) {
 +
 +
$events.css( 'top', '100%' );
 +
Modernizr.csstransitions ? $events.on( transEndEventName, function() { $( this ).remove(); } ) : $events.remove();
 +
 +
}
 +
 +
}
 +
 +
});
 +
</script>
  
  

Revision as of 13:35, 13 August 2016

MENU ▤

Document the dates you worked on your project.

What should this page have?
  • Chronological notes of what your team is doing.
  • Brief descriptions of daily important events.
  • Pictures of your progress.
  • Mention who participated in what task.
Inspiration

You can see what others teams have done to organize their notes: