Timeline - Custom This example demonstrates timeline's customization (custom styles) along with i18n text.
<p:timeline id="timeline" value="#{customTimelineView.model}"  
        editable="true" eventMargin="10" eventMarginAxis="0"  
        start="#{customTimelineView.start}"  
        end="#{customTimelineView.end}"  
        showNavigation="true" showButtonNew="true"  
        axisOnTop="true" stackEvents="false"/>  



<style type="text/css">
    /* Custom styles for the Timeline */  
    div.timeline-frame {  
        border-color: #5D99C3;  
        border-radius: 5px;  
    }  

    div.timeline-axis {  
        border-color: #5D99C3;  
        background-color: #5D99C3;  
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5D99C3', endColorstr='#3A6DA0') alpha(opacity = 100);  
        background: -webkit-gradient(linear, left top, left bottom, from(#5D99C3), to(#3A6DA0));  
        background: -moz-linear-gradient(top,  #5D99C3,  #3A6DA0);  
        -khtml-opacity: 1;  
        -moz-opacity: 1;  
        opacity: 1;  
    }  

    div.timeline-groups-axis {  
        border-color: #5D99C3;  
    }  

    div.timeline-groups-axis-onleft {  
        border-style: none solid none none;  
    }  

    div.timeline-axis-text {  
        color: white;  
    }  

    div.timeline-event {  
        color: white !important;  
        border-radius: 5px !important;  
    }  

    div.timeline-event-content {  
        padding: 5px;  
        text-shadow: none;  
    }  

    div.unavailable {  
        background: #F03030 none !important;  /* red */  
        border-color: #bd2828 !important;     /* red */  
    }  

    div.available {  
        background: #1AA11A none !important;  /* green */  
        border-color: #136e13 !important;     /* green */  
    }  

    div.maybe {  
        background: #FFA500 none !important;  /* orange */  
        border-color: #cc8100 !important;     /* orange */  
    }  

    div.timeline-event-selected {  
        background: #BECEFE none !important;  
        border-color: #97B0F8 !important;  
    }  
</style>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.2-SNAPSHOT on Mojarra-2.3.2.