Skip to content

Timeline Collection View Cell


open class FUITimelineCollectionViewCell: NibDesignableCollectionViewCell

FUITimelineCollectionViewCell is an Interface-Builder-designable UI component that extends NibDesignableCollectionViewCell for showing information of a task. FUITimelinePreviewView embeds a collection view which displays a set of FUITimelineCollectionViewCell.

Views Available in FUITimelineCollectionViewCell

  • titleLabel: an UILabel showing a short description of the task.

  • footnoteLabel: anUILabel showing extra information about the task. When cell is used with a FUITimelinePreviewView, the textual representation of due date of FUITimelineItem is put here.

  • nodeImageView: anUIImageView contains a node image showing the status of the task. You change the node type by setting 'nodeType' on FUITimelineCollectionViewCell.

Example Initialization and Configuration

public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FUITimelineCollectionViewCell.reuseIdentifier, for: indexPath) as! FUITimelineCollectionViewCell

cell.title = "Development Kick-off"
cell.footnote = Date()
cell.nodeType = .open

return cell


fdlFUITimelineCollectionViewCell_titleLabel {
   font-style: subheadline;
   font-color: primary1;

fdlFUITimelineCollectionViewCell_footnoteLabel {
   font-style: footnote;
   font-color: primary3;

Last update: December 8, 2020