Calendar - List

Give your Calendar Feature a stylish, different look.

Please be advised that we are not able to customise or adjust this CSS for you, however the input process is straight forward - please copy and paste the following code at the bottom of the Colours section (at the very bottom of that page):



ion-view[state="event-list"] .list { /* Remove Margin for Item Lists */

  margin: 0;

  background-color: #ffffff;

  border-top: 1px solid #dadce0;


ion-view[state="event-list"] div.scroll div.list:nth-child(odd) {background: #fafafa;}

ion-view[state="event-list"] div.scroll div.list:nth-child(even) {background: #ffffff;}

ion-view[state="event-list"] .list:nth-child(1) { /* This is to make sure overlapping lines */

  margin-top: -1px;


ion-view[state="event-list"] { /* Sticky Date */

  margin-top: 8px;

  margin-left: 12px;

  margin-bottom: 8px;

  padding: 8px !important;

  background-color: #fff;

  opacity: 0.98;

  border: 0.5px solid #eee;

  border-radius: 6px;

  width: 150px;

  color: #000;

  font-size: 14px;

  font-weight: bold;

  text-align: center;

  letter-spacing: 1px;

  text-transform: uppercase;

  position: -webkit-sticky;

  position: sticky;

  top: 8px;

  z-index: 10;

  box-shadow: 0 1px 3px rgba(0,0,0,0.22);


ion-view[state="event-list"] .item-thumbnail-left, .item-thumbnail .item-content { /* Thumbnail Properties */

  border: none;

  padding-top: 0;

  padding-left: 0;

  padding-right: 0;

  padding-bottom: 12px;

  margin: 0px 12px 12px 12px;

  background-color: transparent !important;


ion-view[state="event-list"] .item-thumbnail-left>img:first-child { /* Enlarge Photo */

  position: relative;

  top: 0;

  left: 0;

  max-width: 100%;

  max-height: none;

  height: auto;

  margin: 0 auto;

  border: 1px solid #dadce0;

  border-radius: 6px;

  background-color: transparent !important;


ion-view[state="event-list"] .list { /* Event Title */

   margin-top: 10px;

   margin-left: 4px;

   margin-bottom: 4px;

   font-size: 20px;

   white-space: normal;

   font-weight: bold;

   text-transform: capitalize;

   color: #fa941f;

  text-align: left;


ion-view[state="event-list"] .list { /* Event Sub-title and Start Time */

   margin-top: 0;

   margin-left: 4px;

   margin-bottom: 0;

   font-size: 16px;

   white-space: normal;

   color: rgba(76, 76, 75, 0.8);

  text-align: left;




Elements in BOLD can be updated.

  1. Colours - you can replace the HEX codes with the required colours. You can use section tags in BOLD see what section CSS element belongs to.
  2. URLs - you can upload your images using Image Uploader within Modules > Image Uploader. Use the generated URLs and replace the current image URLs in BOLD.

Still need help? Contact Us Contact Us